Comment out EXTRA.css?

Neil E.

Active member
Might seem like a nutty question, but I'm experimenting with some changes. The idea is to keep my TMS changes active plus the current SP adjustments.

/* entire contents of EXTRA */ should simply keep EXTRA from being processed.

When I do this I don't see any change. If I delete EXTRA, then I get results. Any idea why commenting out fails or is this a caching issue with my browser?
 
Additional question: Say I want to remove a color in one spot as follows (reverts back to default color). Is it OK to comment out something inside a style property?

ul.autoCompleteList
{
border: 1px solid /* #ff0000 */ !important;
border-radius: 5px 5px 5px 5px !important;
}

OR

ul.autoCompleteList
{
/* border: 1px solid #ff0000 !important */;
border-radius: 5px 5px 5px 5px !important;
}
 
/* commenting out like this should definitely work */ though of course it depends on whether there's any other /* comments in there. It may be that one you're opening at the top, ends up being closed by the next /*

I've not explained that very well...

Another thing could be the fact that CSS is heavily cached.

I would refresh the page with Ctrl + F5 to force a refresh or clear your browser cache.

Finally, another commenting method that wouldn't interfere with other comments in the file is:

<xen:comment> </xen:comment>
 
Browsers shouldn't cache the xenforo CSS, as xF adds on id number to the css file. This should change once you do any changes, thus forcing the browser to reload the css.
 
I often get a situation where I can do multiple changes to a specific class one day (change colors, border radius etc) and then I'll go back the next day to do the same thing and all my new (day 2) changes are ignored. Sometimes deleting one of the properties will be enough to force it to "take". Other times I'll have to move the section of code to the beginning of EXTRA before it "takes". Note that I'm talking about code that I know is correct because it worked fine on day one (no other changes made).

When I first started on XF I didn't know anything about CSS. I've spent enough time on it now that I can usually get the CSS correct. I'm still baffled as to why I can use a compact format (padding: 5px 5px 5px 5x) for some classes but then have to use a full format (padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left 5px) for other classes.

EXTRA acts like it doesn't get updated unless there is a significant change to the code.
 
If it works when you move it to the top of extra.css, it would suggest you have already defined the same rule else where in extra.css, so when you move your new rule to the top, it will be parsed first.

Unless you have some server cache enabled, any CSS changes you make should be instant. Again, the problem with padding could very well be that the same CSS is defined elsewhere, and thus your changes are ignored, but when you increase specificity by using padding-top etc, they are applied. I would suggest you use some element inspector like Firebug or pressing F12 in Chrome. That way you can see actually what CSS is applied, and you can easily see if anything is overwritten elsewhere.
 
Top Bottom