Page Width Default Theme

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

_width: 1020px;
_margin: 0 auto;

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
 

Attachments

  • Untitled-2.webp
    Untitled-2.webp
    47.4 KB · Views: 16
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 ^^
 
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 ^^

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.
 
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?
tgKDp.png


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?
 
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.
 
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?
 
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!
 
Alright another question...this is probably easy to but I've tried a few things and just cant get it right.

yQERZ.png


How do I change the text color of the menu option when the drop down is open?
 
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.

emGmi.png


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?
 
Add this to EXTRA.css

Code:
.sidebar .userList .secondaryContent {
background-color: #CC0000;
}

#boardStats.secondaryContent.statsList {
background-color: #CC0000;
}

Change the colour to suit.
 
emGmi.png


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?

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
 
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

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 ^^
 
Just when I thought I'd finished a few more things ^^ Sorry for troubling once again

QAEsL.png


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.
 
Top Bottom