mheld45 Posted July 12, 2017 Share Posted July 12, 2017 Hello. I'm new to Prestashop but I know the basics of CSS. I have tried numerous times to make changes to the global.css and other css files within my theme (organic) but nothing ever seems to work. There are numerous css files within the theme, so just finding the right file is a chore. I want to do basic stuff, like change the height of the header, width of the website (container?), etc. Is there some kind of Jedi mind trick that is required to make CSS changes in Prestashop themes? Thank you. Link to comment Share on other sites More sharing options...
fibo Posted July 12, 2017 Share Posted July 12, 2017 Hi! To find which CSS file contain a certain rule and to do a lot of other operations I advice you to install the firefox extension "Web Developer" by chrispederick. If you can't see immediately the changes made to CSS file be sure to have the cache disable.You can follow the instructions that you can find in this page:https://www.templatemonster.com/help/prestashop-1-6-x-how-to-clear-smarty-cache.html Hope it help you 1 Link to comment Share on other sites More sharing options...
mheld45 Posted July 12, 2017 Author Share Posted July 12, 2017 Thank you. The extension is useful. Link to comment Share on other sites More sharing options...
mheld45 Posted July 12, 2017 Author Share Posted July 12, 2017 Hi again. I installed the Web Developer extension. So how exactly do I determine which file contains the CSS rules? Thanks Link to comment Share on other sites More sharing options...
fibo Posted July 13, 2017 Share Posted July 13, 2017 Hi! After installation of the extention you should see a bar.Click on CSS and after on Display Style Information. After doing so if you go around the page with your pointer you see that each element of the DOM will be outlined in red. Click on the element that you want to know the rules associated with, and in the bottom of the page will appear a tab with the path of the CSS files and all the rule within each file. In the image of the example I search for the rule associated to the H1 element Link to comment Share on other sites More sharing options...
fibo Posted July 13, 2017 Share Posted July 13, 2017 So, for example at the line number 7 of the home.css, you find how it is style the <a> element inside the H1 Link to comment Share on other sites More sharing options...
mheld45 Posted July 14, 2017 Author Share Posted July 14, 2017 Thank you again. I tried that. The red boxes appear but the bottom tab displays only "Select an element to display the styles applied to it". Below the developer bar I see the html structure, but nothing at the bottom. No worries. I'll fool around with it some more. Matt Maybe I need to update Firefox. Link to comment Share on other sites More sharing options...
mheld45 Posted July 14, 2017 Author Share Posted July 14, 2017 Updated Firefox to 54 and now it works. Thank you! Link to comment Share on other sites More sharing options...
mheld45 Posted July 14, 2017 Author Share Posted July 14, 2017 Using your advice I successfully changed the height of the slider! Woo hoo. Thank you! Link to comment Share on other sites More sharing options...
fibo Posted July 14, 2017 Share Posted July 14, 2017 Pleased to have been helpful Good job! Link to comment Share on other sites More sharing options...
fibo Posted July 14, 2017 Share Posted July 14, 2017 Please don't forget to mark as "Resolved" this topic 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