moving changes to Extra.css

[Ryan Kent]

I am working on moving my coding changes out of their base templates into Extra.css. I understand how to add new values which aren't present, and also how to over-ride existing values with !important. I am not clear on how to make some other changes I have encountered. A few examples below:

in EWRatendo.css there is a line

.eventList li { width: 95%; float: left; }

another example

.eventDaily .avatar .s { background-position: center center; background-size: 48px 48px; -moz-background-size: 48px 48px;

I need to comment out these lines. How can I leave these lines untouched in the base template then later say in extra.css to disregard them as if they were commented out?

 

[Paul B]

One way to do it would be to create those classes with the actual code which results when commenting them out.

So for example, if by commenting out the width: 95% it actually becomes width 100%, then you can add some css to EXTRA.css to change it to width: 100%.

 

[Floris]

Look at it this way:

first
more
more
more
last

first = browser rendering engine
more = script
more mores = script overwriting itself for exceptions
last = extra.css

If the browser renders borders by default with 1 pixel, and you don't define a border width, it will perhaps in some browsers therefor show as a single width pixel.

If then the script says, but I want all my borders everywhere to be 2 pixels. Then you are a newer rule, and you overwrite that value.

And at certain points you can make an exception, now that tag/elements, etc is just 1 pixel.

But in extra - the last one in line - you decide it is 4 pixels. Then the last one overwrites the browser, script, and exceptions, setting it to 4px.

You don't have to uncomment the rest, it either inherits the value, or overwrites it.

 

[Ryan Kent]

Thank you Floris. I do understand that extra.css is often (but not always) the last template applied. I also understand that !important indicator can override the order. My struggle comes with my limited understanding of html and css coding.

For example in EWRatendo.css there is a statement:

.eventDaily .avatar .s { background-position: center center; background-size: 48px 48px; -moz-background-size: 48px 48px;

That statement assigns an avatar to an Upcoming Event listed in that module on the portal page. In order to fit more events and look cleaner, I removed the avatar. The code works perfectly except it is contained in EWRatendo.css, not extra.css. I basically want to say:

.eventDaily .avatar .s { ignore any prior code }

I am not sure how to do so in this instance. Perhaps it can't be done, or can't be done in a reasonable way in which case the current template modifications are something which will simply need to be dealt with during an upgrade. It seems many of the template modifications made on my site fall into this area so I want to explore all possibilities.

 

[Paul B]

I explained how to do it above - just create some css which will have the same effect as commenting out the code.

I don't have the add-on installed but you could try something like: .eventDaily .avatar .s {background-image: none;}

 

[Ryan Kent]

ah ok, thx. I think it's time for me to take a look at some CSS tuturials