SOLVED Custom style overrides for different presets
-
-
- Charles Hewitt
- Newbie
- Posts: 7
- Thanks: 0
-
I have created some presets (for the Paradigm template) and I have added some custom style overrides to rt_paradigm/css/rt_paradigm-custom.css to accomodate some more specific changes to the header-overlay feature in the menu.
However, I would like different override styles to be used from rt_paradigm/css/rt_paradigm-custom.css according to the preset being used. Is it possible to either adopt a different x-custom.css for different presets or to include a preset-specific custom.css override file? Or is there a better approach? - Last Edit: 9 years 7 months ago by Charles Hewitt.
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
Charles Hewitt wrote:
I have created some presets (for the Paradigm template) and I have added some custom style overrides to rt_paradigm/css/rt_paradigm-custom.css to accomodate some more specific changes to the header-overlay feature in the menu.
However, I would like different override styles to be used from rt_paradigm/css/rt_paradigm-custom.css according to the preset being used. Is it possible to either adopt a different x-custom.css for different presets or to include a preset-specific custom.css override file? Or is there a better approach?
I assuming here your preset-specific custom.css override file would be linked to a specific menu page. In which case your could use a page class suffix to create your preset-specific custom.css override file.
Using Chrome Developer Tools to inspect the <body> tag for our Paradigm template you'll see this code:
<body class="logo-type-paradigm header-overlay-dark header-type-preset1 scrolling-fixed-header-enable scrolling-overlay-light utility-overlay-dark feature-overlay-light feature-type-preset1 maintop-overlay-light main-body-overlay-light mainbottom-overlay-light extension-overlay-light extension-type-paradigm footer-overlay-dark font-family-paradigm font-size-is-default menu-type-dropdownmenu layout-mode-responsive col12 option-com-content menu-home -dec13-home" cz-shortcut-listen="true">
Usually in our templates you'll always see something like "something-something-preset1".
So you would use the one rt_paradigm-custom.css but would use page class suffixes to differentiate what code gets called when a certain preset is used.
So:
.header-type-presetab #rt-header {background-color: #FFFFFF;}.header-type-presetac #rt-header {background-color: #FF0000;}.header-type-presetad #rt-header {background-color: #0000FF;}
-
-
-
- Kristen Mac
- Sr. Rocketeer
- Posts: 154
- Thanks: 4
-
How would I apply this to the body? I would like to have a different background image depending on the page of the site? Do I create the class in the menu item page class field?
When I have applied it to body .myclass name it ends up in the content of the article not the whole body background. - Last Edit: 9 years 6 months ago by Kristen Mac.
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
Kristen Mac wrote:
How would I apply this to the body?
<body class="logo-type-paradigm header-overlay-dark header-type-preset1 scrolling-fixed-header-enable scrolling-overlay-light utility-overlay-dark feature-overlay-light feature-type-preset1 maintop-overlay-light main-body-overlay-light mainbottom-overlay-light extension-overlay-light extension-type-paradigm footer-overlay-dark font-family-paradigm font-size-is-default menu-type-dropdownmenu layout-mode-responsive col12 option-com-content menu-home -dec13-home" cz-shortcut-listen="true">
In this statement the body element as well as all the listed classes are equal in selecting the body of the page.
I would think you would be familiar with this statement:
body {color: #000000;}
Here I've assigned the colour black globally on all the text on the page.
I could have said:
.header-overlay-dark {color: #000000;}
OR
.feature-type-preset1 {color: #000000;}
and so on. All these classes because they were defined as describing the body tag have equal wieght in affecting the page just as the body selector does.
This statement is crucial "menu-home". This is a page class suffix generated by Gantry for the Home page. Gantry injects a page class suffix using the "menu-" prepend and combines with the menu item alias to produce a page class suffix for every page on your site.
You would then use these page class suffix's to prepend your code to use a different background image for your pages.
.menu-home {background-image: url(/images/backgrounds/home-page-image.jpg);}
-
-
-
- Kristen Mac
- Sr. Rocketeer
- Posts: 154
- Thanks: 4
- Finally got it to work, I didn't realise I had to go into the gantry template controls and enable the suffix there.
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
Kristen Mac wrote:
Finally got it to work, I didn't realise I had to go into the gantry template controls and enable the suffix there.
The other way would be going into the menu item editor screen and enabling the page class suffix. However I'm LAZY so I just let Gantry do the work for me
- Last Edit: 9 years 6 months ago by DanG. Reason: Marking this TOPIC as Solved
-
Time to create page: 0.049 seconds