Follow these steps to change the color of a heading:
- Using a browser CSS styling inspector: When changing colors, the folder to be in is not
app/design/frontendbut ratherskin/frontend. Because of that, template path hints are of no use now. What does help is using a browser that supports viewing styling information (CSS). One of the most used browsers for that is Firefox with the plugin Firebug installed. You can install Firefox by browsing to http://www.firefox.com and following the instructions to download and install there.After you have installed Firefox, open Firefox and click on the menu option Extra | Add-ons. In the next screen, click on Get Add-ons and in the search field enter "firebug":
In the resulting list, click on See all results (the way this is displayed differs based on your version of Firefox and if you use an Apple computer or not) . Now you will see a page where the first result is Firebug. Click on the green Add to Firefox button, and your tools to attack page styling are installed. As an example for changing the color of a heading, we shall use the same text as in the previous paragraph. If we want to change the product title to display in red, we first have to know where the the styling of product titles is arranged. To find this out, Firebug allows you to inspect elements of web pages.
- Inspecting the page element you want to change: Go to the product title, press the mouse button and then select Inspect Element. In the bottom-right of the screen you will now see styling information as shown:
- Changing the styling: In the current example you can see that the relevant place to make the adjustment is
skin/frontend/beginner/guide/css/styles.css, line 1112 (if you do not have your own theme, the default location to look at isskin/frontend/base/default/css/styles.css). If we change this style definition to make product titles red, the style definition will look as follows:
The
color:red;bit is added by us. To make these kinds of changes, knowledge of CSS is necessary. For an overview of CSS rules, you can visit http://reference.sitepoint.com/css. - Refreshing the product page: The end result of the change we just made is visible after we refresh the product page. Because this is a change in CSS and CSS information is often not fully refreshed when a browser reloads a page, it is usually required to press Ctrl + F5 on your PC or command + R to refresh the page properly. Using these keyboard shortcuts ensures the browser will reload the page fully.
After making the changes and refreshing the page properly the end result looks like this:
