XF 1.4 Page node styling

grantus · Feb 26, 2015

I've been trying to style certain nodes with different background colors, for example.

So let's say I have node 146 and I want to give it a background of #ccc, I have this:

li.node.page.level_2.node_146 {background: #ccc;}

But nothing happens. When I add that rule in my browser's element inspector, it works.

Also, I've done the same thing with certain node category backgrounds, but for the the node backgrounds themselves, I'm stuck.

Any suggestions?

Amaury · Feb 26, 2015

Have a look at this resource from @Brogan: https://xenforo.com/community/resources/conditional-statements.1604/

If you're trying to do it with CSS, though, CSS doesn't support conditionals.

grantus · Feb 26, 2015

Conditionals are good but for this it should be purely a CSS fix. As I mentioned, I did it for the node categories but the nodes aren't playing nice for some reason.

Amaury · Feb 26, 2015

Did a quick search. See if any of this helps: https://xenforo.com/community/threads/node-based-css-styling.88450/

grantus · Feb 26, 2015

Good link. I tried it but so far nothing. That seems like the most logical though.

My node from the <body> is node17.
The node part I want to style is <li class="node page level_2 node_146">

What would you suggest I try in the CSS? I tried a few variations like:
.node17 .node .page .level_2 .node_146
.node17 li.node_146
etc

Optic · Mar 1, 2015

@Shelley did a guide for this, took me awhile to dig it out:

https://xenforo.com/community/resources/multi-coloured-node-li.1733/

grantus · Mar 2, 2015

Actually, for some reason it works now, I have no idea why.

I used this:

li.node.page.level_2.node_146 {background: #ccc;}

And it works.

Thanks anyway.

XF 1.4 Page node styling

grantus

Active member

Amaury

Well-known member

grantus

Active member

Amaury

Well-known member

grantus

Active member

Optic

Well-known member

grantus

Active member

Similar threads

We value your privacy