XF 1.3 Node based CSS styling

tonnyz · Dec 5, 2014

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

Russ · Dec 9, 2014

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;
}

tonnyz · Dec 10, 2014

@Russ
Thanks

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 ?

Russ · Dec 10, 2014

tonnyz said:
@Russ
Thanks

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 ?

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

tonnyz · Dec 10, 2014

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

Code:

.node1 #XenForoUniq0 { background-color: #ff0000; }

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 ?

Russ said:
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....

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

tonnyz · Dec 10, 2014

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

XF 1.3 Node based CSS styling

tonnyz

Member

Russ

Well-known member

tonnyz

Member

Russ

Well-known member

tonnyz

Member

tonnyz

Member

Similar threads

We value your privacy