1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Page Width Default Theme

Discussion in 'Styling and Customization Questions' started by Divvens, Jul 14, 2011.

  1. Divvens

    Divvens Well-Known Member

    I'm having a weird problem with the page width in the default theme.

    If I enter this in the additional css

    It does nothing...and when I enter the width in the box it makes the whole theme shift left (attached imaged). Anyone know whats wrong? XD

    Oh, we're starting up our community so we are not going to use pre-made themes since we want it to be truly ours and have a feel of the content we are going to have, I need some guides on whats the basic to making a theme for Xenforo? What do I need to know to get started, and the important rules if there are any or a guide to making a theme of some sort? If not I'll try to learn by trial and error :p
     

    Attached Files:

  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Use this:

    Code:
    width: 1020px;
    margin: auto;
    
    Screen shot 2011-07-13 at 5.58.51 PM.png
     
    CapnLuffy likes this.
  3. Divvens

    Divvens Well-Known Member

    Now I feel like a fool for not trying that out in the first place...
    Thank you :)

    I'm still interested in knowing if there is any guide to create a theme. Since I tried using the color palette and it's very useful but sometimes a change in certain colors can cause change in certain text colors to. If there is a guide/manual I'll read it and understand the basics, or just try it until I get it right ^^
     
  4. Russ

    Russ Well-Known Member

    It's really what it comes down to, just dig into it and experiment. Try keeping as much of your template edits into your style properties and extra.css. Also a good tool I use is Firebug through firefox, it helps find out which class items belong too css wise :).

    Good luck, you'll catch on quick I'm sure.
     
  5. Divvens

    Divvens Well-Known Member

    Thanks for the tips! I'll be needing quite a bit of help and be disturbing the community a lot for the help :p
     
  6. Divvens

    Divvens Well-Known Member

    I've already run into something...I feel so stupid >.<
    As you can see, I've changed the text colors/hover/background but some are still light blue. I couldn't find the option to change them in the style properties or I haven't looked hard enough? Can someone tell me where is it?
    [​IMG]

    Russ, if I do edits in the style properties will they change if there is an update, etc? If I need to customize the look of the nav bar I need to do that in the extra.css right?
     
  7. Brogan

    Brogan XenForo Moderator Staff Member

    Add this to EXTRA.css

    Code:
    .navTabs .navTab.PopupClosed .navLink {
    color: #CC0000;
    }
    
    Change the colour to suit, you can use an @styleProperty if you wish.

    Any changes made in Style Properties and EXTRA.css will be preserved during upgrades.
     
  8. Divvens

    Divvens Well-Known Member

    Thanks for answering :)

    If I want my changes in the Extra.css to override any settings elsewhere, should I just add an !important? Will it make sure that if the edits are done somewhere else, it still wont affect the theme until extra.css is edited?
     
  9. Brogan

    Brogan XenForo Moderator Staff Member

  10. Divvens

    Divvens Well-Known Member

    Sorry for troubling again, the same menu option in the nav bar, on hover how to change the color?

    that doesn't seem to work.
     
  11. Brogan

    Brogan XenForo Moderator Staff Member

    .navTabs .navTab.PopupClosed .navLink:hover {
    color: #FFFFFF;
    }

    Works fine for me.
     
  12. Divvens

    Divvens Well-Known Member

    Yes, it does :eek: ugh I feel like such a moron...
    Thanks for all the help ^^ I'll keep disturbing you until I get a total hang of everything, I must say its really really easy. I love xenforo!
     
  13. Divvens

    Divvens Well-Known Member

    Alright another question...this is probably easy to but I've tried a few things and just cant get it right.

    [​IMG]

    How do I change the text color of the menu option when the drop down is open?
     
  14. Brogan

    Brogan XenForo Moderator Staff Member

    Style Properties -> Header and Navigation -> Navigation Tab : Text Color
     
    CapnLuffy likes this.
  15. Divvens

    Divvens Well-Known Member

    Thanks a lot Brogan xD I knew it, it was easy but I was complicating things up sheesh I should look more carefully. Thanks again.
     
  16. Divvens

    Divvens Well-Known Member

    Alright, this will be my last question. I'm done with the theme for now, I love the software and how it actually made the editing of the whole thing easy.

    [​IMG]

    Where can I change the blue shade of those boxes? I don't want to touch the color palette as all the edits I did was in the style properties. Or do I need to add something in extra.css?
     
  17. Brogan

    Brogan XenForo Moderator Staff Member

    Add this to EXTRA.css

    Code:
    .sidebar .userList .secondaryContent {
    background-color: #CC0000;
    }
    
    #boardStats.secondaryContent.statsList {
    background-color: #CC0000;
    }
    Change the colour to suit.
     
    CapnLuffy likes this.
  18. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    The best way to change your colors is to first use the palette. Then edit the other style properties to change colors that are not controlled by the palette, or to make exceptions. Using nothing but style properties to change colors is more work, and you lose the power of the color palette.

    With that said, that light blue color uses this color from the palette:

    Admin CP -> Appearance -> Style Properties -> Color Palette -> @primaryLightest

    Or the specific style property for that area is:

    Admin CP -> Appearance -> Style Properties -> Building Blocks -> Secondary Content

    edit - ninjaed by brogan :p
     
    CapnLuffy likes this.
  19. Divvens

    Divvens Well-Known Member

    I tried the color palette first, but I got confused. I went over to the style properties and though it took more time somehow I personally found it easier that way. Now I have my theme set up! Thanks for all the help :) I may have troubled Brogan the most, Thanks ^^
     
  20. Divvens

    Divvens Well-Known Member

    Just when I thought I'd finished a few more things ^^ Sorry for troubling once again

    [​IMG]

    I want to change the link color from blue to something else, and even for topic titles, member name etc. But only those things. Like I want to change the colors of only these three things.

    1) Forum Title
    2) Topic Title
    3) And the recent activity links (Username and topic title)

    I tried changing the general link color, it didn't work for these mentioned above. So if anyone could guide me on how to change them.

    Edit: Oh, can I also get rid of the blue outline on the recent activity box? I checked the secondary content option and I'm pretty sure there is no border with blue.
     

Share This Page