madpugger Posted October 13, 2020 Share Posted October 13, 2020 Hi, I've had a look around and can't seem to find the answer I'm looking for. I wish to modify the CSS of default themed PS 1.7 so that all CMS pages that we create look the same - but slightly different to the default (change colours, default picture size, UL styles etc). I have tried to just add <style> tags in the CMS HTML editor but that is stripped when saved. Can someone tell me either how to use style tags in CMS HTML editor (not inline, but included), or where I need to override the default CSS for only CMS pages. Ideally I suppose we'd like to perhaps wrap the CMS content in a div with an ID or Class so we could only change the CMS pages we add and not the default "deliver" "about us" ones. Is this possible? Thanks in advance. Link to comment Share on other sites More sharing options...
JBW Posted October 13, 2020 Share Posted October 13, 2020 Put you CSS in file /theme/*yourthemename*/assets/css/custom.css - CMS pages have an #cms ID and and an cms-id class in body which you can use to distinguish the pages Link to comment Share on other sites More sharing options...
madpugger Posted October 13, 2020 Author Share Posted October 13, 2020 OK perfect thanks! So I would do something like: .cms-id p { styles } .cms-id h1 { styles } .cms-id div { styles } What would the benefit of ID vs Class be? Is the ID for the section where the CMS text is entered, and the Class for the entire page? Link to comment Share on other sites More sharing options...
Daaaaad Posted October 13, 2020 Share Posted October 13, 2020 (edited) Hello @madpugger, Both #cms and .cms-id-{id} are present on the <body> tag : <body id="cms" class="lang-en country-fr currency-eur layout-full-width page-cms tax-display-enabled cms-id-4"> So if you wan to target a specific CMS page you have to use .cms-id-{id} (replace "{id}" by the id of the CMS page). If you want to target all CMS pages just use #cms in you CSS file 😉 Edited October 13, 2020 by Daaaaad (see edit history) Link to comment Share on other sites More sharing options...
madpugger Posted October 13, 2020 Author Share Posted October 13, 2020 Thanks, I also just noted that... However, when I make changes to the CSS file, nothing happens, do I need to do anything else? This is my CSS: #cms p { color: red; font-size: 30px; } .ExclusivesDiv h1 {color: red; font-size: 40px; } It is just a simple CSS for now to test the changes. The HTML is wrapped in a Div with class name "ExclusivesDiv" as a test. Thanks Link to comment Share on other sites More sharing options...
Daaaaad Posted October 13, 2020 Share Posted October 13, 2020 Maybe clear the cache in "Advanced Parameters > Performance"? Use the "Clear cache" button on the top right corner 😉 Link to comment Share on other sites More sharing options...
JBW Posted October 13, 2020 Share Posted October 13, 2020 And clear your browser cache or reload the page with CTRL-F5 1 Link to comment Share on other sites More sharing options...
madpugger Posted October 13, 2020 Author Share Posted October 13, 2020 Excellent thanks guys. That now works Clearing browser cache made no odds. Each time I make changed to the custom.css I have to clear cache on the Advanced/Performance page before it takes effect (so others trying to do the same know). Thanks again Link to comment Share on other sites More sharing options...
JBW Posted October 13, 2020 Share Posted October 13, 2020 5 minutes ago, madpugger said: Each time I make changed to the custom.css I have to clear cache on the Advanced/Performance page before it takes effect (so others trying to do the same know). You can deactive CSS compression on same page to avoid this (during development) - then you will need to use CTRL-F5 to avoid browser caching Link to comment Share on other sites More sharing options...
madpugger Posted October 13, 2020 Author Share Posted October 13, 2020 (edited) 6 minutes ago, JBW said: You can deactive CSS compression on same page to avoid this (during development) - then you will need to use CTRL-F5 to avoid browser caching Works a charm! Thanks (Command R on Mac - didn't have to clear browser cache). EDIT: Tell a lie - I did just have to clear browser cache). Edited October 13, 2020 by madpugger Clear browser cache needed. (see edit history) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now