Page 2 of 5 FirstFirst 1234 ... LastLast
Results 11 to 20 of 48
  1. #11
    Join Date
    Aug 2009
    Posts
    3
    Plugin Contributions
    0

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

    I've been looking around the forum for various issues and I've noticed a lot of questions about what does what on the style sheet.

    Apologies for those who know about this but I thought it might be useful to some if I mentioned FireBug - it's the greatest web design tool ever invented in my view and if you've not used it, download and install it now. It'll change your life forever!

    Obviously this is assuming that you use FireFox when designing websites (which is a very good idea).

    Go to https://addons.mozilla.org/en-US/firefox/addon/1843 and download and install FireBug.

    Once that's done there are two ways you can use it quickly and easily to see what element is doing what.

    First you can simply right click on whatever bit of the website you're looking at and select "Inspect element". This will open up the Firebug window at the foot of your browser. On the left you'll see the source code, on the right you'll see the relevant CSS.

    It shows you what stylesheeet it's on, and the best bit is that you can edit the values in each element and it'll change on the browser, so you can see in real time what different it's making.

    Secondly, once you've got the Firebug window open (click the bug symbol on the status bar at the bottom of your browser) you can use your mouse to scroll over the screen and highlight each of the different elements used to make the page. Just click on the button shown on the top left of the Firebug window then run your mouse over the webpage.

    I use this all the time as a way to determine exactly what's going on, what elements are being shaped and coloured by what parts of the style sheet and so on.

  2. #12
    Join Date
    Dec 2008
    Location
    Australia
    Posts
    3
    Plugin Contributions
    0

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

    Thanks Graham!
    Didn't know about this handy addon. Just installed and I can see this is going to be very helpful - especially to a novice like me.
    Much appreciated.

  3. #13
    Join Date
    Sep 2009
    Posts
    3
    Plugin Contributions
    0

    Default Re: The CSS Style sheet explained (v1.3.8 classic)

    Hi janissaire.

    Thanks for the information.It's pleasure to be a part of your forum. I love to try also what you are discussing here. Thanks!
    computerkabel

  4. #14
    Join Date
    Aug 2009
    Posts
    19
    Plugin Contributions
    0

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

    I just downloaded this and it is fantastic for sure! One thing I haven't figured out yet, is when I select an element on the page, Firebug automatically reverts to html when it's the css that I need to work with. When I select the css tab, it does indeed show stylesheet.css, however I'm still faced with the problem of locating in that file which bit I need to work with to change that portion of the page I want. Have the same problem with any editor. Which section of stylesheet.css controls which section of the site?

  5. #15
    Join Date
    Sep 2009
    Posts
    9
    Plugin Contributions
    0

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

    Not sure if you aware but the same type of tool is available for IE8out of the box. Just hit the same "F12" key as you would in Firefox. You can also outline any of the items, such as tables, divs, etc. a bit handy if you're working with css and trying to build table-less more fluid layouts. It also has built in IE modes which is helpful to aid in layouts for the more predominant browsers out there (IE).

  6. #16
    Join Date
    Nov 2009
    Location
    Italy
    Posts
    2
    Plugin Contributions
    0

    Default Re: The CSS Style sheet explained (v1.3.8 classic)

    I'm using firebug too and i can tell that is very simple to understand and modify the css. Great tool.

  7. #17
    Join Date
    Nov 2009
    Posts
    3
    Plugin Contributions
    0

    Default Re: The CSS Style sheet explained (v1.3.8 classic)

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

  8. #18
    Join Date
    Nov 2009
    Posts
    3
    Plugin Contributions
    0

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

    for sure i will try it ,, thank you ^^

  9. #19
    Join Date
    Nov 2009
    Posts
    60
    Plugin Contributions
    0

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

    This is great for css work.
    Any tips on an easy method for altering the html.

  10. #20
    Join Date
    Sep 2008
    Location
    Toronto, Ontario, Canada
    Posts
    480
    Plugin Contributions
    0

    Default Re: The CSS Style sheet explained (v1.3.8 classic)

    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!!!

 

 
Page 2 of 5 FirstFirst 1234 ... 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