PageLines Docs - User contributions [en]

Updating Your PageLines Products

2011-12-07T03:16:15Z

Poseyg: /* Updating Products */

To be able to receive Pagelines updates you have to setup your account credentials.

==Setting Up Your Account==
[[File:Updateproducts.png|200px|thumb|right|alt=Settin Up Account|Your Account]]

From your PageLines Settings:
# Click on the "Account" tab
# Click on the "Your Account" tab
# Enter your Pagelines Username and Password
# Click on "Submit Credentials

==Updating Products==
[[File:Upgrade.png|200px|thumb|right|alt=Settin Up Account|Your Account]]

After you have setup your Pagelines account:
# When a product update it is available it will show up as a blue "Upgrade" button. Click to upgrade
# After upgrading you will notice that the blue "Upgrade" button is no longer visible.
It is always best practice to check out all your Pagelines Products to see if an upgrade is available when you first login to your website.

Upgrading products is fast and easy. Upgrading will help you maintain a fully working site.

==Updating Pagelines Theme==
[[File:Update-theme.png|200px|thumb|right|alt=Updating Your Pagelines Theme|Your Pagelines Theme]]

When you login to your website, if there is a new theme update you will see:
# A highlighted message, proceed to your WordPress Updates page

When you are on the Updates page:
[[File:Update-theme2.png|200px|thumb|right|alt=Updating Your Pagelines Theme|Your Pagelines Theme]]
# Check the Pagelines Framework
# Click on the "Update Themes" button and your theme will be updated automatically

Updating Your PageLines Products

2011-12-07T03:04:35Z

Poseyg: /* Updating Products */

To be able to receive Pagelines updates you have to setup your account credentials.

==Setting Up Your Account==
[[File:Updateproducts.png|200px|thumb|right|alt=Settin Up Account|Your Account]]

From your PageLines Settings:
# Click on the "Account" tab
# Click on the "Your Account" tab
# Enter your Pagelines Username and Password
# Click on "Submit Credentials

==Updating Products==
[[File:Upgrade.png|200px|thumb|right|alt=Settin Up Account|Your Account]]

After you have setup your Pagelines account:
# When a product update it is available it will show up as a blue "Upgrade" button. Click to upgrade
# After upgrading you will notice that the blue "Upgrade" button is no longer visible.
It is always best practice to check out all your Pagelines Products to see if an upgrade is available when you first login to your website.

Upgrading products is fast and easy. Upgrading will help maintain a fully working site.

==Updating Pagelines Theme==
[[File:Update-theme.png|200px|thumb|right|alt=Updating Your Pagelines Theme|Your Pagelines Theme]]

When you login to your website, if there is a new theme update you will see:
# A highlighted message, proceed to your WordPress Updates page

When you are on the Updates page:
[[File:Update-theme2.png|200px|thumb|right|alt=Updating Your Pagelines Theme|Your Pagelines Theme]]
# Check the Pagelines Framework
# Click on the "Update Themes" button and your theme will be updated automatically

Updating Your PageLines Products

2011-12-07T03:00:16Z

Poseyg: /* Updating Products */

To be able to receive Pagelines updates you have to setup your account credentials.

==Setting Up Your Account==
[[File:Updateproducts.png|200px|thumb|right|alt=Settin Up Account|Your Account]]

From your PageLines Settings:
# Click on the "Account" tab
# Click on the "Your Account" tab
# Enter your Pagelines Username and Password
# Click on "Submit Credentials

==Updating Products==
[[File:Upgrade.png|200px|thumb|right|alt=Settin Up Account|Your Account]]

After you have setup your Pagelines account:
# When a product update it is available it will show up as a blue "Upgrade" button. Click to upgrade
# After upgrading you will notice that the blue "Upgrade" button is no longer visible.

==Updating Pagelines Theme==
[[File:Update-theme.png|200px|thumb|right|alt=Updating Your Pagelines Theme|Your Pagelines Theme]]

When you login to your website, if there is a new theme update you will see:
# A highlighted message, proceed to your WordPress Updates page

When you are on the Updates page:
[[File:Update-theme2.png|200px|thumb|right|alt=Updating Your Pagelines Theme|Your Pagelines Theme]]
# Check the Pagelines Framework
# Click on the "Update Themes" button and your theme will be updated automatically

Updating Your PageLines Products

2011-12-07T02:58:54Z

Poseyg: /* Updating Products */

To be able to receive Pagelines updates you have to setup your account credentials.

==Setting Up Your Account==
[[File:Updateproducts.png|200px|thumb|right|alt=Settin Up Account|Your Account]]

From your PageLines Settings:
# Click on the "Account" tab
# Click on the "Your Account" tab
# Enter your Pagelines Username and Password
# Click on "Submit Credentials

==Updating Products==
[[File:Upgrade.png|200px|thumb|right|alt=Settin Up Account|Your Account]]

