How to use CSS Inspection Tools

Revision as of 21:50, 13 November 2011

When using PagelinesPro it is often necessary to modify the CSS to achieve the desired look and feel of a site. There are a couple of FREE CSS Inspection Tools which can be used to do this. They are Firebug and Google's Chrome Inspection tool.

Installing Firebug

Install Firebug

From Mozilla Firefox:

1. Go to http://getfirebug.com/
2. Download and install the Firebug extension
3. Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

Using Firebug To Change Padding of an element

Selecting elements with Firebug

From Mozilla Firefox:

1. Go to your site
2. Click on the Firebug icon in the upper right-hand corner of your browser
3. Click on the Inspection icon on the Firebug interface
4. Next, click on the section of the page to be inspected
5. Upon clicking any element you will see the corresponding HTML and CSS code highlighted in Firebug
6. Copy the CSS code you are wanting to change
7. Return to the Pagelines Settings and select "Custom CSS"
8. Paste the CSS code that is being altered into the Custom CSS section
9. "Save Options" and refresh your browser to see the changes

Using Google's Chrome To Change Padding of an element

Selecting elements with Chrome's Inspection Tool

From Google Chrome: (The CSS Inspection Tool is built into Chrome)

1. Go to your site
2. Right Click anywhere on the page and then click "Inspect Element"
3. Click on the Inspection icon on the bottom row of the Inspection interface
4. Next, click on the section of the page to be inspected
5. Upon clicking any element you will see the corresponding HTML and CSS code highlighted in Firebug
6. Copy the CSS code you are wanting to change
7. Return to the Pagelines Settings and select "Custom CSS"
8. Paste the CSS code that is being altered into the Custom CSS section
9. "Save Options" and refresh your browser to see the changes

The CSS Hierarchy