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

chaot3ch

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

CSS:
.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?
 
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.
 
You could do some dirty stuff with JS and add that to the global js, like
JavaScript:
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
HTML:
<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.
 
Last edited:
You could do some dirty stuff with JS and add that to the global js, like
JavaScript:
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
HTML:
<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.
 
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:

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

Or.. for all pages:

Code:
[data-template="page_view"] .title { color: red; }
 
Just use the data-attribute built into the html tag already:

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

Or.. for all pages:

Code:
[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.

HTML:
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 ?:
CSS:
[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.
 
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.

HTML:
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 ?:
CSS:
[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.
 
Top Bottom