What would be the best way to override css depending on the page path?

D

display: block2015-12-08 17:07:41

css

display: block, 2015-12-08 17:07:41

I'm making a site on modx. The task is to make an individual background for each section of the site. Now it's done like this

$(document).ready(function(){
   if(document.location.pathname.indexOf("/razdel/") == 0){
       $('.main-content').css("background", "url('/img/razdel_bg.jpg')");
    }
});

In this case, you can use .addClass instead of the .css function . Are there ways that can accomplish this task better?

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

R

Ruslan, 2015-12-09
@qork

Yes, the easiest option is to use variables in the template, as Maxim Zaitsev advised you.
You can also do it through MODX modifiers, which will check the page id and include the desired style, for example, include the <head>construction after the main style:
and in esle it is still possible to place a modifier.
Another option is to connect the <head>structure after the main style:
, i.e. MODX will generate a link to a css file named page_(current page resource id), and create css files for the pages you need, for example, page_12.css, page_23.css, etc.

D

Dmitry Kovalsky, 2015-12-08
@dmitryKovalskiy

If you don't know the nesting level of the page path - follow from the site root to the css folder. Everything is generally simple.