Fixed Identifying a page

Dynamic · Sep 15, 2017

Hi,

I want to add some style properties to a single page and I can't figure out how to do it on v2. In v1 I was able to do something like

.node10 .title { color: #fff; }

However there is no node identification that I can see. Basically for pages I need to add a 250px left-margin to the title, but only on certain pages.

Any help is appreciated.

Thanks.

Chris D · Sep 15, 2017

Not a bug per se but also not necessarily a deliberate omission. I'll move this to bugs to see if it's something we want to add back.

In the meantime, what you could do is create a deselectable style as a child to your main style, implement your changes, and then set the necessary forums to "Override user style choice" to that style.

Dynamic · Sep 15, 2017

Chris D said:
Not a bug per se but also not necessarily a deliberate omission. I'll move this to bugs to see if it's something we want to add back.

In the meantime, what you could do is create a deselectable style as a child to your main style, implement your changes, and then set the necessary forums to "Override user style choice" to that style.

Hi Chris,

Thanks for the reply.

That is less than ideal as far as multiple styles goes. I am trying to wrap my head around LESS at the moment. I am wondering if it is possible to create a conditional within it? So, in my pages, assuming there is a sidenav ( .p-body-sideNav ), IF it is showing THEN add a 250px margin-left to .p-title

Is something like that possible?

Thanks.

Kier · Sep 15, 2017

I've added data-container-key and data-content-key to the <HTML> tag for beta 3 - in your case, you could apply your styling like this:

CSS:

html[data-container-key="node10"] .title
{
    color: #fff;
}

Chris D · Sep 15, 2017

Dynamic said:
I am wondering if it is possible to create a conditional within it? So, in my pages, assuming there is a sidenav ( .p-body-sideNav ), IF it is showing THEN add a 250px margin-left to .p-title

Probably worth asking in a new thread if there are still questions after this, but to answer the question directly (as it's sort of a separate thing to the page level context)...

We indicate on the main body element if there is a side nav or not:

CSS:

.p-body-main.p-body-main--withSideNav .p-title
{
    margin-left: 250px;
}

So, that should do it. You would however need to compensate for that when the side nav is no longer showing ("responsiveWide" and below).

Dynamic · Sep 15, 2017

Kier said:
I've added data-container-key and data-content-key to the <HTML> tag for beta 3 - in your case, you could apply your styling like this:

CSS:

html[data-container-key="node10"] .title { color: #fff; }

Awesome! Thank you very much Kier.

Chris D said:
Probably worth asking in a new thread if there are still questions after this, but to answer the question directly (as it's sort of a separate thing to the page level context)...

We indicate on the main body element if there is a side nav or not:

CSS:

.p-body-main.p-body-main--withSideNav .p-title { margin-left: 250px; }

So, that should do it. You would however need to compensate for that when the side nav is no longer showing ("responsiveWide" and below).

Thanks very much Chris! I will try that and see how it goes. Thanks again for the help mate.

EDIT: I tried playing around with it, but it seems that because the .p-title div isn't nested within the --withSideNav div it fails to recognise the css. It was worth a shot though.

Fixed Identifying a page

Dynamic

Well-known member

Chris D

XenForo developer

Dynamic

Well-known member

Kier

XenForo developer

Chris D

XenForo developer

Dynamic

Well-known member

Similar threads

We value your privacy