How to use CSS Inspection Tools

Add Custom Code

The below example shows how to add or modify a site's CSS. Follow similar steps for all Custom CSS. From your WordPress Administration Panel:

1. Under Pagelines, select the "Custom Code" panel.
   

   

   Custom Code Panel
2. In the CSS Rules box, enter the Custom CSS code you want to use to modify or add a specific CSS rule
3. For example, to change the margin at the top of your page: You would add, body {padding-top: 15px;}
4. Next, click the "Save Options" button in the upper right hand corner
5. The Custom Code is dynamic which means that it will over-write the default Pagelines CSS settings.
6. Remember: Proper CSS code format must be used in Custom CSS:

#navigation_rss {position: absolute;

       left: 720px;
       font-family: Verdana, Arial, Helvetica, sans-serif;
       text-transform: uppercase;
       color: #897567;
       line-height: 2.5em;}

Other Features of the Custom Code Panel

Custom Code

In addition to being able to add Custom CSS in the Custom CSS Panel, javascripts can be added to both the header and the footer.There is also a section to add Google asynchronous analytics code script.

1. To add script, simply paste the desired script into the header or footer sections of the Custom CSS Section.
2. To add Google Analytics, simply copy the Google script from your Google Analytics account into the Google section of the panel.
3. Next, click the "Save Options" button in the upper right hand corner.

How to use CSS Inspection Tools

Installing Firebug

When designing a website, it is often necessary to modify the CSS to achieve a desired look and feel. 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.

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

When a webpage loads there is an order (hierarchy) by which the CSS of a page is loaded.

1. The site's "style.css" will load first
2. The "dynamic.css" will load second
3. The modifications in the "Custom CSS Section" will load next
4. If the "Customize Plugin CSS" is activated, it will load last