Docs

How to use CSS Inspection Tools

[edit] Please Note

These docs are now deprecated, we have a new Support area located here

(Difference between revisions)
(→Using Firebug To Change Padding of an element)
(→Other Functions of Child Editor Plugin200px|thumb|right|alt=Child Editor|Child Editor)
 
(46 intermediate revisions by one user not shown)
Line 1: Line 1:
 
[[Category:New Page]]
 
[[Category:New Page]]
−
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.
+
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.
  
−
==Installing Firebug==
+
==What is CSS?==
 +
# CSS stands for Cascading Style Sheets
 +
# Styles define how to display HTML elements
 +
# Styles were added to HTML 4.0 to solve a problem
 +
# External Style Sheets can save a lot of work
 +
# External Style Sheets are stored in CSS files
 +
# Go to http://www.w3schools.com/css/ to find out more
 +
<h2>CSS Solved a Big Problem</h2>
 +
 
 +
HTML was never intended to contain tags for formatting a document.
 +
 
 +
HTML was intended to define the content of a document, like:
 +
 
 +
<h2 style="color: red">This is a heading with a Red color style</h2>
 +
 
 +
<p>This is a paragraph.</p>
 +
 
 +
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process.
 +
 
 +
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
 +
 
 +
In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file.
 +
 
 +
All browsers support CSS today.
 +
 
 +
==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:
 +
 
 +
# Under Pagelines, select the "Custom Code" panel.[[File:Custom-css.png|200px|thumb|right|alt=Custom Code Panel|Custom Code Panel]]
 +
# In the CSS Rules box, enter the Custom CSS code you want to use to modify or add a specific CSS rule
 +
# For example, to change the margin at the top of your page: You would add, body {padding-top: 15px;}
 +
# Next, click the "Save Options" button in the upper right hand corner
 +
# The Custom Code is dynamic which means that it will over-write the default Pagelines CSS settings.
 +
# 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[[File:Custom-css2.png|200px|thumb|right|alt=Custom Code|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.
 +
# To add script, simply paste the desired script into the header or footer sections of the Custom CSS Section.
 +
# To add Google Analytics, simply copy the Google script from your Google Analytics account into the Google section of the panel.
 +
# Next, click the "Save Options" button in the upper right hand corner.
 +
 
 +
==How to use CSS Inspection Tools==
 +
<h3>Installing Firebug</h3>
 +
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.
 
[[File:Firebug.png|200px|thumb|right|alt=Install Firebug|Install Firebug]]
 
[[File:Firebug.png|200px|thumb|right|alt=Install Firebug|Install Firebug]]
 
From Mozilla Firefox:  
 
From Mozilla Firefox:  
Line 22: Line 72:
 
# "Save Options" and refresh your browser to see the changes
 
# "Save Options" and refresh your browser to see the changes
  
−
==Using Firebug To Change Padding of an element==
+
==Using Google's Chrome To Change Padding of an element==
−
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
+
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
−
From Mozilla Firefox:  
+
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
 
# Go to your site
 
# Go to your site
−
# Click on the Firebug icon in the upper right-hand corner of your browser
+
# Right Click anywhere on the page and then click "Inspect Element"
−
# Click on the Inspection icon on the Firebug interface
+
# Click on the Inspection icon on the bottom row of the Inspection interface
 
# Next, click on the section of the page to be inspected
 
# Next, click on the section of the page to be inspected
 
# Upon clicking any element you will see the corresponding HTML and CSS code highlighted in Firebug
 
# Upon clicking any element you will see the corresponding HTML and CSS code highlighted in Firebug
Line 34: Line 84:
 
# Paste the CSS code that is being altered into the Custom CSS section
 
# Paste the CSS code that is being altered into the Custom CSS section
 
# "Save Options" and refresh your browser to see the changes
 
# "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.
 +
# The site's "style.css" will load first
 +
# The "dynamic.css" will load second
 +
# The modifications in the "Custom CSS Section" will load next
 +
# If the Customize Plugin CSS ("Child Editor Plugin") is activated, it will load last
 +
It is important to keep this hierarchy in mind because the CSS that loads last will take priority over any CSS loaded before it.
 +
 +
==The Difference Between the Child Editor Plugin & the Custom CSS section ==
 +
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.
 +
 +
The Child Editor Plugin is a more comprehensive way to customize your theme. It is a way to create child themes for your site through the plugin to add CSS but also functions, hooks and anything you want to customize your site.
 +
<h3>Some of the differences</h3>
 +
# The Custom CSS section only allows you to customize CSS
 +
