Docs

Custom CSS

[edit] Please Note

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

(Difference between revisions)
(→The CSS Hierarchy)
(→The CSS Hierarchy)
Line 26: Line 26:
 
When a PageLines 2.0 webpage loads, there is an order (hierarchy) by which the CSS of that page is loaded:
 
When a PageLines 2.0 webpage loads, there is an order (hierarchy) by which the CSS of that page is loaded:
 
# The framework's core CSS files ('''style.css,''' '''objects.css,''' etc...)  
 
# The framework's core CSS files ('''style.css,''' '''objects.css,''' etc...)  
−
# The "dynamic.css" will load second
+
# Any active sections containing their own '''style.css'''
−
# CSS added to the "Custom Code" settings will load next
+
# Child themes '''style.css'''
−
# If the [[Glossary#PageLines Customize Plugin|PageLines Customize Plugin]] is activated, it will load last
+
# '''dynamic.css''' (This included CSS added to the "Custom Code" settings)
 +
# If activated, the '''style.css''' located in the [[Glossary#PageLines Customize Plugin|PageLines Customize Plugin]]
 
It is important to keep this hierarchy in mind because the CSS that loads last will take priority over any CSS loaded before it.
 
It is important to keep this hierarchy in mind because the CSS that loads last will take priority over any CSS loaded before it.
  

Revision as of 05:58, 2 December 2011

Contents

What is CSS?

CSS Solved a Big Problem

HTML was intended to define the content of a document, not to contain tags for formatting the document. For example:

<h3 style="color: red">This is an h3 heading with a Red color style</h3>

would output:

This is an h3 heading with a Red color style


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 PageLines 2.0 webpage loads, there is an order (hierarchy) by which the CSS of that page is loaded:

  1. The framework's core CSS files (style.css, objects.css, etc...)
  2. Any active sections containing their own style.css
  3. Child themes style.css
  4. dynamic.css (This included CSS added to the "Custom Code" settings)
  5. If activated, the style.css located in the PageLines Customize Plugin

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

How to use CSS Inspection Tools

Installing Firebug

There are a couple of FREE CSS Inspection Tools which can be used to do this. They are Firebug and Google's Chrome Inspection tool.

Install Firebug
Install Firebug

From Mozilla Firefox:

  1. Go to http://getfirebug.com/
  2. Download and install the Firebug extension
  3. Once installed you will see the Firebug icon in the upper right-hand corner of Firefox.


Using Firebug To Change Padding of an element

Selecting elements
Selecting elements with Firebug

From Mozilla Firefox:

  1. Go to your site
  2. Click on the Firebug icon in the upper right-hand corner of your browser
  3. Click on the Inspection icon on the Firebug interface
  4. Next, click on the section of the page to be inspected
  5. Upon clicking any element you will see the corresponding HTML and CSS code highlighted in Firebug
  6. Copy the CSS code you are wanting to change
  7. Return to the Pagelines Settings and select "Custom CSS"
  8. Paste the CSS code that is being altered into the Custom CSS section
  9. "Save Options" and refresh your browser to see the changes


Using Google's Chrome To Change Padding of an element

Selecting elements
Selecting elements with Chrome's Inspection Tool

From Google Chrome: (The CSS Inspection Tool is built into Chrome)

  1. Go to your site
  2. Right Click anywhere on the page and then click "Inspect Element"
  3. Click on the Inspection icon on the bottom row of the Inspection interface
  4. Next, click on the section of the page to be inspected
  5. Upon clicking any element you will see the corresponding HTML and CSS code highlighted in Firebug
  6. Copy the CSS code you are wanting to change
  7. Return to the Pagelines Settings and select "Custom CSS"
  8. Paste the CSS code that is being altered into the Custom CSS section
  9. "Save Options" and refresh your browser to see the changes
Retrieved from "http://www.pagelines.com/wiki/index.php?title=Custom_CSS&oldid=3466"