Some tips to modify stylesheet

Here is how to find out which CSS class/ID to modify for a specific part of the page:

1. Download Web Developer extension for FireFox here
2. Install & restart FireFox. You should see an additional bar right above the tabs.
3. Select Information > Display Element Information
4. Move your mouse/hover around the page and you should see the CSS tags for each page element is displayed just below the Web Developer bar. This allows you to see which class or ID control an element and what is the hierarchy. Once you get the ID, you can look for it in the CSS file and make the changes.
5. If you click on an element, its information is displayed in the yellow box on the left.

Apologize if this seems trivial, hopefully can be useful for some of you.

Good explanation. We can get tired of going over that for the bazillionth time, so it's nice to have it clearly written out in one place.

Definately my favourite FireFox extension and its fantastic for editing Zen Cart.

Thanks for posting details up for newbies

For those who prefer to work with Internet Explorer, there is also a developer toolbar available for download on the MS website here:

http://www.microsoft.com/downloads/details.aspx?FamilyID=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en

For a quick overview of all classes and id's:

Use the formentioned FF developer tool (made by Chris Pederick) and click on "Information|Display Id & Class Details"

Thank you, battra, for posting that. You are my favorite person for the day!

Get the Firebug add-on as well - combined with the Web Developer gives you amazing powers! :laugh:

Another handy one is X-ray, although the page can get a bit cluttered with info when you use that.

thanks, Ryk. I will check them out!

This is sweet. Thanks so much

:thumbsup:

Yes. We need guys like you to come together more often. That is just to the point!

I can now put the 15 library books away for the time:blink: and use that Firefox plug in and the IE plugin. I am totally new, newer than newbie! But I wish to learn and understand this stuff hopefully with some guidance.

Again, Kodo's to you guys, I appreciate this post.:clap::clap::clap:

This is GREAT!!!! :clap:

Thanks!

Brilliant! Thanks very much!

I am a big time newb and feel real stupid asking, but I can get into my adminstration panel, and ad products, catagory's etc. but for the life of me I can not find the style sheet. I would like to change text and colors of mine and am lost. I also got my zencart downlaoded from godaddy.com where my hosting is. Please help me learn. Thanks Corey

is located at:

/www/your_zen_cart/includes/templates/your_template_name/css/stylesheet.css

your_template_name is probably something like "classic" if you haven't created our own template.

Oh... and you can't really modify it thru the admin account, you have to modify using an FTP client. Downlaod it , change it, then upload it again.

Hope this helps.

Thanks!

I know this is a newbie question but do you install ff on your pc or on the server and if it's on the servers - how and where do you stick it.

daver1510:

I know this is a newbie question but do you install ff on your pc or on the server and if it's on the servers - how and where do you stick it.

When you say "ff", do you mean the "FTP"?

The FTP is a program that you use to upload and download files from your server. Is the same program that you use to install and upload your zen store.

The FTP progam is install on your PC.

Using your FTP Program, you loggin in to your server, then you go to the directory
/www/your_zen_cart/includes/templates/your_template_name/css/

and download the file:
stylesheet.css

Make the change to the stylesheet.css and then upload it back to the server, to the same directory from where you download it. Is always a good idea to create a back up, just incase things get really mess up.

Does this make sense?

Thanks!

Hi,

Another great ff extention is the FireBug one. You can test things "live" although it does not actualy edit your files. once you have your changes sorted just cut and paste to your files and your done.

I think Web Developer is great. The only problem I am having is - when I use Information|Display Element Information, some of the text runs out the right side of the "Web Developer" text box when I mouse of certain parts of the page. Has anyone else had this problem?

I'm pretty new can you tell me where I can find the text color in the style sheet so I can change my header text from gray to white? alisgaragesale.com/CTaquatic this is the text I want to change the color of. "Welcome to CT Aquatic! Your connection for all your salt water aquarium needs."

Hi Battra, last May2007 you submitted the idea of downloading a webdeveloper extension for Firefox. I was able to down load it, but when I attempted to "install" it in Firefox, I got the error message that it was not a valid Win32 application??? To the best of your knowledge, has something changed from when you made your recommendation? Thanks for your help, sounds like something that would be very helpful!

MT ed