1. 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!

  1. 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!

    Read more about this resource...
    CraftyDex likes this.
  2. Anthony Parsons

    Anthony Parsons Well-Known Member

    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.
  3. CyberAP

    CyberAP Well-Known Member

    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.
    Anthony Parsons likes this.
  4. Cal

    Cal Well-Known Member

    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. ;)
  5. CyberAP

    CyberAP Well-Known Member

  6. ReneHermi

    ReneHermi Member

    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.

    Attached Files:

  7. Brogan

    Brogan XenForo Moderator Staff Member

    Try using greater specificity or, if necessary, !important.
    ReneHermi likes this.
  8. ReneHermi

    ReneHermi Member

    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 :

    Attached Files:

  9. ReneHermi

    ReneHermi Member

    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.
  10. Russ

    Russ Well-Known Member

    !important goes before the ending ;
    ReneHermi likes this.
  11. ReneHermi

    ReneHermi Member

    Ahhh stupido:) Thanks Russ(y)
  12. Anthony Parsons

    Anthony Parsons Well-Known Member

    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.

Share This Page