The Quickest and Easiest way to work out what does what on the CSS style sheet

[afo]

Do you have the FireFox browser? It should add itself on once you request it.

[janissaire]

Yes, I have it - was able to load the developer - now I have a lot of buttons - I press the css button and see the code that I see in dreamweaver.

Am I missing something?

[janissaire]

OK Got It

For anyone who is having trouble with this:

In Firefox, once you install the developer module - you will see a bunch of buttons.

One of these says CSS with a drop down menu on the right.

Click the arrow and enable(click) view style information.

When you do the screen should split into two horizontal planes.

If you move you mouse over your page you will see a red box - clicking it will change the CSS code in the bottom half identifying what code you need to change.

[schoolboy]

On the Web developer toolbar, there's a tab called "Information".

Call up a page on your site, then click this Information Tab, then click "Display ID and Class Details"...

Each element's style ID/Class will be rendered, showing you what is governing the elements' styles... Take note of the style ID/Class of the element you want to alter, then de-activate "Display ID and Class Details" so the descriptions disappear from the screen.

Then, press F12...

Then click the CSS tab that appears in the management console frame. Choose a stylesheet. Click EDIT (in the second grey row)...

Hey presto... ! You can now do an offline edit to the CSS and see real-time changes on-screen! (Remember this is OFFLINE - affecting only the page being displayed in your browser, so any changes you want to save will have to be committed to your live stylesheet(s) on the server.)

What I often do once I've done a stylesheet edit this way is highlight all the code, copy to clipboard, open the corresponding server-side stylehseet for editing, and just replace all the code (ctrl+v), save, then FTP the edited stylesheet back to the server... BUT while you're a novice, it's probably better to backup the original stylkesheet(s) first before you do this.

[pjb923]

The firefox web developer addon is great, but I would highly recommend taking a look at the Firebug extension.
http://getfirebug.com/

I think this may be what schoolboy was referring to when he said to press F12, but there is a much quicker way to edit your stylesheet.

Once installed, just hit F12 to bring up the console. Click inspect element icon (2nd from the left) or push CTRL+SHIFT+C. Now you can hover over any element on the page, click and you be shown exactly where you are in the html tree in the left pane. On the right you will see any styles associated to the element you have selected and can make changes in real time.

There are lots of cool tricks, like clicking on a font size, or pixel dimension and use the up and down arrow keys to adjust the number incrementally.

You can also click anywhere in the html to select an element display it's associated styles.

There is a nice overview here.
http://www.evotech.net/blog/2007/06/...on-to-firebug/

[ALEENA]

i dont know how to use these codes where i should paste em?? please helo me..

[janissaire]

Hi,

1. set Zen up on your local pc if you haven't done it yet.
2. If not sure where to look you can do a search *.css and it will pull up every css file on your pc - look to see which one is the zencart one.
3. open that in a text editor of some sort and you will see the code.
4. BE SURE TO MAKE A COPY OF IT BEFORE YOU START FOOLING AROUND WITH IT!!!

[CreateJADS]

okay - firebug and web developer tool in firefox - together is one powerful tool. One question - while I can see all the changes in real time, can it actually make changes to my site? If so I guess its obvious that I would have to be logged into the server through firefox and/or the admin tool? Has anybody used these tools this way?

[deepanvee]

Firebug is a great tool i was able to do it in firefox but i am facing an issue. While i was able to get the changes realtime i am unable the same lines in my CSS which is there in my ftp. Are there few things/areas which i cant edit it in CSS but need to edit it html only?

[schoolboy]

One question - while I can see all the changes in real time, can it actually make changes to my site?

It cannot do this, and the authors of these plugins are unlikely to add this functionality for security reasons.