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

CSS classes loading into wrong order

Discussion in 'XenForo Development Discussions' started by Floren, May 12, 2014.

  1. Floren

    Floren Well-Known Member

    Hi guys,

    I need to know how css.php is loading the classes, based on which order? Name, id, etc.
    I have a strange issue with 2 pages loading the CSS totally different, yet the CSS is identical.

    Bad CSS order on https://www.axivo.com/articles/welcome-to-axivo.1/

    css-bad.jpg

    Good CSS order on https://www.axivo.com/packages/elasticsearch.41/

    css-good.jpg

    I'm wondering if you know what causes css.php to load the classes into wrong order. This makes certain elements on the page to be shifted/padded into wrong order:

    like-padding.jpg

    The goal is not to modify the CSS which is proper, but rather fix the root cause. I'm not troubleshooting the Responsive design, just the regular CSS. Thank you for your help.
     
    Last edited: May 12, 2014
  2. Chris D

    Chris D XenForo Developer Staff Member

    What is the exact code in the templates that call the CSS?

    It looks to me on one page it could be:
    Code:
    <xen:require css="article_whatever.css" />
    <xen:require css="message_simple.css" />
    And the other:

    Code:
    <xen:require css="message_simple.css" />
    <xen:require css="package_whatever.css" />
    And that is my understanding of the order in which it should load the CSS. It should do it based on the order in which it is required in the template. Which seems logical.


    Aside from that, yes, as much as your CSS is valid, you might want to introduce some specificity to the selectors to ensure the CSS is overriding correctly, e.g.

    Code:
    .messageSimple.articleUpdate
    {
       
    }
     
    Last edited: May 12, 2014
  3. Floren

    Floren Well-Known Member

    Template article_update (bad):
    Code:
    <xen:require css="message_simple.css" />
    <xen:require css="bb_code.css" />
    <xen:require css="article_view_header.css" />
    <xen:require css="article_update.css" />
    
    <li class="primaryContent messageSimple articleUpdate" id="update-{$update.article_update_id}" data-author="{$article.username}">
    
        <xen:if is="{$update.title} AND !{$update.isDescriptionUpdate} AND !{$hideUpdateTitle}">
    ...
    Template package_update (good):
    Code:
    <xen:require css="message_simple.css" />
    <xen:require css="bb_code.css" />
    <xen:require css="package_view_header.css" />
    <xen:require css="package_update.css" />
    
    <li class="primaryContent messageSimple packageUpdate" id="update-{$update.package_update_id}" data-author="{$package.username}">
    
        <xen:if is="{$update.title} AND !{$update.isDescriptionUpdate} AND !{$hideUpdateTitle}">
    ...
    Ya, I thought of that and already fixed everything before implementing the solution. Packages and resources display the CSS code properly, only articles does not. Yet the code is identical on all 3 cases, see below 3 links with identical HTML code.

    https://www.axivo.com/articles/new-openssl-vulnerability-discovered.15/ Bad
    https://www.axivo.com/packages/elasticsearch.41/ Good
    https://www.axivo.com/resources/elasticsearch-setup.11/ Good
     
    Last edited: May 12, 2014
  4. Floren

    Floren Well-Known Member

    XenForo_CssOutput is loading the CSS ordered by name.

    Good order:
    Bad order:
    I'm wondering if there is a way to solve this issue programmatically. Actually, I'm not even sure that is related...
     
    Last edited: May 13, 2014
  5. Chris D

    Chris D XenForo Developer Staff Member

    The best way to solve it is to improve the CSS selectors used.

    Regardless of this issue there will be countless times where existing CSS needs to be overridden and the only way to do that is to make your selectors more specific than the ones used by default.
     
  6. Floren

    Floren Well-Known Member

    @Chris D, for now I fixed the issue adding !important on 2 lines of CSS. Still, I would like to know what causes all this. I posted a new thread into Bugs forums... even if I don't really see it as bug. Hopefully @Mike will shed some light how CSS is processed.
     
  7. Chris D

    Chris D XenForo Developer Staff Member

    !important isn't a good way either. But glad you have something that works.

    I think your earlier conclusion may be correct and it is alphabetical. This is probably just the order by which it is selected from the database.

    It would be an interesting exercise to see if renaming your article CSS to something like zarticle solves the problem also.
     
    Steve F likes this.
  8. Floren

    Floren Well-Known Member

    @Chris D, I actually figured an easier fix. resources/articles_update.css template does not have any parent defined classes, that is the problem... so things get tangled. As soon I replaced the first line only with .messageSimple.articleUpdate (instead of .articleUpdate) things got redressed. Using '!important won't help in that specific case because the actual code is a xen:property which will change the CSS behaviour everywhere:
    Code:
        .articleUpdate .likesSummary
        {
            {xen:property messageLikesSummary}
        }
    
        .resourceUpdate .likesSummary
        {
            {xen:property messageLikesSummary}
        }
    Everything is properly displayed now:
    https://www.axivo.com/articles/new-openssl-vulnerability-discovered.15/
     
    Last edited: May 13, 2014
  9. Chris D

    Chris D XenForo Developer Staff Member

    That's the kind of thing I've said to do in two posts now, and should be the first thing you do before using !important anyway.
     
  10. Floren

    Floren Well-Known Member

    Ya, I think this should be done be default in XenForo to avoid confusion... I still think this is a temporary fix and the order of templates does something weird... or else why things would work fine on resources and packages?
     

Share This Page