Resource icon

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

Overview Updates (1) Reviews (5) Discussion
CyberAP

CyberAP

Well-known member
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...
Click to expand...

Read more about this resource...
 
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.
 
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.
 
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. ;)
 
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

  • Unbenannt.webp
    Unbenannt.webp
    23.1 KB · Views: 31
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 :
 

Attachments

  • modified.webp
    modified.webp
    42 KB · Views: 37
  • modified_extra.webp
    modified_extra.webp
    24.4 KB · Views: 33
  • modified_front.webp
    modified_front.webp
    89.4 KB · Views: 32
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.
 
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.
 
You must log in or register to reply here.
Back
Top Bottom