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)
(Custom CSS)
 
(14 intermediate revisions by one user not shown)
Line 1: Line 1:
[[Category:New Page]]
+
__NOTOC__
The Custom Code settings is where you can customize your site beyond what's available in 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:
  
Line 8: Line 10:
  
 
==Custom CSS==
 
==Custom CSS==
This setting is a simple quick way to add custom styles to your site without having to edit any css files.
+
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.'''
  
[[File:Addcode2.png|200px|thumb|right|alt=Custom Code Panel|Custom Code Panel]]
 
 
# Enter the Custom CSS code you want to use to modify or add a specific CSS rule
 
# 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;}
 
#* For example, to change the margin at the top of your page: You would add, body {padding-top: 15px;}
 
# Click "Save Options"
 
# Click "Save Options"
  
Even though using this Custom CSS setting will give you the results you are looking for, it is generally not considered to be the "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 the [[Glossary#PageLines Customize Plugin|PageLines Customize Plugin]], available for free in the [[Glossary#Store|PageLines Store.]]<br /><br />
+
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 [[CSS Customization]]
+
For more information on CSS & how it relates to PageLines 2.0, click on [[Custom CSS]]
  
 
==Header Scripts==
 
==Header Scripts==

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"