XF 2.0 How to change specific attributes on different pages separately?

[chaot3ch]

I am trying to change the .p-body-content on specific pages. I though I would use something like

.node--forum .p-body-content {changes}

or

.node--idx .p-body-content {changes}

However neither of those work. Is there something I'm missing or is there another way to edit these things?

 

[chaot3ch]

I figured out how to do this with a id tag in the html on the specific pages then calling it in the extra.less, however is there anyway to do this without adding anything to the page html? I see in 1.5 it was listed typically as .node_123 but that doesn't appear to work in xenforo 2.0.

 

[S Thomas]

You could do some dirty stuff with JS and add that to the global js, like

if (window.location.href.search(/pages\/1\//) > -1) {
    // page with url 1
    // change css : https://www.w3schools.com/js/js_htmldom_css.asp
} else if (window.location.href.search(/pages\/2\//) > -1) {
   // (etc.)
}

But what is the actual reason for you not to edit page html?

Edit: A cleaner way would be to edit page_view and add

<xf:css>
    <xf:if is="$page.Node.node_name == 'a'">
            .block-container {color: yellow}
    <xf:elseif is="$page.Node.node_name == 'b'" />
            .block-container {color: red}
    </xf:if>
</xf:css>

where a and b are the route parts of the page.

 

[chaot3ch]

You could do some dirty stuff with JS and add that to the global js, like

if (window.location.href.search(/pages\/1\//) > -1) {
    // page with url 1
    // change css : https://www.w3schools.com/js/js_htmldom_css.asp
} else if (window.location.href.search(/pages\/2\//) > -1) {
   // (etc.)
}

But what is the actual reason for you not to edit page html?

Edit: A cleaner way would be to edit page_view and add

<xf:css>
    <xf:if is="$page.Node.node_name == 'a'">
            .block-container {color: yellow}
    <xf:elseif is="$page.Node.node_name == 'b'" />
            .block-container {color: red}
    </xf:if>
</xf:css>

where a and b are the route parts of the page.

Those are both good options. Mostly I was looking for when I want to edit specific forum nodes that don't have their own html pages.

 

[Russ]

I figured out how to do this with a id tag in the html on the specific pages then calling it in the extra.less, however is there anyway to do this without adding anything to the page html? I see in 1.5 it was listed typically as .node_123 but that doesn't appear to work in xenforo 2.0.

Just use the data-attribute built into the html tag already:

[data-container-key="node-28"] .title { color: red; }

Or.. for all pages:

[data-template="page_view"] .title { color: red; }

 

[chaot3ch]

Just use the data-attribute built into the html tag already:

[data-container-key="node-28"] .title { color: red; }

Or.. for all pages:

[data-template="page_view"] .title { color: red; }

I think this is exactly what I'm looking for. I have one more question and I apologize in advance, since this is something I should probably already know. I have my data container for the page I would like to change.

data-container-key="node-4"

So if I wanted to change the background of the .p-body on this page to red how would it be properly formatted? Would it just be this inserted into the extra.less template ?:

[data-container-key="node-4"] .p-body{ background: red; }

I feel that this isin't right but having not done any design with html5 and CSS in quite some time I'm not sure what the correct syntax would be.

 

[Russ]

I think this is exactly what I'm looking for. I have one more question and I apologize in advance, since this is something I should probably already know. I have my data container for the page I would like to change.

data-container-key="node-4"

So if I wanted to change the background of the .p-body on this page to red how would it be properly formatted? Would it just be this inserted into the extra.less template ?:

[data-container-key="node-4"] .p-body{ background: red; }

I feel that this isin't right but having not done any design with html5 and CSS in quite some time I'm not sure what the correct syntax would be.

Yep that should work just fine give it a go.

 

[chaot3ch]

Yep that should work just fine give it a go.

Thank you so much! I knew there had to be something like this in there I just couldn't find it.