XF 2.2 How to edit specific threads without changing the elements for other threads.

[oO5 Dynasty]

So on my site, I wanted to change the color, etc for the Category page Thread_view, etc. So let's say I wanted a Fortnite section, styled differently from the gears of war section.
I'm using extra.less, but do know how to specifically target one node section to another.

/* Style all category_view elements  */

[data-template="category_view"] [data-container-key="node-5"]{
    .p-nav {
        color: #e4eaee;
        background: #44454700;
    }
}

[data-template="category_view"] [data-container-key="node-5"]{
.p-header-logo.p-header-logo--image img {
    vertical-align: bottom;
    max-width: 100%;
    max-height: 200px;
    display: none;
    }
}


[data-template="category_view"] [data-container-key="node-5"]{
.p-sectionLinks {
    font-size: 13px;
    color: #595a5c00;
    background: #ffffff00; "node-5"
    border-bottom: 1px solid #cbcbcb;
}
}
   


[data-template="category_view"] [data-container-key="node-5"]{
.blockMessage {
    margin-bottom: 20px;
    padding: 6px 10px;
    color: #141414;
    background: #fefefe00;
    border-width: 1px;
    border-style: solid;
    border-top-color: #dfdfdf00;
    border-right-color: #d8d8d800;
    border-bottom-color: #cbcbcb00;
    border-left-color: #d8d8d800;
    border-radius: 4px;
    }
}

[data-template="category_view"]  [data-container-key="node-5"]{
.p-sectionLinks {
    font-size: 13px;
    color: #595a5c00;
    background: #f5f5f500;
    border-bottom: 1px solid #cbcbcb00;
    }
}

This changes the color site-wide, but I want the color changes to affect a specific node section.

[data-template="category_view"]

Now when I go make another category, I want to style it diff from this.

 

[Old Nick]

Maybe like this

[data-template="category_view"] {
    [data-container-key="node-5"] {
        .p-nav {
            color: #e4eaee;
            background: #44454700;
        }
    }
}

 

[oO5 Dynasty]

Maybe like this

[data-template="category_view"] {
    [data-container-key="node-5"] {
        .p-nav {
            color: #e4eaee;
            background: #44454700;
        }
    }
}

I'm a try it and thank you for trying to help. I really appreciate it.

 

[Paul B]

This is the correct syntax when using multiple data types:

[data-template="category_view"][data-container-key="node-5"]
{
    .p-nav
    {
        color: #e4eaee;
        background: #44454700;
    }
}

 

[Old Nick]

This is how he wrote his code which didn't seem to work.

 

[Paul B]

Then both conditions are not being met.

For a specific node it's just [data-container-key="node-2"] - there shouldn't be any need to further refine that.

Note that category headers on the index and other pages are not nodes in those views - you would just target them using e.g. block--category1 .

 

[oO5 Dynasty]

This is the correct syntax when using multiple data types:

[data-template="category_view"][data-container-key="node-5"]
{
    .p-nav
    {
        color: #e4eaee;
        background: #44454700;
    }
}

Thank you sooo much for your help. You always come thru man!

 

[oO5 Dynasty]

This is how he wrote his code which didn't seem to work.

Thank you again for taking the time to help. I am grateful for the community support.....

 

[Paul B]

This is how he wrote his code which didn't seem to work.

It looks like there were gaps in the syntax - I haven't tested but I suspect that may have been the problem.