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

Understanding EXTRA.CSS

Discussion in 'Styling and Customization Questions' started by Neil E., Jul 4, 2012.

  1. Neil E.

    Neil E. Active Member

    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?
     
    Stephen Fifty likes this.
  2. Lisa

    Lisa Well-Known Member

    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 ;)
     
    Stephen Fifty likes this.
  3. Steve F

    Steve F Well-Known Member

    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.
     
  4. Shelley

    Shelley Well-Known Member

    Extra.css is good for putting your css in and I suggest in don't be shy in using, taking advantage of it as you can make some significant changes in there.

    All the changes is all done through css in the screenshot below so it shows you a quick example what can be done.

    powered-by-extracss.png

    powered-by-extracss1.png

    powered-by-extracss2.png
     
  5. Neil E.

    Neil E. Active Member

    @ 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.
     
    Stephen Fifty likes this.
  6. Steve F

    Steve F Well-Known Member

    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.
     
    Stephen Fifty and Shelley like this.
  7. Shelley

    Shelley Well-Known Member

    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.
     
  8. Lisa

    Lisa Well-Known Member

    This is what puts me off it too.
     
  9. Shelley

    Shelley Well-Known Member

    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.
     
    Lisa likes this.
  10. Steve F

    Steve F Well-Known Member

    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 likes this.
  11. Shelley

    Shelley Well-Known Member

    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?
     
  12. Luxus

    Luxus Well-Known Member

    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
     
    Lisa likes this.
  13. Lisa

    Lisa Well-Known Member

    Thanks for that, Luxus. I'll definitely be giving that a look today, I think.
     
  14. Neil E.

    Neil E. Active Member

    This is a very good point. I was surprised to see that comments I placed in EXTRA.CSS (for my own reminder) were viewable.
     
  15. Neil E.

    Neil E. Active Member

    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?
     
    Stephen Fifty likes this.
  16. Luxus

    Luxus Well-Known Member

    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.
     
    Stephen Fifty likes this.
  17. Neil E.

    Neil E. Active Member

    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.
     
    Stephen Fifty likes this.

Share This Page