Apply styles to only certain pages

PitaJ

Is there a way to only apply less or css styles to certain routes without including the route to the css in the template?

Thanks.

psychobunny

Without hacking things in (ex. adding/removing styles via JS) the answer is no. As you mentioned, we do include the route in the container div to help you style - ex. this page should have a <div class="topic"> container.

Is there a reason why you need this as opposed to using your own custom class as a container?

PitaJ

Yeah, I want to apply style to the body, html and #content tags, but I guess I'll just have to do that within the template

psychobunny

But only for one specific route?

You could listen for action:ajaxify.contentLoaded (this is after content is parsed but before it fades in) and if it matches your route then add a class to body. If it does not match, remove that class.

Then style:

body.myclass {
    style
    #content {
        style
    }
}

PitaJ

I'll just include those specific styles in the template, and the rest in
less

On Mon, Mar 2, 2015 at 8:57 PM, [email protected] wrote:

Hello pitaj,

psychobunny has posted a reply to: Apply styles to only certain pages:

But only for one specific route?

You could listen for action:ajaxify.contentLoaded (this is after content
is parsed but before it fades in) and if it matches your route then add a
class to body. If it does not match, remove that class.

Then style:

body.myclass {
style
#content {
style
}
}

Click here to read the full topic
http://mandrillapp.com/track/click/30149961/community.nodebb.org?p=eyJzIjoiSllQV01YMFhpc3ROMkJNWkk4Y3ZzZHR3UGJjIiwidiI6MSwicCI6IntcInVcIjozMDE0OTk2MSxcInZcIjoxLFwidXJsXCI6XCJodHRwczpcXFwvXFxcL2NvbW11bml0eS5ub2RlYmIub3JnXFxcL3RvcGljXFxcLzM5MzhcIixcImlkXCI6XCJiNjA2ZGNmMDVhZWI0ZGI2OGUyYmUzNjEyYTM3ZTVkZlwiLFwidXJsX2lkc1wiOltcIjJmMjIwM2IyNzg2NzRmOTVhMjU1ZWYxYWMyMmRkZDY4YWU1NWNjMzlcIl19In0

Thanks!
NodeBB

This post notification was sent to you due to your subscription settings. Click
here to alter those settings
http://mandrillapp.com/track/click/30149961/community.nodebb.org?p=eyJzIjoiUGpGaDBKdHlCZkZjdVVRSGFxNUZvaTNVT3Y0IiwidiI6MSwicCI6IntcInVcIjozMDE0OTk2MSxcInZcIjoxLFwidXJsXCI6XCJodHRwczpcXFwvXFxcL2NvbW11bml0eS5ub2RlYmIub3JnXFxcL3VzZXJcXFwvcGl0YWpcXFwvc2V0dGluZ3NcIixcImlkXCI6XCJiNjA2ZGNmMDVhZWI0ZGI2OGUyYmUzNjEyYTM3ZTVkZlwiLFwidXJsX2lkc1wiOltcIjNhN2E2MGUxYmRmNDZkNTIyZjA3YjM5ODlkOWI5NDE3YmY2YTA0ZWJcIl19In0.

julian

@pitaj said:

On Mon, Mar 2, 2015 at 8:57 PM, [email protected] wrote:

Man, I gotta update Mandrill to get rid of that cruft.

trevor

Would be nice to include the template name in the body with a unique template class name in the body.

<body class="nbb-templatename">

or something like that. That would do wonders.

julian

Whenever we navigate from page to page, <body> doesn't change, just everything inside #content, so I'm think that would only work on cold loads... is that what you're going for?

If so, you should look into adding it wherever you want as it is sent in via the API:

"template": {
  "name": "categories",
  "categories": true
}

So you can do both  and echoing it out somewhere if you want.

psychobunny

Yeah I like this idea, we should update body or #content (likely the latter) with the template route

PitaJ

@julian @psychobunny putting the template route on the html element would cover everything.

trevor

No, actually I wouldn't recommend adding it to the content as it requires a higher level for better customization such as body or even html so that you can totally customize it the way you want. For example, adding it to the #content would be a bit more work to customize because it contains padding and marginal properties to go around.

@julian Oh yeah, just noticed that. Good stuff.

@pitaj said putting the template route on the html element would cover everything.

+1 for html or body (since they usually contain 0 padding and margins).

Apply styles to only certain pages

Thanks! NodeBB

Thanks!
NodeBB