# In version 1.5 of PagelinesPro there was a base child theme
 +
# The Child Editor Plugin replaces the base child theme, allowing you to do the same types of customizations from the plugin rather than from an entirely separate child theme
 +
# The Custom CSS is just for quick CSS changes, you would not want to use it to re-theme your entire site
 +
# It also gives you the ability to customize child themes without your changes being overwritten when you update the child theme
 +
# If you download iblogpro5 and want to customize it, those changes will stick around when you update to iblogpro6
 +
 +
==How To Activate the Child Editor [[File:Childeditor.png|200px|thumb|right|alt=Custom Code|Custom Code]] ==
 +
From your WordPress Administration Panel:
 +
# Go to your PageLines Settings
 +
# Choose "Store"
 +
# Then choose "Plugins"
 +
# Then "Top Free"
 +
# Install the Child Editor plugin
 +
# The physical path to the style.css file is located (wp-content\plugins\pagelines-customize)
 +
 +
==Editing CSS with Child Editor Plugin[[File:EditingStyle-ChildEditor.png|200px|thumb|right|alt=Child Editor|Child Editor]]==
 +
From your WordPress Administration Panel:
 +
# Go to your PageLines Settings
 +
# Then click on "Child Editor"
 +
# Next, insert the custom css under the "Style" tab
 +
# Save your work
 +
 +
==Other Functions of Child Editor Plugin[[File:Cildeditor-functions.png|200px|thumb|right|alt=Child Editor|Other Uses]]==
 +
 +
# The Child Editor plugin allows you to edit the "Functions.php"
 +
# It also allows you edit the site's "Page Base" theme

Latest revision as of 04:40, 14 November 2011

One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

Contents

[edit] What is CSS?

  1. CSS stands for Cascading Style Sheets
  2. Styles define how to display HTML elements
  3. Styles were added to HTML 4.0 to solve a problem
  4. External Style Sheets can save a lot of work
  5. External Style Sheets are stored in CSS files
  6. Go to http://www.w3schools.com/css/ to find out more

CSS Solved a Big Problem

HTML was never intended to contain tags for formatting a document.

HTML was intended to define the content of a document, like:

This is a heading with a Red color style

This is a paragraph.

When tags like , and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file.

All browsers support CSS today.

[edit] 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
    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;}

[edit] Other Features of the Custom Code Panel
Custom Code
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.

[edit] How to use CSS Inspection Tools

Installing Firebug

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
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.

[edit] Using Firebug To Change Padding of an element

Selecting elements
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

[edit] Using Google's Chrome To Change Padding of an element

Selecting elements
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

[edit] 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 ("Child Editor Plugin") is activated, it will load last

It is important to keep this hierarchy in mind because the CSS that loads last will take priority over any CSS loaded before it.

[edit] The Difference Between the Child Editor Plugin & the Custom CSS section

The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The Child Editor Plugin is a more comprehensive way to customize your theme. It is a way to create child themes for your site through the plugin to add CSS but also functions, hooks and anything you want to customize your site.

Some of the differences

  1. The Custom CSS section only allows you to customize CSS
  2. In version 1.5 of PagelinesPro there was a base child theme
  3. The Child Editor Plugin replaces the base child theme, allowing you to do the same types of customizations from the plugin rather than from an entirely separate child theme
  4. The Custom CSS is just for quick CSS changes, you would not want to use it to re-theme your entire site
  5. It also gives you the ability to customize child themes without your changes being overwritten when you update the child theme
  6. If you download iblogpro5 and want to customize it, those changes will stick around when you update to iblogpro6

[edit] How To Activate the Child Editor
Custom Code
Custom Code

From your WordPress Administration Panel:

  1. Go to your PageLines Settings
  2. Choose "Store"
  3. Then choose "Plugins"
  4. Then "Top Free"
  5. Install the Child Editor plugin
  6. The physical path to the style.css file is located (wp-content\plugins\pagelines-customize)

[edit] Editing CSS with Child Editor Plugin
Child Editor
Child Editor

From your WordPress Administration Panel:

  1. Go to your PageLines Settings
  2. Then click on "Child Editor"
  3. Next, insert the custom css under the "Style" tab
  4. Save your work

[edit] Other Functions of Child Editor Plugin
Child Editor
Other Uses

  1. The Child Editor plugin allows you to edit the "Functions.php"
  2. It also allows you edit the site's "Page Base" theme
Retrieved from "http://www.pagelines.com/wiki/index.php?title=How_to_use_CSS_Inspection_Tools&oldid=2725"