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

Great walk thru the "park". thanks for doing this. the best way to learn is to do.:clap:

I tried to get fire bug to work before but gave up. It is pretty easy to connect to the server with fireftp and open a file in notepad (or any text ed). I make changes in one window and F5 another window to the active site. you can see changes instantly. If you have two monitors - even better

okay I had been trying to use the bug within the file i was linking to and NOT the actual page on the web. thanks for pointing this out - this is great

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?

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?

When I hover over the product image in the product listing, the 'larger image' text has a decoration where the underline vanishes when you hover over it. Does anyone know how to remove this?

so this tool just shows you where to look? I still have to open it in an editor and make the changes?
sue

CreateJADS:

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.

keetch:

so this tool just shows you where to look? I still have to open it in an editor and make the changes?
sue

Correct - make a backup copy - then open in editor and have fun :laugh:

Doing it this way is probably the best way of getting to know the code and will help you feel more confident if/when you need to change any of ther other coding.

:bigups:This is good what you have put up here and I kinda had the same idea to do this sort of thing for other zenners also. I have learned a couple of new things so thank you.

Regards
Claire

Stylesheet Analysis Technique
(Save as web page complete)

Another technique you can use, for those who want to keep various static records of a dynamic site, is to navigate to the pages in your site, starting of course from your home page, and going to all the back pages which can be generated from the web store.

Do this for any page you want to record in it's static state, then you can open it in your web editor/design tool, and look at stuff in a copy, with all the code frozen in time, at that state of theweb page / stylesheet, with all the support files saved and frozen there too.

1.) Save the web page you are at to an eval folder, save as web page complete, all supporting files will be placed in a folder with the same name. Stylesheet paths will change, but you can check live source for the location, and most are in the same place, if not all.

2.) Have a look in the support folder, within the directory you saved the page to. You can then see what images and other supporting files are in the static local disk folder, and have a backup copy.

3.) There are a few good design tools for local work, I use Microsoft Expression Web 3, and others. In your editor, open the static page from your disk. In Expression, as you scroll in split design/code view, you can select areas in the saved page, in design view, and it will highlight the extent of a wrapper for example, and you can see the css names under the main menu. Many pages shared common css selectors and classes.

I liked this approach, because I had a copy of the page I could look at a specific point in time, and it saved the stylesheet to the supporting directory, and other needed files, at that point in time.

4.) Make notes of some of the css element names, and go to your live site, opened maybe in an web editor and experiment with the elements you want to modify, which you can note from the saved static page you have for reference.

5. Repaeat this for all the web page members of the shop. Then you have a referenceable record of each page, and exactly what was going on in it when it was dynamically generated to your browser. You can also go around the web to other pages, and try it too, then look at the support folder, and check out the css files, and whats going on in the page referencing that css file.

Another good experiment is to go through ALL the colors in the stylesheet, and make a html table, with each cell containing the colors in the sheet, just to see them against eachother. This alone can give you a snapshot of the color palette in use in for example the classic template. You can also open all the images, or thumbnail view them to see whats what.
For my purposes I like to simplify wacked out color palettes, to a handful of good colors that work well with eachother and the page dominant backgrounds, which will usually be a single background color fill or 2 and some foreground, and edge defining colors. You could go around changing colors to greens and yellows and pinks, in places to see where they are coming up one, two or three at a time, then change back till your ready to start applying. As you do, start commenting the css text
/comment/
to describe the elements - even hard copies are good for this, as you have a visual to work from quickly.

You can then, if you want to simplify, narrowing 2 or 3 colors to a new color, and so on, till you narrow the 25 or so colors the classic template uses to 5 to 10, or less.

Another thing is that if you use more colors, like 10 or twenty, relate them to a 2, 3 or 4 color hue palette, and vary out from these base colors, with varying saturations, or lighter/darker versions of those colors. This can help pull insanity into variety with a logic.

Make your template at the end. Another thing you can do, is modify the core stuff, since you can copy it all to a template at the end, and then you have it worked out for either template; the one which will be overwritten at upgrade time, and your modified clone of it. This saved me time, because I can make layout and color changes, and I know I'm going to, when I'm close to done, copy them into a template override, that I can apply later.

This may be a little slower, but you have:

a static record, that you can re-open and have a look at anytime, you can even comment the saved pages,
you can have progressive versions over time,
and you have a copy of the stylesheet at that time,
plus all the images you might want to modify, that that page is calling.

You can select visual elements, and see their css element counterpart name. You can then work realtime on your site, or experiment previewing the local file, with experimental changes made locally.

janissaire you made a great work... IT IS Necessary. That saves a lot of trouble for a newzenner. Thank You

Thank you janissaire!! This is a really useful thread for understanding the CSS. This + Firebug saves a lot of headaches. :smile:

Thank you for this topic, it's just what I needed.

Hi Janissaire,
Well done.
I have downloaded the firebug thingy, but your rundown has made it a whole lot easier to start with. Thank you for doing this.:clap:

Jen

I used to use the firebug extension on firefox until recently, but I decided to try out google crome because firefox was running so slow. Google crome also has some of the functions of firebug built in. If you right click and select select element, you can amend the css on the page to preview it, once your happy make a note of your changes and change the in the css file.

I have used a lot of different carts but Zen Cart is by far the easiest to customize and use.

Thanks a lot
Jovan

Holy moly, I love Firebug! I'd been going through the CSS for a while trying to figure out everything, and it was very slow going. Then I found this thread and it's like everything just came together. The write up at the beginning was very helpful, and the firebug add on is incredible, I had no idea that stuff like this was available. Thanks to all.

What helped when I wanted to single out one element on a page and find out what that color was or the padding on top that made that box so 'fat' was to use the Web Developer Firefox addon which helped pinpoint specific elements so that I could look at the source and see what I needed to modify.

If you install the addin, there are two things you can use very quickly to pick out and identify the source of .css elements on a page. One is the Tools > Add-ons > Web Developer > CSS > Use Border Box Model and the other is Tools > Add-ons > Web Developer > CSS > View style information.

What you get when you use those two options is a nifty red-bordered box that outlines the element on a page that you are looking at. So, for example, if you move your mouse over 'home' on your main page, then left-click on it with your mouse, these two options will generate a look at the .css file you need to look at, in this case on my site, the one in /includes/templates/[my custom style folder for template-related stuff]/css/stylesheet.css.

For the graphic I'm using as my page header, clicking on that graphic using these two options generates this:

#logoWrapper (line 230)

{
width: 100%;
height: 250px;
background-image: url("../images/imagename.gif");
background-repeat: no-repeat;
}

Which is handy if I forget the name or where I put the file if I decide to modify it, or if I want to modify the height.

I found that using this addon really speeded up a bunch of edits I wanted to make. Made me kind of regret that I hadn't used it when I first installed my site - would have saved me a lot of guessing.

Hi. I am truly brand new to Zen Cart, I plan to study and learn Zen Cart. I have no IT background, and the info about the stylesheet does not yet make any sense to me at all. I don't yet know what a stylesheet is. Can someone recommend a website that will help me get started?

Where are the diagrams? Such as matching the admin name of a banner/box with its specific location on the computer screen?

Thanks for your help! I hope to hear from you soon.