Docs

How to Use the Custom Code Settings

[edit] Please Note

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

(Difference between revisions)
 
(39 intermediate revisions by one user not shown)
Line 1: Line 1:
−
[[Category:New Page]]
+
__NOTOC__
−
The Custom Code area is where you can customize your site beyond the limits of the PageLines 2.0 options. It would be easy to add tons of theme options to every little thing in your site; but when trying to customize colors, shapes, text, and control each entity’s size… options aren’t always the best solution. This is because you could add 20 options just to control one block of text; so adding options for everything leads to an overly-complicated product.
+
[[Category:Framework]]
 +
The Custom Code settings is one of the three ways you can add custom [[Glossary#CSS|CSS]] to your site. The other methods for adding custom CSS are the [[Glossary#PageLines Customize Plugin|PageLines Customize Plugin]] & the [[Glossary#Base Theme|Base Theme.]] You also use the Custom Code Settings to add Header & Footer scripts and Analytics.
 
<br /><br />
 
<br /><br />
 +
[[File:Custom-Code.png|200px|thumb|right|alt=Custom Code|Custom Code]]
 
From your WordPress Administration Panel:
 
From your WordPress Administration Panel:
  
 
# Select the "PageLines" panel, then "Settings"
 
# Select the "PageLines" panel, then "Settings"
 +
# Select the "Custom Code" tab to show the following options:
  
 
==Custom CSS==
 
==Custom CSS==
−
Custom CSS is by far the best way to customize your site.
+
This setting is a simple quick way to add custom styles to your site without having to edit any css files. Anything you enter here will be saved to your database. '''Always remember to backup your database.'''
  
 +
# 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;}
 +
# Click "Save Options"
  
 +
Even though using this Custom CSS setting will give you the results you are looking for, is easy to use, and is considered perfectly safe, it is not necessarily considered to be the best, or most "professional" method for adding CSS to your site. If you are adding more than just a few simple lines of CSS, and would like to use a more professional approach, we recommend using either the [[Glossary#PageLines Customize Plugin|PageLines Customize Plugin]] or the [[Glossary#Base Theme|Base Theme,]] both available for free in the [[Glossary#Store|PageLines Store.]]<br /><br />
 +
For more information on CSS & how it relates to PageLines 2.0, click on [[Custom CSS]]
  
−
The below example shows how to add or modify a site's CSS. Follow similar steps for all Custom CSS.
+
==Header Scripts==
−
From your WordPress Administration Panel:
+
This is where you add any scripts you may have such as JavaScript. The script will be inserted directly before the end of the HTML </head> tag
  
−
# Under Pagelines, select the "Custom Code" panel.[[File:Addcode2.png|200px|thumb|right|alt=Custom Code Panel|Custom Code Panel]]
+
# Enter your Header script into the text area
−
# In the CSS Rules box, enter the Custom CSS code you want to use to modify or add a specific CSS rule
+
# Click "Save Options"
−
# 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 [[Glossary#Google Analytics|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 ==
+
==Footer Scripts & Analytics==
−
The "Custom CSS" section is a simple quick way to add custom styles to your current site design.
+
This is where you insert any footer script, including Google Analytics.
−
 
+
<br /><br />
−
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.
+
For more information, click on [http://www.google.com/analytics/ http://www.google.com/analytics]  
−
<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
+
  
 +
# Enter your Footer script and any Analytics script into the text area
 +
# Click "Save Options"
  
 +
==Asynchronous Analytics==
 +
This is the placeholder for Google asynchronous analytics. It goes underneath body tag.
 +
<br /><br />For more information, click on
 +
[http://code.google.com/apis/analytics/docs/tracking/asyncUsageGuide.html http://code.google.com/apis/analytics/docs/tracking/asyncUsageGuide.html]
  
−
==Using Google's Chrome To Change Padding of an element==
+
# Copy the Asynchronous Analytics script from your Google Analytics account into the text area
−
[[File:UsingchromeInspectiontool.png|200px|thumb|right|alt=Selecting elements|Selecting elements with Chrome's Inspection Tool]]
+
# Click "Save Options"
−
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
+

Latest revision as of 21:15, 18 January 2012

The Custom Code settings is one of the three ways you can add custom CSS to your site. The other methods for adding custom CSS are the PageLines Customize Plugin & the Base Theme. You also use the Custom Code Settings to add Header & Footer scripts and Analytics.

Custom Code
Custom Code

From your WordPress Administration Panel:

  1. Select the "PageLines" panel, then "Settings"
  2. Select the "Custom Code" tab to show the following options:

[edit] Custom CSS

This setting is a simple quick way to add custom styles to your site without having to edit any css files. Anything you enter here will be saved to your database. Always remember to backup your database.

  1. 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;}
  2. Click "Save Options"

Even though using this Custom CSS setting will give you the results you are looking for, is easy to use, and is considered perfectly safe, it is not necessarily considered to be the best, or most "professional" method for adding CSS to your site. If you are adding more than just a few simple lines of CSS, and would like to use a more professional approach, we recommend using either the PageLines Customize Plugin or the Base Theme, both available for free in the PageLines Store.

For more information on CSS & how it relates to PageLines 2.0, click on Custom CSS

[edit] Header Scripts

This is where you add any scripts you may have such as JavaScript. The script will be inserted directly before the end of the HTML </head> tag

  1. Enter your Header script into the text area
  2. Click "Save Options"

[edit] Footer Scripts & Analytics

This is where you insert any footer script, including Google Analytics.

For more information, click on http://www.google.com/analytics

  1. Enter your Footer script and any Analytics script into the text area
  2. Click "Save Options"

[edit] Asynchronous Analytics

This is the placeholder for Google asynchronous analytics. It goes underneath body tag.

For more information, click on http://code.google.com/apis/analytics/docs/tracking/asyncUsageGuide.html

  1. Copy the Asynchronous Analytics script from your Google Analytics account into the text area
  2. Click "Save Options"
Retrieved from "http://www.pagelines.com/wiki/index.php?title=How_to_Use_the_Custom_Code_Settings&oldid=3942"