Magento WizardNo joke, this website relaunches on 1st April. New look, new features!

Contact the site  Make Money

Home > Helpful Tools > Magento Themes – Getting to the Core of CSS

Magento Themes – Getting to the Core of CSS

 Add to Favourites  
(No Ratings Yet)
Loading ... Loading ...

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.

Firebug - Magento Development Tool

  • Digg
  • del.icio.us
  • Facebook
  • Google
  • LinkedIn
  • Live
  • Reddit
  • StumbleUpon
  • Technorati
  • TwitThis

about the author

    This article was written by Sam Davis on August 6, 2008.
    Computing over a glass of Grenache Shiraz... again!
    Sam is the Editor of Blasted Thing. Contact Us

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 page

comments

Leave a Reply




Spam protection by WP Captcha-Free

Tags: , , ,



  • Sponsored Ads

    • Magento Themes
    • vtiger: great article, thank you....

  • Recent Tweets

    #magento plugins Fooman Google Analytics Plus our favourite plugin for creating #googleanalytics #ecommerce funnel visualisation

    Magento получил $22 ляма баксов инвестиций ОФИГЕТЬ

    RT @agentur_schoelz: Online-Shops mit Magento (Gebundene Ausgabe) http://bit.ly/dwpBjM

    Magento 1.4.0.1 Google Analytics fix http://ff.im/-hQ5j1

    Magento - Member - eCommerce Software for Growth http://www.magentocommerce.com/boards/member/257554/ Austin real estate