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

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

Ever wanted to create a custom style and didn't know where to start? Now you do!

CyberAP

Well-known member
#1
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

Well-known member
#2
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

Well-known member
#3
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

Well-known member
#4
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. ;)
 
#6
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.
 

Attachments

#9
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.
 

Anthony Parsons

Well-known member
#12
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.