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

Add all css edits to EXTRA.css

Make upgrading painless by utilising this purpose-built template.

  1. Brogan

    Brogan XenForo Moderator Staff Member

    Brogan submitted a new resource:

    Add all css edits to EXTRA.css (version 1.0) - Make upgrading painless by utilising this purpose-built template.

    Read more about this resource...
  2. CyberAP

    CyberAP Well-Known Member

    Nice idea. I think it is better if we have a special section in style properties to insert custom css without editing a template! :)
  3. Floris

    Floris Guest

    Yep, I thought that's why extra.css was there to be honest. :) Makes upgrading easy.
  4. anotheralias

    anotheralias Well-Known Member

    Can you elaborate Brogan? I don't see how that's possible - how does the extra.CSS override what's in place?
  5. Brogan

    Brogan XenForo Moderator Staff Member

    Well if you're adding to the css then an override isn't necessary as it's new css.

    To override existing css you can use the !important declaration where required.

    That isn't always necessary though as it depends in which order the css is called.
    For example, adding a float:right to the logo in EXTRA.css overrides the float: left in header.css.
  6. Floris

    Floris Guest

    If it is loaded last, it doesn't inherit when it's set for that whatever it is loaded for, if margin was set to 5 default, and your extra.css has margin 50, it should be margin, as it overrides what's set before.
    Darkimmortal and anotheralias like this.
  7. anotheralias

    anotheralias Well-Known Member

    Thanks Floris, that's what I didn't understand.
  8. manik

    manik Member

    That is an excellent idea. Would be very helpful and would reflect on any style and leave the original style alone.
  9. Marc

    Marc Well-Known Member

    Assuming this is the lowest in the cascade then?
  10. Brogan

    Brogan XenForo Moderator Staff Member

    Not quite but just about.
    I have had to use the !important declaration a few times but generally most of the edits I've applied are OK.
  11. Marc

    Marc Well-Known Member

    Cool ... Good stuff :)
  12. Erik

    Erik Well-Known Member

    Personally, I don't think this is too good of an idea because the Style Properties system won't inherit the changes. Any end user wanting to tweak something would be very confused when they go into the Style Properties interface.

    Also, editing each template allows me to see which default templates have changed between each XenForo version ("outdated templates") so I can check whether I need to make corresponding changes in my CSS. :)
    ragtek likes this.
  13. Caelum

    Caelum Well-Known Member

    This just made my life a lot easier.

    Thanks :p
    Floris likes this.
  14. dieketzer

    dieketzer Well-Known Member

    will the extra.css of a child style over-ride the extra.css of its parent?
    if so, to what degree? merely the common attributes? or will the parents extra.css be bypassed in its entirety?
  15. Brogan

    Brogan XenForo Moderator Staff Member

    The EXTRA.css of the child will override the parent.

    If for example, you have .ugc a { font-weight: bold; } in the parent then creating a new child style will also naturally include that in EXTRA.css of the child.

    However, if you then remove that from the child style the links will revert to the default style and the parent style will still show them as bold.
    dieketzer likes this.
  16. dieketzer

    dieketzer Well-Known Member

    what would happen if i made made various changes to the childs extra.css, then at some later date added a .ugc a { font-weight: bold; } to the parents extra.css. would the child css inherit the new css from its parent?
    i suppose what i am wondering is this:
    as far as template mechanics go, is it true that a child css template will only inherit the contents of the parent css template at the time the child is created? and from that point on edits to the parent will not be reflected in the contents of the child css?
  17. Brogan

    Brogan XenForo Moderator Staff Member

    No, any subsequent changes made to the parent EXTRA.css are not carried through to the child style.
    dieketzer likes this.
  18. anotheralias

    anotheralias Well-Known Member

    This hint has been invaluable. I wish I could Like it about a thousand times.

    And, just in case I'm doing this the hard way, is there by any chance a text file somewhere that has all the css in one place? I don't mean the xenforo.css file - I mean that, plus all the others - message.css, breadcrumbs.css and so on. I'm just asking in case there is one and I can't find it - I'm not requesting one or anything. If not I'll just continue copy/pasting them into extra.css one-by-one.
  19. Brogan

    Brogan XenForo Moderator Staff Member

    All of the templates are in \install\data\install.xml

    You will have to go through and pick out all the .css templates though.
    anotheralias likes this.
  20. anotheralias

    anotheralias Well-Known Member

    I hope this isn't too nutty of a question but, does it cause anything to slow down at all when the browser has to interpret css and then reinterpret it? (Or whatever happens here?) In other words, should I be using this in moderation or can I sling whatever I want in there?

Share This Page