XF 2.0 Array In extra Css

[Davey-UK]

Ignore the question, i found the answer by playing with the code. Hopefully this is correct.

[data-container-key="node-13"], & [data-container-key="node-11"]

Just a quickie regarding the extra.css file.

If using [data-container-key="node-13"] in extra.css, how can this be made to multiple nodes, or in fact can it be. I have tried 13,14,15, but with no joy.
I know it can be done by setting it individually, but i am trying to avoid bloating the file.
Does it actually cause speed/load problems if things like this are added singularly in extra.css?
Regards
Dave

 

[Russ]

Just as a heads up the & wouldn't be required assuming your CSS is something like this:

[data-container-key="node-13"], [data-container-key="node-11"]
{
.button { color: red; }
}

Would output like this:
[data-container-key="node-13"] .button { color: red; }
[data-container-key="node-11"] .button { color: red; }


You could put anything in place of the .button { color: red; } to load unique CSS to all that stuff.

Also speaking of arrays, in case someone else finds this topic. Some additional cool LESS this would easily customize node colors. 1/6/12/16 are category ID's

.node-colors("1", limegreen);
.node-colors("6", red);
.node-colors("12", crimson);
.node-colors("16", orange);

.node-colors(@class, @color)
{
    @className: ~"@{class}";
    .block--category@{className}
    {
        color: @color;
        .block-header
        {
            background: @color;
        }
        .node--unread .node-icon i:before, .node-title a, .node-extra a
        {
            color: @color;
        }
    }
}

This loops the CSS for each value you setup at the top.

 

[Harvey]

$xf.reply.containerKey == 'node-4'

How would you modify this to target node 4 and node 5?

 

[Harvey]

This actually works but seems hacky if you want to add 10 forums:

$xf.reply.containerKey == 'node-4'  $xf.reply.containerKey == 'node-5'

Also is there a way to say all forums except home page? (It's for a sidebar ad.)

 

[Harvey]

$xf.reply.containerKey == 'node-4'  $xf.reply.containerKey == 'node-5'

I thought that worked but really it added the widget to every forum. Not sure why.