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

oO5 Dynasty

Well-known member
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.

Code:
/* 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"]
1639510051433.webp

Now when I go make another category, I want to style it diff from this.
 
Last edited:
Solution
This is the correct syntax when using multiple data types:
Less:
[data-template="category_view"][data-container-key="node-5"]
{
    .p-nav
    {
        color: #e4eaee;
        background: #44454700;
    }
}
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 .
 
Back
Top Bottom