The PageLines Customize Plugin is recommended for users who have moderate knowledge customizing sites using HTML/CSS, and PHP.
The plugin contains both style.css
, and functions.php
files like a child theme. It also supports style.less
, hooks and localizations with the creation of a language folder.
However, you're unable to override sections with the Customize Plugin. If you do plan on overriding sections, you will need to use the Base Theme method instead.
Safe from updates | CSS/LESS | Hooks | Override Sections |
---|---|---|---|
Once installed and activated, the PageLines Customize Plugin folder will be located here: wp-content → plugins → pagelines-customize, and contains the following files:
pagelines-customize/ functions.php pagelines-customize.php style.css thumb.png
There are two principal methods for adding custom CSS to the PageLines Customize Plugin, these are: the style.css
file and the style.less
file. Each method applies to individual levels of skill -- based on your comfort level and proficiency, which we'll go through below.
Stylesheet | Supports CSS | Supports LESS |
---|---|---|
style.css | ||
style.less |
As you can see from the table above, the style.css
file only supports standard CSS and not less. However, the style.less
file supports both, if you do plan to utilize LESS into your design, we recommend consolidating all your CSS into the style.less
file, for easier management of your code.
To add custom CSS to the style.css file, we recommend not using the WordPress Editor, but instead use your FTP client which should be configured to work with your code editor when opening .css
, .html
, .php
files.
When you open the style.css file in your code editor, you see the following:
/* ============================== */
/* = HOW TO CUSTOMIZE PAGELINES = */
/* ============================== */
/*
Rules placed in this stylesheet will override the default styles of the Base Platform theme and will not be changed or over written when you update the
Platform framework. Additionally, since this stylesheet is purely for editing purposes you can easily undo or erase some of the CSS to return your site back to the look and feel of the Base theme.
In the Base theme the footer is black and the CSS looks like this:
#footer {
clear:both;
font-size:1em;
overflow:hidden;
text-align: left;
background: #000;
color: #999;
position: relative;
}
To change the background color to white, all you have to do is declare a new rule for the color like so:
#footer { background: #FFF; }
A great tool for modifying themes and inspecting CSS elements is the FireBug extension for FireFox. You can also use the developer tools provided by Chrome (right-click and "inspect element") or Internet Explorer if you're feeling dangerous.
LEARN CSS - We recommend using Lynda.com video tutorials to learn using CSS.
Also, for a comprehensive list of CSS rules and usage try consulting W3 schools @ http://www.w3schools.com/css/default.asp
*/
/* ============================== */
/* = Start Your Custom CSS Here = */
/* ============================== */
The information you see above isn't required and can be removed if you like. Once your custom CSS has been added, save the file and if your FTP client is configured correctly, it should upload the file to your server, replacing the older style.css. Refresh your website and your changes should have taken effect.
In order to use the style.less method, you will first need to create a style.less file, see our Adding LESS Support page on how to do this. Once the style.less
file has been created you're now able to add both CSS and LESS CSS to the Base Theme.
For more information about LESS CSS , see our LESS CSS documentation which also includes some examples.
The functions.php file allows you to add/manipulate functionality to PageLines DMS. You can use it to call functions and to define your own customized actions. The code is only executed when the PageLines Customized Plugin is activated, if the plugin is deactivated, the functionality will not carry over. The functions.php
file supports numerous blocks of code to be used for many different purposes.
For more information about hooks, see our Hooks documentation which also includes some examples.