Add all css edits to EXTRA.css

Add all css edits to EXTRA.css

Overview Updates (1) Reviews (1) Discussion
anotheralias said:
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?
Click to expand...
Theoretically, best practise would be not using extra.css (to avoid the use of !important and avoid plethora's of unnecessary style rules that just get overwritten by extra.css and serve no purpose). The only actual (really very mild) performance problem I can see is the unnecessary style rules though.

In practice, using extra.css is far easier, doubly so during beta phase, and allows for disgustingly easy style upgrades. ;)

Bottom line: save your sanity, smack everything into extra.css. I wouldn't worry about performance loss too much, as it will largely be unnoticeable. Oh yeah, and consider minifying it. :p
 
where are css files and where do I place extras.css .. running blind right now, I will catch on eventually.... peace
 
All of the templates are in the ACP.

Click on Appearance -> Templates and then you can search for a specific template.

EXTRA.css is a default (blank) template.

Make sure you are working with the templates from the correct style if you have multiple styles.
 
No, just use the existing one, that's what it's for.
You can't have two identically named templates anyway.
 
OK .. established all of that.. whew! how do I link the EXTRA.css file to the CSS that I am trying to customize?
 
you dont link it. you instead 'override' it.
use of '!important' is suggested.

example. i want to change the background colour in this css from the footer.css template:
Code: 
.footer .pageContent
{
    background: @primaryMedium;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    overflow: hidden; zoom: 1;
    font-size: 11px;
}

i open EXTRA.css and enter this:
Code: 
.footer .pageContent
{
    background: @primaryDark !important;
}
 
masterchief said:
OK .. established all of that.. whew! how do I link the EXTRA.css file to the CSS that I am trying to customize?
Click to expand...
You can have multiple attributes for the same class, the order they are called is what determines the final appearance, as is use of the !important attribute.

So for example, if you enter this in your template, the color will be green, the last in the list:
Code: 
.my_class { color: red; }
.my_class { color: blue; }
.my_class { color: green; }


If however you enter this then the color will be blue as it has the !important declaration:
Code: 
.my_class { color: red; }
.my_class { color: blue !important; }
.my_class { color: green; }


EXTRA.css is included by public.css so it is always present but as it's not last in the cascade you will sometimes have to use !important to override the existing CSS.
 
why is it that sometimes it just overrides without having to use !important and sometimes you have to use it?
 
does the system load the css from a to z? so would it help if the extra.css was namend "1extra.css" ? i just ask because i only want to edit the extra.css for my style but i dont like !important
 
No, it depends on which order the classes are used.
Changing the name of the template won't make any difference.

Although EXTRA.css is the last template to be included in public.css. using EXTRA.css will require the use of !important in certain circumstances.

Your only alternative is to edit the css templates directly/or use the Style Properties system.
 
thank you brogan for your chat like fast answers :) i will stick to !important, as for now i dont want to do changes in the css files. thank you
 
Brogan said:
No, it depends on which order the classes are used.
Changing the name of the template won't make any difference.

Although EXTRA.css is the last template to be included in public.css. using EXTRA.css will require the use of !important in certain circumstances.

Your only alternative is to edit the css templates directly/or use the Style Properties system.
Click to expand...
Technically it depends not only on the order, but on the specific cascade of rules. For example

Code: 
.myDiv#unique {
     background-color: blue;
}

.myDiv {
     background-color: red;
}

In this case a div with class "myDiv" and an ID of "unique" would actually have a background color of blue, not red, although red is the last rule in the list. See CSS cascade.

I'm still up in the air on whether putting everything in extra.css is a good idea. The one major advantage that I just found is that it is super, super easy to upgrade styles, but having everything in one place is just messy and using !important rules everywhere is bad practice.
 
I've been deleting stuff out of the regular template if I add it to extra.css. Not that I've added all that many, just the ones that are heavily customized, so that I don't have to redo them each time.
 
Shelley said:
EXTRA.css template is the best thing since sliced bread. Anyone that doesn't make use of this template quite frankly is bonkers.
Click to expand...
:(

I don't use it and would never use global for all the stuff, like brogan wrote, that's only for lazy people:P
Add all css edits to EXTRA.css
Click to expand...
 
You must log in or register to reply here.
Back
Top Bottom