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

Understanding EXTRA.CSS

Neil E.

Active member
#1
Can EXTRA.CSS modify everything related to styles?

I'm looking at this with the viewpoint of doing a minimum amount of template editing (for the purpose of simplifying upgrades). Let's look at this navigation.css code as an example:

Code:
/* ---------------------------------------- */
    /* unselected tab, popup closed */
 
    .navTabs .navTab.PopupClosed .navLink
    {
        color: @primaryLighter;
    }
 
        .navTabs .navTab.PopupClosed:hover
        {
            background-color: @primaryMedium;
        }
   
            .navTabs .navTab.PopupClosed .navLink:hover
            {
                color: @textCtrlBackground;
            }
I can change colors in the template, but if I copy this into EXTRA.CSS and change the colors there, will it have the same effect? Should all style changes be done in EXTRA.CSS only? At some point does EXTRA.CSS become so big that it becomes clumsy? Do you edit templates for HTML changes only, or for both HTML and CSS?
 

Lisa

Well-known member
#2
I use extra.css as much as possible, I prefer using that than going through all the style properties. You can't use it for editing HTML, that's templates - but for changing the appearance via css, extra.css is the baby to do it in ;)
 

Steve F

Well-known member
#3
I have been using the TMS system by guiltar for a good while now. I suggest giving it test run to learn the way it works, it can save you from directly editing templates which means easy updates. I have used it on a couple skins I made for myself with great results changing the layout a good bit.
 

Neil E.

Active member
#5
@ Azhria I'm liking EXTRA more all the time.

@Qwk86gn I'm steering away from TMS until I'm sure I've got the basics mastered.

@Shelley Cool color combinations.
 

Steve F

Well-known member
#6
I generally use the EXTRA.css for CSS but use the TMS for HTML edits. The EXTRA.css works just fine as Shelley stated but if I need to move things around I use the TMS, just because of the ease of updating.
 

Shelley

Well-known member
#7
I generally use the EXTRA.css for CSS but use the TMS for HTML edits. The EXTRA.css works just fine as Shelley stated but if I need to move things around I use the TMS, just because of the ease of updating.
I'll have to checkout this TMS one of these days I keep meaning to but my only concern that if templates within the TMS need updated when a xenforo update comes this means I would have to hold off on making any updates to my styles. That said, everyone is giving good reviews for the TMS so I might check it out regardless.
 

Lisa

Well-known member
#8
I'll have to checkout this TMS one of these days I keep meaning to but my only concern that if templates within the TMS need updated when a xenforo update comes this means I would have to hold off on making any updates to my styles. That said, everyone is giving good reviews for the TMS so I might check it out regardless.
This is what puts me off it too.
 

Shelley

Well-known member
#9
This is what puts me off it too.
Yeah the concern is worrying for me especially when my site is used to being updated no longer than 5 minutes after a xenforo update. If my site detects that I'm running an old version 5 minutes after a new release it auto detects this and closes my site down, removes my avatar and greyscales my site so that is the biggest concern for me.
 

Steve F

Well-known member
#10
I'll have to checkout this TMS one of these days I keep meaning to but my only concern that if templates within the TMS need updated when a xenforo update comes this means I would have to hold off on making any updates to my styles. That said, everyone is giving good reviews for the TMS so I might check it out regardless.
It is a really powerful tool, something I would like to see be in the core. You can export a style and retain the TMS modifications or export independent version and retain the edits made for use without the TMS.
 

Shelley

Well-known member
#11
It is a really powerful tool, something I would like to see be in the core. You can export a style and retain the TMS modifications or export independent version and retain the edits made for use without the TMS.
oh definitely, i think if this was added to the core styling would be a stylers dream and updates would be even quicker. I wonder if they did ever consider adding something like the TMS into the core?
 

Luxus

Well-known member
#12
I am using TMS and I am addicted to it. I have made a lot of changes in the html and my site is not even finished. My site survived the 1.1.3 update without any issues (except reverting of some settings made to the master template, which you should never do in the first place). After the update all of your TMS edits are disabled by default so you should always see template differences from the new version. You then just let TMS rebuild your TMS edits and your style is back working with the new xenforo version.

As for the EXTRA.css, there is no reason to use it if you have TMS imo. In fact, the EXTRA.css is a "TMS lite for CSS". The reason why in my opinion it's not a good idea to use EXTRA.css with TMS is that all of your mods are loaded on any page. For instance lets say you have made special UI images visible only for registered members or special usergroups. By putting the CSS for those images in the EXTRA.css regardless whether you are a guest or are assigned to any usergroup, you always get the images loaded to your browser's cache. Whether you visit the index page, the member page, the help page, heck, even a 404 error page you always get the full EXTRA.css loaded. Furthermore, your style can easily be copied without much effort if you put all your custom CSS in the EXTRA.css. I don't want my style I put a lot of work into to be easily forgeable.

If you use TMS smart you can make it that only the needed custom CSS is loaded, which also saves some bandwidth and http requests. And if by chance TMS support is dead and a new version of XenForo comes out that breaks TMS (unlikely though) TMS allows you to export your TMS edits to a standard XenForo compatible format xml.

To sum things up: TMS = The Must-Use add-on for Stylers
 

Neil E.

Active member
#14
By putting the CSS for those images in the EXTRA.css regardless whether you are a guest or are assigned to any usergroup, you always get the images loaded to your browser's cache. Whether you visit the index page, the member page, the help page, heck, even a 404 error page you always get the full EXTRA.css loaded. Furthermore, your style can easily be copied without much effort if you put all your custom CSS in the EXTRA.css. I don't want my style I put a lot of work into to be easily forgeable.
This is a very good point. I was surprised to see that comments I placed in EXTRA.CSS (for my own reminder) were viewable.
 

Neil E.

Active member
#15
Since you folks have LOTS of experience, is there any real use for style properties? Shouldn't everything be done in the relevant template?
Take Quicksearch as an example. It exists in search_bar.css. Quicksearch doesn't have it's own style property, so a template needs to be edited.

Once I started looking at XenForo in detail and wanted to make style adjustments to specific elements, I had to keep asking where things were located.
Many things aren't accessible using style properties. Another thing I wound up doing was putting specific colors (hex or rgb) into css to break the association to the color pallette. Changing the pallette affects so many elements that the color scheme gets wonky quickly.

Keep in mind I'm new to all this and may be looking at it from a skewed perspective. At first glance the TMS looks strange, but it may be a great solution. I'm having a tough time deciding how best to make changes and keep track of them and be able to upgrade easily. Do most XenForo users wind up becoming "power users" because of all the tweaks that seem inevitable?
 

Luxus

Well-known member
#16
Style properties are mainly for people with no CSS knowledge and the things you can do with them are limited. They are useful if you want to adjust things globally like the font-size of any page's titlebar. But if you want for instance have different font-sizes for the titlebar on the index page and the titlebar on the thread list page, then you have to edit templates. Again, TMS is best suitable for this.
 

Neil E.

Active member
#17
I am impressed with the TMS and even more impressed that a total noob like me could make it work. The ability to turn on and off the individual modifications is really handy for testing.