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

XF 1.3 Node based CSS styling

Discussion in 'Styling and Customization Questions' started by tonnyz, Dec 5, 2014.

  1. tonnyz

    tonnyz Member

    How should I write a conditional statement for styling some element based on the category (node) my browser's showing ?

    Let's say I want the breadcrumb color showing red color when it is in category A (/ its subordinate), but showing green when it is in category B (/its subordinate)

    thx :)
     
  2. Russ

    Russ Well-Known Member

    If you inspect the page source when browsing inside any node, pay attention to the body class, like currently on this page:

    Code:
    <body class="node47 node22 SelectQuotable">
    
    22 is the XenForo Community Support category, and 47 is Styling and Customization Questions(you can use both or just one, tons of possibilities).

    So you could simply add the selector to anything you wanted in extra.css:

    Code:
    .node47 .breadcrumb {
    background-color: #9f3535;
    }
    
    Screenshot_9.png
     
    tonnyz likes this.
  3. tonnyz

    tonnyz Member

    @Russ
    Thanks :D

    Another question,
    I just tried to combine the usage of #XenForoUniq (the one you guided me in my other thread) with the node class you told me in this thread for styling specific nav dropdown based on which node the users are currently viewing.

    This works perfectly except on the thread_view page for a moderator being logged in.

    Let's say if I set the color of #XenForoUniq3 navigation dropdown as red for all users viewing node3, it will work as expected except for a logged-in moderator viewing the thread_view inside node3.

    The culprit is the "thread tools" dropdown which snatches #XenForoUniq0 for itself. It causes the previously set #XenForoUniq3 navigation dropdown changes to a dropdown set as #XenForoUniq4 .

    Any help for this ? :)
     
  4. Russ

    Russ Well-Known Member

    Yeesh probably have to see it to test it, but this did work for me:

    Code:
    .node1 #XenForoUniq0 {
    background-color: #ff0000;
    }
    
    You technically can't use .thread_view there because the menu #XenForoUniq0 isn't inside the div class="thread_view, if that's what you're doing....
     
  5. tonnyz

    tonnyz Member

    The problem will only occur when you are viewing thread_view as an admin / other privileged user (since the "thread tools" dropdown will snatch the #XenUniq0 for itself)

    Have you tried viewing it inside the thread_view (viewing its thread content) as a logged-in admin ?


    Can I set the "thread tools" dropdown as the last sequence of #XenForoUniq (i.e. #XenForoUniq99 ) ? So, its existence can't affect my nav dropdown #XenForoUniq :D
     
  6. tonnyz

    tonnyz Member

    @Russ
    Just forget it, I've found a detour, hooray :LOL:
     

Share This Page