After you have setup your Pagelines account:
# When a product update it is available it will show up as a blue "Upgrade" button. Click to upgrade
# After upgrading you will notice that the blue "Upgrade" button is no longer visible.

==Updating Pagelines Theme==
[[File:Update-theme.png|200px|thumb|right|alt=Updating Your Pagelines Theme|Your Pagelines Theme]]

When you login to your website, if there is a new theme update you will see:
# A highlighted message, proceed to your WordPress Updates page

When you are on the Updates page:
[[File:Update-theme2.png|200px|thumb|right|alt=Updating Your Pagelines Theme|Your Pagelines Theme]]
# Check the Pagelines Framework
# Click on the "Update Themes" button and your theme will be updated automatically

File:Update-theme2.png

2011-12-07T02:52:42Z

Poseyg:

File:Update-theme.png

2011-12-07T02:51:26Z

Poseyg:

How to Use the Color Control Settings

2011-12-07T02:49:04Z

Poseyg: /* Site Background Image */

Color control lets you choose the main colors that will be displayed on your website.

Using color math, color control will decide the best colors for secondary and tertiary elements of your site. You can always edit these manually by using [[Glossary#CSS|CSS]] but color control chooses the best complementary colors to your site design.

==Overview==
[[File:Usecolorcontrol-overview.jpg|thumb|alt=Overview of Color Control|Color Control Overview]]

Color Control can be found inside the WordPress Administration Panel by clicking on PageLines > Settings and selecting Color Control from the menu.

These are the main features of Color Control:

===1. Site Design Mode===

You can choose which design mode you would like to display on your site.

* '''Full Width Sections''' allows you to have parts of your site be the full width of your browser window; while other elements are the width of the content area.

* '''Fixed Width Mode''' will keep all of the parts of your site inside the width of the content area. You can use this mode to set a background for the page and content area can have a separate fixed width background.

===2. Basic Layout Colors===

Use these settings to change the colors of your layout backgrounds. You can enter 6 digit [[Glossary#Hexadecimal Code|hexadecimal code]] or click the icon to the left of the hex numbers to use the color selector.

It is important to note that the '''Body Background''' color will only appear if the '''Content Width Page''' is selected in the Site Design Mode. The '''Page Background''' color will appear when '''Full-width Sections''' are selected in the Site Design Mode.

* To make the background transparent you can leave the options blank by deleting the hexadecimal text.

===3. Page Text Colors===

Use these options to customize the colors of the main text on your site.

* '''Text Headers''' will change any text that is typically displayed as h1, h2, h3, h4 etc. headings.

*'''Primary Text''' is going to change the color of your main content text.

*'''Primary Links''' will change the color of the links in you main content.

*'''Footer Text''' as it suggests will change the color of the text that appears in your website footer.

===4. Site Background Image===

You can upload your own background image to your site here and control how and where it is displayed.

==Basic Layout Colors==
[[File:Usecolorcontrol-changepagebg2.jpg|thumb|alt=Changing the Page Background Color| Page Background Color]]
Lets see how changing the Basic Layout Colors is going to affect your site. The default setup is a transparent Page Background and transparent content Background. Because of this only the Body Background color is being displayed.

# First lets change the Page Background to #115ba5 you can paste this into the Page Background section
# Save your changes and look how the Page Background color now covers the entire site
# So thats a little hard to read. Lets change the content area color so you can read the text
# Set the Content Background to #EEEEEE save and check out the page

Based on the colors you choose, Color Control will automatically change the secondary and tertiary colors and pick the best complimentary colors for you. You can change these colors with custom code if you like.

==Page Text Colors==

[[File:Usecolorcontrol-textcolors.jpg|thumb|alt=Page Text Colors|Page Text Colors]]
The best way to describe what the Page Text Colors do is to show you where they make changes.

Lets add some elements to a page that will be affected by the color changes.

# Choose a page to edit from Wordpress, and lets add a page title with an H1 font type. Save your page
# If you are using the Visual Editor you can select the text and change the font style from Paragraph to Heading 1
# Now head back to the Color Control settings and change the Page Text Colors. Yours will look better than this example but lets just look at a rainbow of colors to show the changes
# See the image to the right to look at the changes

==Site Background Image==

[[File:Usercolorcontrol-bgimage.jpg|thumb|alt=Background Images|Background Images]]
If you would like to set the background to something other than a single color; you can upload your own image here.

Lets go over adding your background image and positioning it on the page:

# Click on Upload Image and browse your computer for the image you would like to use
# If you are using the default Color Control settings you may want to change the Content Area Background to something other than transparent.
# '''Set Background Image Repeat''' Lets you choose to repeat the image in a vertical column and horizontal row or to tile it vertically and horizontally across the entire page
# '''Vertical Position in Percent''' allows you to move the image down the page
#'''Horizontal Position in Percent''' allows you to move the image to right of the page
#With '''Set Background Attachment''' you can choose to have your image remain static or have it scroll down the page as the user scrolls the site

==Supersize Site Background Image==

[[File:Supersize-bckgrd.png‎|thumb|alt=Supersize Background Images|Background Images]]
If you would like your background to fill the entire size of a browser window, you can super size your background:

# Simply check the "Supersize The Background Image" and "Save Options"

[[Category: Draft]]

File:Supersize-bckgrd.png

2011-12-07T02:45:51Z

Poseyg:

How to Use the Custom Code Settings

2011-11-17T19:26:15Z

Poseyg: /* Add Custom Code */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

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

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

==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:Addcode2.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;}
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.

==The Difference Between the PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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

==Activate the Pagelines Customize Plugin==
[[File:Customizeplugin.png|200px|thumb|right|alt=Customize Plugin|Add Plugin]]

# Go to your PageLines Settings
# Click on the "Store" tab
# Click on the "Plugins" tab
# Click on the "Add Plugins" tab
# Click on the "Top Free" tab
# Find the "Pagelines Customize" plugin and click Activate
# The physical path to the style.css is (wp-content\plugins\pagelines-customize)
# Repeat the process to activate the "Child Editor" plugin

==How To Activate the Child Editor [[File:Childeditor.png|200px|thumb|right|alt=Custom Code|Custom Code]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "style.css"
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)

==Using the Child Editor to edit files==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify. [[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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

==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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

How to Use the Custom Code Settings

2011-11-17T19:25:29Z

Poseyg: /* The CSS Hierarchy */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

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

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

==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:Addcode2.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;}
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.

==The Difference Between the PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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

==Activate the Pagelines Customize Plugin==
[[File:Customizeplugin.png|200px|thumb|right|alt=Customize Plugin|Add Plugin]]

# Go to your PageLines Settings
# Click on the "Store" tab
# Click on the "Plugins" tab
# Click on the "Add Plugins" tab
# Click on the "Top Free" tab
# Find the "Pagelines Customize" plugin and click Activate
# The physical path to the style.css is (wp-content\plugins\pagelines-customize)
# Repeat the process to activate the "Child Editor" plugin

==How To Activate the Child Editor [[File:Childeditor.png|200px|thumb|right|alt=Custom Code|Custom Code]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "style.css"
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)

==Using the Child Editor to edit files==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify. [[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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

==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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

How to Use the Custom Code Settings

2011-11-17T19:24:42Z

Poseyg: /* The CSS Hierarchy */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

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

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

==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:Addcode2.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;}
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.

==The Difference Between the PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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

==Activate the Pagelines Customize Plugin==
[[File:Customizeplugin.png|200px|thumb|right|alt=Customize Plugin|Add Plugin]]

# Go to your PageLines Settings
# Click on the "Store" tab
# Click on the "Plugins" tab
# Click on the "Add Plugins" tab
# Click on the "Top Free" tab
# Find the "Pagelines Customize" plugin and click Activate
# The physical path to the style.css is (wp-content\plugins\pagelines-customize)
# Repeat the process to activate the "Child Editor" plugin

==How To Activate the Child Editor [[File:Childeditor.png|200px|thumb|right|alt=Custom Code|Custom Code]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "style.css"
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)

==Using the Child Editor to edit files==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify. [[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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

==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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

How to Use the Custom Code Settings

2011-11-17T19:24:14Z

Poseyg: /* What is CSS? */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

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

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

==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:Addcode2.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;}
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.

==The Difference Between the PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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

==Activate the Pagelines Customize Plugin==
[[File:Customizeplugin.png|200px|thumb|right|alt=Customize Plugin|Add Plugin]]

# Go to your PageLines Settings
# Click on the "Store" tab
# Click on the "Plugins" tab
# Click on the "Add Plugins" tab
# Click on the "Top Free" tab
# Find the "Pagelines Customize" plugin and click Activate
# The physical path to the style.css is (wp-content\plugins\pagelines-customize)
# Repeat the process to activate the "Child Editor" plugin

==How To Activate the Child Editor [[File:Childeditor.png|200px|thumb|right|alt=Custom Code|Custom Code]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "style.css"
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)

==Using the Child Editor to edit files==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify. [[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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

==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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

How to Update PageLines Products

2011-11-17T19:22:42Z

Poseyg: /* Setting Up Your Account */

How to Update PageLines Products

2011-11-17T19:16:19Z

Poseyg:

Updating Your PageLines Products

2011-11-17T05:27:13Z

Poseyg: /* Setting Up Your Account */

File:Upgrade.png

2011-11-17T04:46:29Z

Poseyg:

Updating Your PageLines Products

2011-11-17T04:35:02Z

Poseyg: Created page with "To be able to receive Pagelines updates you have to setup your account credentials. ==Setting Up Your Account== [[File:Updateproducts.png|200px|thumb|right|alt=Settin Up Accoun..."

File:Updateproducts.png

2011-11-17T04:31:35Z

Poseyg:

How to Use the Custom Code Settings

2011-11-17T04:09:45Z

Poseyg: /* Add Custom Code */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

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

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

==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:Addcode2.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;}
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.

==The Difference Between the PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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

==Activate the Pagelines Customize Plugin==
[[File:Customizeplugin.png|200px|thumb|right|alt=Customize Plugin|Add Plugin]]

# Go to your PageLines Settings
# Click on the "Store" tab
# Click on the "Plugins" tab
# Click on the "Add Plugins" tab
# Click on the "Top Free" tab
# Find the "Pagelines Customize" plugin and click Activate
# The physical path to the style.css is (wp-content\plugins\pagelines-customize)
# Repeat the process to activate the "Child Editor" plugin

==How To Activate the Child Editor [[File:Childeditor.png|200px|thumb|right|alt=Custom Code|Custom Code]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "style.css"
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)

==Using the Child Editor to edit files==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify. [[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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

==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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

File:Addcode2.png

2011-11-17T04:09:14Z

Poseyg:

How to Use the Custom Code Settings

2011-11-17T04:07:28Z

Poseyg: /* Add Custom Code */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

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

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

==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:Addcode.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;}
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.

==The Difference Between the PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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

==Activate the Pagelines Customize Plugin==
[[File:Customizeplugin.png|200px|thumb|right|alt=Customize Plugin|Add Plugin]]

# Go to your PageLines Settings
# Click on the "Store" tab
# Click on the "Plugins" tab
# Click on the "Add Plugins" tab
# Click on the "Top Free" tab
# Find the "Pagelines Customize" plugin and click Activate
# The physical path to the style.css is (wp-content\plugins\pagelines-customize)
# Repeat the process to activate the "Child Editor" plugin

==How To Activate the Child Editor [[File:Childeditor.png|200px|thumb|right|alt=Custom Code|Custom Code]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "style.css"
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)

==Using the Child Editor to edit files==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify. [[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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

==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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

How to Use the Custom Code Settings

2011-11-17T04:06:31Z

Poseyg: /* Add Custom Code */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

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

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

==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:Addcode.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;}
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.
4 To add script, simply paste the desired script into the header or footer sections of the Custom CSS Section.
5 To add Google Analytics, simply copy the Google script from your Google Analytics account into the Google section of the panel.
6 Next, click the "Save Options" button in the upper right hand corner.

==The Difference Between the PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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

==Activate the Pagelines Customize Plugin==
[[File:Customizeplugin.png|200px|thumb|right|alt=Customize Plugin|Add Plugin]]

# Go to your PageLines Settings
# Click on the "Store" tab
# Click on the "Plugins" tab
# Click on the "Add Plugins" tab
# Click on the "Top Free" tab
# Find the "Pagelines Customize" plugin and click Activate
# The physical path to the style.css is (wp-content\plugins\pagelines-customize)
# Repeat the process to activate the "Child Editor" plugin

==How To Activate the Child Editor [[File:Childeditor.png|200px|thumb|right|alt=Custom Code|Custom Code]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "style.css"
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)

==Using the Child Editor to edit files==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify. [[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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

==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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

How to Use the Custom Code Settings

2011-11-17T04:05:16Z

Poseyg: /* Add Custom Code */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

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

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

==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:Addcode.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:
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.

==The Difference Between the PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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

==Activate the Pagelines Customize Plugin==
[[File:Customizeplugin.png|200px|thumb|right|alt=Customize Plugin|Add Plugin]]

# Go to your PageLines Settings
# Click on the "Store" tab
# Click on the "Plugins" tab
# Click on the "Add Plugins" tab
# Click on the "Top Free" tab
# Find the "Pagelines Customize" plugin and click Activate
# The physical path to the style.css is (wp-content\plugins\pagelines-customize)
# Repeat the process to activate the "Child Editor" plugin

==How To Activate the Child Editor [[File:Childeditor.png|200px|thumb|right|alt=Custom Code|Custom Code]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "style.css"
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)

==Using the Child Editor to edit files==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify. [[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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

==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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

How to Use the Custom Code Settings

2011-11-17T04:04:04Z

Poseyg: /* Add Custom Code */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

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

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

==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:Addcode.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;}

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.

==The Difference Between the PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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

==Activate the Pagelines Customize Plugin==
[[File:Customizeplugin.png|200px|thumb|right|alt=Customize Plugin|Add Plugin]]

# Go to your PageLines Settings
# Click on the "Store" tab
# Click on the "Plugins" tab
# Click on the "Add Plugins" tab
# Click on the "Top Free" tab
# Find the "Pagelines Customize" plugin and click Activate
# The physical path to the style.css is (wp-content\plugins\pagelines-customize)
# Repeat the process to activate the "Child Editor" plugin

==How To Activate the Child Editor [[File:Childeditor.png|200px|thumb|right|alt=Custom Code|Custom Code]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "style.css"
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)

==Using the Child Editor to edit files==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify. [[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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

==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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

File:Addcode.png

2011-11-17T04:02:55Z

Poseyg:

How to Use the Custom Code Settings

2011-11-17T03:56:03Z

Poseyg: /* How To Activate the Child Editor 200px|thumb|right|alt=Custom Code|Custom Code */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

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

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

==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. [[File:Custom-css2.png|200px|thumb|right|alt=Custom Code|Custom Code]]
# 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;}

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.

==The Difference Between the PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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

==Activate the Pagelines Customize Plugin==
[[File:Customizeplugin.png|200px|thumb|right|alt=Customize Plugin|Add Plugin]]

# Go to your PageLines Settings
# Click on the "Store" tab
# Click on the "Plugins" tab
# Click on the "Add Plugins" tab
# Click on the "Top Free" tab
# Find the "Pagelines Customize" plugin and click Activate
# The physical path to the style.css is (wp-content\plugins\pagelines-customize)
# Repeat the process to activate the "Child Editor" plugin

==How To Activate the Child Editor [[File:Childeditor.png|200px|thumb|right|alt=Custom Code|Custom Code]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "style.css"
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)

==Using the Child Editor to edit files==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify. [[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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

==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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

How to Use the Custom Code Settings

2011-11-17T03:55:24Z

Poseyg: /* How To Activate the Child Editor 200px|thumb|right|alt=Custom Code|Custom Code */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

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

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

==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. [[File:Custom-css2.png|200px|thumb|right|alt=Custom Code|Custom Code]]
# 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;}

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.

==The Difference Between the PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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

==Activate the Pagelines Customize Plugin==
[[File:Customizeplugin.png|200px|thumb|right|alt=Customize Plugin|Add Plugin]]

# Go to your PageLines Settings
# Click on the "Store" tab
# Click on the "Plugins" tab
# Click on the "Add Plugins" tab
# Click on the "Top Free" tab
# Find the "Pagelines Customize" plugin and click Activate
# The physical path to the style.css is (wp-content\plugins\pagelines-customize)
# Repeat the process to activate the "Child Editor" plugin

==How To Activate the Child Editor [[File:Childeditor.png|200px|thumb|right|alt=Custom Code|Custom Code]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "style.css" From your WordPress Administration Panel:
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)

==Using the Child Editor to edit files==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify. [[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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

==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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

How to Use the Custom Code Settings

2011-11-17T03:54:36Z

Poseyg: /* Activate the Pagelines Customize Plugin */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

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

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

==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. [[File:Custom-css2.png|200px|thumb|right|alt=Custom Code|Custom Code]]
# 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;}

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.

==The Difference Between the PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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

==Activate the Pagelines Customize Plugin==
[[File:Customizeplugin.png|200px|thumb|right|alt=Customize Plugin|Add Plugin]]

# Go to your PageLines Settings
# Click on the "Store" tab
# Click on the "Plugins" tab
# Click on the "Add Plugins" tab
# Click on the "Top Free" tab
# Find the "Pagelines Customize" plugin and click Activate
# The physical path to the style.css is (wp-content\plugins\pagelines-customize)
# Repeat the process to activate the "Child Editor" plugin

==How To Activate the Child Editor [[File:Childeditor.png|200px|thumb|right|alt=Custom Code|Custom Code]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "styles.css" From your WordPress Administration Panel:
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)

==Using the Child Editor to edit files==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify. [[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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

==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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

How to Use the Custom Code Settings

2011-11-17T03:51:08Z

Poseyg: /* What is CSS? */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

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

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

==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. [[File:Custom-css2.png|200px|thumb|right|alt=Custom Code|Custom Code]]
# 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;}

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.

==The Difference Between the PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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

==Activate the Pagelines Customize Plugin==
[[File:Customizeplugin.png|200px|thumb|right|alt=Customize Plugin|Add Plugin]]

# Go to your PageLines Settings
# Click on the "Store" tab
# Click on the "Plugins" tab
# Click on the "Add Plugins" tab
# Click on the "Top Free" tab
# Find the "Pagelines Customize" plugin and click Activate
# Repeat the process to activate the "Child Editor" plugin

==How To Activate the Child Editor [[File:Childeditor.png|200px|thumb|right|alt=Custom Code|Custom Code]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "styles.css" From your WordPress Administration Panel:
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)

==Using the Child Editor to edit files==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify. [[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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

==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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

How to Use the Custom Code Settings

2011-11-17T03:50:39Z

Poseyg: /* The CSS Hierarchy */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

==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. [[File:Custom-css2.png|200px|thumb|right|alt=Custom Code|Custom Code]]
# 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;}

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.

==The Difference Between the PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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

==Activate the Pagelines Customize Plugin==
[[File:Customizeplugin.png|200px|thumb|right|alt=Customize Plugin|Add Plugin]]

# Go to your PageLines Settings
# Click on the "Store" tab
# Click on the "Plugins" tab
# Click on the "Add Plugins" tab
# Click on the "Top Free" tab
# Find the "Pagelines Customize" plugin and click Activate
# Repeat the process to activate the "Child Editor" plugin

==How To Activate the Child Editor [[File:Childeditor.png|200px|thumb|right|alt=Custom Code|Custom Code]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "styles.css" From your WordPress Administration Panel:
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)

==Using the Child Editor to edit files==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify. [[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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

==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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

How to Use the Custom Code Settings

2011-11-17T03:49:22Z

Poseyg: /* Using the Child Editor to edit files */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

==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. [[File:Custom-css2.png|200px|thumb|right|alt=Custom Code|Custom Code]]
# 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;}

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.

==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 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 PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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

==Activate the Pagelines Customize Plugin==
[[File:Customizeplugin.png|200px|thumb|right|alt=Customize Plugin|Add Plugin]]

# Go to your PageLines Settings
# Click on the "Store" tab
# Click on the "Plugins" tab
# Click on the "Add Plugins" tab
# Click on the "Top Free" tab
# Find the "Pagelines Customize" plugin and click Activate
# Repeat the process to activate the "Child Editor" plugin

==How To Activate the Child Editor [[File:Childeditor.png|200px|thumb|right|alt=Custom Code|Custom Code]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "styles.css" From your WordPress Administration Panel:
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)

==Using the Child Editor to edit files==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify. [[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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

==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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

How to Use the Custom Code Settings

2011-11-17T03:48:31Z

Poseyg: /* Using Google's Chrome To Change Padding of an element */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

==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. [[File:Custom-css2.png|200px|thumb|right|alt=Custom Code|Custom Code]]
# 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;}

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.

==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 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 PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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

==Activate the Pagelines Customize Plugin==
[[File:Customizeplugin.png|200px|thumb|right|alt=Customize Plugin|Add Plugin]]

# Go to your PageLines Settings
# Click on the "Store" tab
# Click on the "Plugins" tab
# Click on the "Add Plugins" tab
# Click on the "Top Free" tab
# Find the "Pagelines Customize" plugin and click Activate
# Repeat the process to activate the "Child Editor" plugin

==How To Activate the Child Editor [[File:Childeditor.png|200px|thumb|right|alt=Custom Code|Custom Code]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "styles.css" From your WordPress Administration Panel:
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)

==Using the Child Editor to edit files==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify. [[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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

How to Use the Custom Code Settings

2011-11-17T03:48:15Z

Poseyg: /* Using Firebug To Change Padding of an element */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

==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. [[File:Custom-css2.png|200px|thumb|right|alt=Custom Code|Custom Code]]
# 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;}

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.

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "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 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 PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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

==Activate the Pagelines Customize Plugin==
[[File:Customizeplugin.png|200px|thumb|right|alt=Customize Plugin|Add Plugin]]

# Go to your PageLines Settings
# Click on the "Store" tab
# Click on the "Plugins" tab
# Click on the "Add Plugins" tab
# Click on the "Top Free" tab
# Find the "Pagelines Customize" plugin and click Activate
# Repeat the process to activate the "Child Editor" plugin

==How To Activate the Child Editor [[File:Childeditor.png|200px|thumb|right|alt=Custom Code|Custom Code]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "styles.css" From your WordPress Administration Panel:
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)

==Using the Child Editor to edit files==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify. [[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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

How to Use the Custom Code Settings

2011-11-17T03:48:00Z

Poseyg: /* How to use CSS Inspection Tools */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

==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. [[File:Custom-css2.png|200px|thumb|right|alt=Custom Code|Custom Code]]
# 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;}

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.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "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 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 PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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

==Activate the Pagelines Customize Plugin==
[[File:Customizeplugin.png|200px|thumb|right|alt=Customize Plugin|Add Plugin]]

# Go to your PageLines Settings
# Click on the "Store" tab
# Click on the "Plugins" tab
# Click on the "Add Plugins" tab
# Click on the "Top Free" tab
# Find the "Pagelines Customize" plugin and click Activate
# Repeat the process to activate the "Child Editor" plugin

==How To Activate the Child Editor [[File:Childeditor.png|200px|thumb|right|alt=Custom Code|Custom Code]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "styles.css" From your WordPress Administration Panel:
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)

==Using the Child Editor to edit files==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify. [[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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

How to Use the Custom Code Settings

2011-11-17T03:45:35Z

Poseyg: /* Activate the Pagelines Customize Plugin */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

==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. [[File:Custom-css2.png|200px|thumb|right|alt=Custom Code|Custom Code]]
# 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;}

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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "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 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 PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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

==Activate the Pagelines Customize Plugin==
[[File:Customizeplugin.png|200px|thumb|right|alt=Customize Plugin|Add Plugin]]

# Go to your PageLines Settings
# Click on the "Store" tab
# Click on the "Plugins" tab
# Click on the "Add Plugins" tab
# Click on the "Top Free" tab
# Find the "Pagelines Customize" plugin and click Activate
# Repeat the process to activate the "Child Editor" plugin

==How To Activate the Child Editor [[File:Childeditor.png|200px|thumb|right|alt=Custom Code|Custom Code]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "styles.css" From your WordPress Administration Panel:
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)

==Using the Child Editor to edit files==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify. [[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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

How to Use the Custom Code Settings

2011-11-17T03:43:08Z

Poseyg: /* The Difference Between the PageLines Customize plugin & the Custom CSS section */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

==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. [[File:Custom-css2.png|200px|thumb|right|alt=Custom Code|Custom Code]]
# 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;}

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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "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 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 PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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

==Activate the Pagelines Customize Plugin==
[[File:Customizeplugin.png|200px|thumb|right|alt=Customize Plugin|Add Plugin]]

# From the WordPress Admin click on the "PageLines" tab
# Click on the "Store" tab
# Click on the "Plugins" tab
# Click on the "Add Plugins" tab
# Click on the "Top Free" tab
# Find the "Pagelines Customize" plugin and click Activate
# Repeat the process to activate the "Child Editor" plugin

==How To Activate the Child Editor [[File:Childeditor.png|200px|thumb|right|alt=Custom Code|Custom Code]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "styles.css" From your WordPress Administration Panel:
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)

==Using the Child Editor to edit files==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify. [[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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

File:Customizeplugin.png

2011-11-17T03:40:54Z

Poseyg:

How to Use the Custom Code Settings

2011-11-15T02:12:35Z

Poseyg: /* Using the Child Editor plugin to edit files created by the PageLines Customize Plugin */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

==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. [[File:Custom-css2.png|200px|thumb|right|alt=Custom Code|Custom Code]]
# 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;}

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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "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 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 PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "styles.css" From your WordPress Administration Panel:
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)

==Using the Child Editor to edit files==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify. [[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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

How to Use the Custom Code Settings

2011-11-15T02:11:36Z

Poseyg: /* Add Custom Code */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

==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. [[File:Custom-css2.png|200px|thumb|right|alt=Custom Code|Custom Code]]
# 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;}

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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "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 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 PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "styles.css" From your WordPress Administration Panel:
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)

==Using the Child Editor plugin to edit files created by the PageLines Customize Plugin==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify. [[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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

How to Use the Custom Code Settings

2011-11-15T02:10:45Z

Poseyg: /* Add Custom Code */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

==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;}
[[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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "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 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 PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "styles.css" From your WordPress Administration Panel:
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)

==Using the Child Editor plugin to edit files created by the PageLines Customize Plugin==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify. [[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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

How to Use the Custom Code Settings

2011-11-15T02:10:11Z

Poseyg: /* Add Custom Code */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

==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;}[[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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "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 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 PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "styles.css" From your WordPress Administration Panel:
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)

==Using the Child Editor plugin to edit files created by the PageLines Customize Plugin==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify. [[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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

How to Use the Custom Code Settings

2011-11-14T21:54:43Z

Poseyg: /* Using the Child Editor plugin to edit files created by the PageLines Customize Plugin 200px|thumb|right|alt=Child Editor|Child Editor */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

==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;}
[[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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "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 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 PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "styles.css" From your WordPress Administration Panel:
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)

==Using the Child Editor plugin to edit files created by the PageLines Customize Plugin==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify. [[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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

How to Use the Custom Code Settings

2011-11-14T21:53:57Z

Poseyg: /* How To Activate the Child Editor 200px|thumb|right|alt=Custom Code|Custom Code */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

==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;}
[[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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "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 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 PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "styles.css" From your WordPress Administration Panel:
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)

==Using the Child Editor plugin to edit files created by the PageLines Customize Plugin [[File:EditingStyle-ChildEditor.png|200px|thumb|right|alt=Child Editor|Child Editor]]==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify.
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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

How to Use the Custom Code Settings

2011-11-14T21:53:02Z

Poseyg: /* Using the Child Editor plugin to edit files created by the PageLines Customize Plugin200px|thumb|right|alt=Child Editor|Child Editor */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

==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;}
[[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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "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 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 PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "styles.css" From your WordPress Administration Panel:
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)

==Using the Child Editor plugin to edit files created by the PageLines Customize Plugin== [[File:EditingStyle-ChildEditor.png|200px|thumb|right|alt=Child Editor|Child Editor]]
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify.
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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

How to Use the Custom Code Settings

2011-11-14T21:52:03Z

Poseyg: /* Other Functions of Child Editor Plugin200px|thumb|right|alt=Child Editor|Other Uses */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

==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;}
[[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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "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 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 PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "styles.css" From your WordPress Administration Panel:
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)

==Using the Child Editor plugin to edit files created by the PageLines Customize Plugin[[File:EditingStyle-ChildEditor.png|200px|thumb|right|alt=Child Editor|Child Editor]]==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify.
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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

How to Use the Custom Code Settings

2011-11-14T20:57:16Z

Poseyg: /* Add Custom Code */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

==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;}
[[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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "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 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 PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "styles.css" From your WordPress Administration Panel:
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)

==Using the Child Editor plugin to edit files created by the PageLines Customize Plugin[[File:EditingStyle-ChildEditor.png|200px|thumb|right|alt=Child Editor|Child Editor]]==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify.
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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

How to Use the Custom Code Settings

2011-11-14T20:56:04Z

Poseyg: /* Add Custom Code */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

==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;}
[[File:Custom-css2.png|200px|thumb|right|alt=Custom Code|Custom Code]]
<h2>Other Features of the Custom Code Panel</h2>
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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "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 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 PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "styles.css" From your WordPress Administration Panel:
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)

==Using the Child Editor plugin to edit files created by the PageLines Customize Plugin[[File:EditingStyle-ChildEditor.png|200px|thumb|right|alt=Child Editor|Child Editor]]==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify.
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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

How to Use the Custom Code Settings

2011-11-14T20:55:20Z

Poseyg: /* Other Features of the Custom Code Panel200px|thumb|right|alt=Custom Code|Custom Code */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

==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;}

<h2>Other Features of the Custom Code Panel</h2>
[[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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "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 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 PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "styles.css" From your WordPress Administration Panel:
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)

==Using the Child Editor plugin to edit files created by the PageLines Customize Plugin[[File:EditingStyle-ChildEditor.png|200px|thumb|right|alt=Child Editor|Child Editor]]==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify.
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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

How to Use the Custom Code Settings

2011-11-14T20:54:23Z

Poseyg: /* Add Custom Code */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

==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;}

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

==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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "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 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 PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "styles.css" From your WordPress Administration Panel:
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)

==Using the Child Editor plugin to edit files created by the PageLines Customize Plugin[[File:EditingStyle-ChildEditor.png|200px|thumb|right|alt=Child Editor|Child Editor]]==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify.
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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

How to Use the Custom Code Settings

2011-11-14T20:53:11Z

Poseyg: /* Add Custom Code */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

==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;}

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

==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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "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 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 PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "styles.css" From your WordPress Administration Panel:
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)

==Using the Child Editor plugin to edit files created by the PageLines Customize Plugin[[File:EditingStyle-ChildEditor.png|200px|thumb|right|alt=Child Editor|Child Editor]]==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify.
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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin

How to Use the Custom Code Settings

2011-11-14T20:51:42Z

Poseyg: /* Other Functions of Child Editor Plugin200px|thumb|right|alt=Child Editor|Other Uses */

[[Category:New Page]]
One of the most dynamic features of Pagelines is the ability to modify or add Custom CSS to your site.

==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]]
From Mozilla Firefox:
# Go to http://getfirebug.com/
# Download and install the Firebug extension
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.

==Using Firebug To Change Padding of an element==
[[File:Usingfirebugchangecss.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Firebug]]
From Mozilla Firefox:
# Go to your site
# Click on the Firebug icon in the upper right-hand corner of your browser
# Click on the Inspection icon on the Firebug interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "Save Options" and refresh your browser to see the changes

==Using Google's Chrome To Change Padding of an element==
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
From Google Chrome: (The CSS Inspection Tool is built into Chrome)
# Go to your site
# Right Click anywhere on the page and then click "Inspect Element"
# Click on the Inspection icon on the bottom row of the Inspection interface
# 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
# Copy the CSS code you are wanting to change
# Return to the Pagelines Settings and select "Custom CSS"
# Paste the CSS code that is being altered into the Custom CSS section
# "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 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 PageLines Customize plugin & the Custom CSS section ==
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.

The PageLines Customize 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 PageLines Customize 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]] ==
Once the PageLines Customize plugin has been installed and activated, you can use the Child Editor plugin to modify the "styles.css" From your WordPress Administration Panel:
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)

==Using the Child Editor plugin to edit files created by the PageLines Customize Plugin[[File:EditingStyle-ChildEditor.png|200px|thumb|right|alt=Child Editor|Child Editor]]==
Note: You must install and activate the PageLines Customize plugin in order for the Child Editor to have something to modify.
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" created by the PageLines Customize plugin
# It also allows you edit the site's "Page Base" theme created by the PageLines Customize plugin