Creating custom style: guide to beginners, best practices, tips and tricks

[CyberAP]

CyberAP submitted a new resource:

Creating custom style: guide to beginners, best practices, tips and tricks (version 1.0) - Ever wanted to create a custom style and didn't know where to start? Now you do!

So, I've been making styles for XenForo for over 2 years now and have some experience to share with you, my beloved style makers.

Requirements for readers:

• You need a basic understanding of html and css. Internet has a lot of resources devoted to this topic.
• Desire to study.

Where to start?
First of all you should learn how the forum works if you already didn't do that. Just explore all the pages that XenForo has, take part in the community.
Only...

Read more about this resource...

 

[Anthony Parsons]

If you're going to put all your custom CSS into one template, outside of style properties use, then it is better not to include them in templates, and instead call it once via including it into the public.css template, either before or after where extra.css is called, depending on whether you want to override extra.css as well, being the last CSS call.

I agree with you though, that it can be painful trying to find the right solution, because parent CSS issues are prominent when you start changing things around in Xenforo, due to it being coded pretty much semantically correct. I know... who would think, an actual software correctly coded to use parenting properly... though XF have achieved that, and it can be a real bugger for custom skinning.

Nice guide.

 

[CyberAP]

I try not to use extra.css because users often make changes there and these changes can be inherited by child styles. Also I don't change any of CSS templates because they might change in next versions and you'll have to compare default and your version as I did before. With my way of changing CSS you won't need to compare any CSS templates at all.

 

[Cal]

Excellent guide CyberAP. I've been wanting to contribute to the community some how but I didn't know where to start. I'm going to try to learn from this.

 

[CyberAP]

CyberAP updated Creating custom style: guide to beginners, best practices, tips and tricks with a new update entry:

Slightly updated the resource

Added recommendation to use page_container when needed.
Made explaining of CSS customization process more clear.

Read the rest of this update entry...

 

[ReneHermi]

I´ve noticed in xenforo 1.2.0 that the extra.css is often not working when the style is already defined in the style properties . Instead of that i have to find the proper style with style properties and have to write the modified css into the Miscellaneous box. That rewrites the code of the default css.

 

[Paul B]

Try using greater specificity or, if necessary, !important.

 

[ReneHermi]

Hi @Brogan,

thanks for your involvement.

i already tried !important, If you like, check it out by your own.
I did some screenshots to follow the steps easy :

 

[ReneHermi]

Btw it would be awesome if the framework could write some comments in the generated css file (maybe in debug mode) about the name of the used style property group. So it would be very easy to find a specific style in the Style property editor.

 

[Russ]

Hi @Brogan,

thanks for your involvement.

i already tried !important, If you like, check it out by your own.
I did some screenshots to follow the steps easy :

!important goes before the ending ;

 

[ReneHermi]

Ahhh stupido Thanks Russ

 

[Anthony Parsons]

You should always use inspector to find the 'actual' class definition being used, which helps remove issues or by having to use important in most cases, when adding to extra.css.