-
Categories
- 10% Off Magento Themes with ECommerce-Themes.com
(+2 rating, 2 votes) - Magento Single Page Checkout - Video Guide (+1 rating, 1 votes)
- USA Magento Hosting with A2 (+1 rating, 1 votes)
- Secpay Module for Magento (+1 rating, 1 votes)
- Banishing Insecurities When Shopping on the Web (+1 rating, 1 votes)
-
- 07 visitor(s) online
Online Visitors
-
Recently Written
- Change Credit/Debit Card Name in Magento
- Export List of Magento Orders in CSV Format
- The “SQLSTATE[23000]: Integrity Constraint Violation” Error
- Display Custom Static Text Block on Home Page - Video Guide
- Display Products on Magento Home Page - Video Guide
- Magento Single Page Checkout - Video Guide
- Magento Admin System - Video Guide
- Export Magento Products into Google Base
- Use a Coupon Code for Specific Products or Categories in Magento
- Clicktale - Record User Actions and Mouse Movement Videos on Your Site
-
Links
-
Admin
Magento Themes - Getting to the Core of CSS
 Add to Favourites
 Email This Post
| Very handy...    |
Development on Magento has continued again, and this week I’ve been changing a lot of niggly design elements, including adjusting the Cascading Style Sheets, which help to create the overall look and feel of the web-site.
As mentioned before, Magento has an interesting architecture - with pages being populated by a plethora of hierarchical folders, XML files, database content, static objects etc - therefore sometimes it is pretty difficult to track down which include helps to create the design.
Last week I told you about Inline Editing, which is very handy for finding which of the several templates is used for a creating a particular part of the page, but I’ve discovered a Firefox tool called Firebug, which is absolutely superb for changing the CSS!
Definitely definitely download this tool - it will save you hours. Once installed, it really is so very easy. If you have an element on the home page that you wish to change, say for example, the “Compare Products” heading, simply highlight it, right click it, and select “Inspect Element”.
The line of code that creates the particular element is then highlighted in the window below, and then when you double-click this code, it highlights the particular CSS file and line of code from where the elements’ attributes come from - which means you don’t have to spend hours finding the class in the stylesheet.
about the author
This article was written by Sam Davis on August 6, 2008.
Computing over a glass of Grenache Shiraz... again! Sam encourages you to make money by writing articles for us! Learn More |
related articles
Export Magento products into Google Base Clicktale - record user actions and mouse movement videos on your site Does my Magento site look big in this? Colorzilla - Find the hex value of colours on a web pagecomments
Leave a Reply
-
Sponsored Ads
-
The New Blasted Thing
Blasted Thing has recently undergone an essential re-design, as we prepare to welcome a host of new features in to our web-site.
We will continue to be gathering useful articles, tutorials and advice regarding Magento - and we'll be focusing on a number of hosting and theme companies which we have independently verified. -
Translate this page
Translate
|
Just wanted to say that Inline translating is the best thing ever. I love magento....
|
