Page 4 of 5 FirstFirst ... 2345 LastLast
Results 31 to 40 of 48
  1. #31
    Join Date
    Feb 2010
    Location
    Arizona
    Posts
    50
    Plugin Contributions
    0

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

    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.

  2. #32

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

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

  3. #33
    Join Date
    Jan 2009
    Posts
    33
    Plugin Contributions
    0

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

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

  4. #34
    Join Date
    Jun 2010
    Posts
    8
    Plugin Contributions
    0

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

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

  5. #35
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    78
    Plugin Contributions
    0

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

    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.

    Jen

  6. #36
    Join Date
    Nov 2007
    Location
    UK
    Posts
    102
    Plugin Contributions
    0

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

    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.

  7. #37
    Join Date
    Oct 2010
    Posts
    45
    Plugin Contributions
    0

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

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

    Thanks a lot
    Jovan

  8. #38
    Join Date
    Aug 2010
    Location
    Norwich, CT
    Posts
    22
    Plugin Contributions
    0

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

    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.

  9. #39
    Join Date
    Apr 2011
    Posts
    45
    Plugin Contributions
    0

    Default Useful firefox addin for finding that one style setting...

    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.

  10. #40
    Join Date
    Jul 2011
    Posts
    1
    Plugin Contributions
    0

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

    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.

 

 
Page 4 of 5 FirstFirst ... 2345 LastLast

Similar Threads

  1. v154 What's The Easiest Way To Create A Direct Link In The Sidebox?
    By DK_Scully in forum Setting Up Categories, Products, Attributes
    Replies: 35
    Last Post: 14 Jun 2017, 08:40 AM
  2. CSS Style Sheets - what is the best way to make changes?
    By isytes in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 4 Mar 2010, 07:28 AM
  3. What's the easiest way to add custom fields to the New Product page?
    By christopherw in forum Setting Up Categories, Products, Attributes
    Replies: 4
    Last Post: 18 Sep 2007, 06:16 PM
  4. What is the easiest way to add an extra sidebox and make some html pages in it?
    By hankliu in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 27 Dec 2006, 10:48 AM
  5. Shipping, what is the easiest way
    By jcoit1 in forum Managing Customers and Orders
    Replies: 1
    Last Post: 11 Jul 2006, 01:49 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR