Add all css edits to EXTRA.css

Add all css edits to EXTRA.css

Overview Updates (1) Reviews (1) Discussion
Paul B

Paul B

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.

When making any css edits, add them to EXTRA.css instead of the actual css file related to the template you are working on.

That way all of your edits are in one file and easy to refer to.

It also makes upgrading easier as you won't have any css templates to revert and reapply the changes to.

EXTRA.css is included by public.css so it is always present and it is never overwritten when upgrading.
Click to expand...

Read more about this resource...
 
Nice idea. I think it is better if we have a special section in style properties to insert custom css without editing a template! :)
 
Yep, I thought that's why extra.css was there to be honest. :) Makes upgrading easy.
 
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.
 
  • Like
Reactions: CVN
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.
 
Floris said:
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.
Click to expand...

Thanks Floris, that's what I didn't understand.
 
That is an excellent idea. Would be very helpful and would reflect on any style and leave the original style alone.
 
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.
 
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. :)
 
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?
 
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.
 
Brogan said:
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.
Click to expand...
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?
 
dieketzer said:
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?
Click to expand...
No, any subsequent changes made to the parent EXTRA.css are not carried through to the child style.
 
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.
 
All of the templates are in \install\data\install.xml

You will have to go through and pick out all the .css templates though.
 
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?
 
You must log in or register to reply here.
Back
Top Bottom