Determining the source of the css I want to change
Permalink
I want to change some CSS for the template I'm using, but I can't figure out how to determine which of all the many css files I need to edit.
I've tried Firefox's developer tools which indicates what attributes are in affect, but doesn't tell me what particular css file defines those attributes. I tried Safari's Develop > Web Inspector. It does indicate the files holding the css, but it's showing different attributes on my Divs than Firefox is showing.
I have Dreamweaver CS5 & have download many of the files so I can edit them locally, but since I don't php on my Mac, Dreamweaver can't tell me the source of the css attributes, as far as I can tell. Maybe there is some way to do that--let me know if you edit locally in Dreamweaver.
What do you do to change the css on your templates?
I've tried Firefox's developer tools which indicates what attributes are in affect, but doesn't tell me what particular css file defines those attributes. I tried Safari's Develop > Web Inspector. It does indicate the files holding the css, but it's showing different attributes on my Divs than Firefox is showing.
I have Dreamweaver CS5 & have download many of the files so I can edit them locally, but since I don't php on my Mac, Dreamweaver can't tell me the source of the css attributes, as far as I can tell. Maybe there is some way to do that--let me know if you edit locally in Dreamweaver.
What do you do to change the css on your templates?
depends on the theme- if its core it'll be at root/concrete/themes/default/main.css if its an mp theme it'll be at root/packages/theme_name_/themes/theme_name/style.css (or another css file at this location)
Firebug (free firefox addon) *will* show you the css file that a style is in. Do "inspect element" on the thing in the page, and over to the right it will show all styles that apply to what you clicked on. It also shows the file name. You can click on the file name to see the actual code, or you can hover the mouse over the file name to see the full path to it.
See attached screenshot.
See attached screenshot.
Wow this is excellent!
While Firebug is my go to, I also like the extension for Chrome, CSSViewer, where you hover the mouse on the page, it display a nicely formatted box of the class and all its attributes. It's good for those times you just want to check a few things quickly.
- Josh
- Josh
