Custom CSS
(→The CSS Hierarchy) |
|||
| (6 intermediate revisions by one user not shown) | |||
| Line 27: | Line 27: | ||
# The framework's core CSS files ('''style.css,''' '''objects.css,''' etc...) | # The framework's core CSS files ('''style.css,''' '''objects.css,''' etc...) | ||
# Any active sections containing their own '''style.css''' | # Any active sections containing their own '''style.css''' | ||
| − | # Child themes '''style.css''' | + | # Child themes '''style.css''' (This includes the [[Glossary#Base Theme|"Base Theme,"]] if activated) |
| − | # The '''dynamic.css''' (This includes CSS added to the "Custom Code" settings) | + | # The '''dynamic.css''' (This includes CSS added to the [[Glossary#Custom Code Settings|"Custom Code"]] settings) |
#* dynamic.css is stored in your site's database. | #* dynamic.css is stored in your site's database. | ||
# If activated, the '''style.css''' located in the [[Glossary#PageLines Customize Plugin|PageLines Customize Plugin]] | # 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 similar CSS loaded before it. |
==How to use CSS Inspection Tools== | ==How to use CSS Inspection Tools== | ||
| Line 46: | Line 46: | ||
# Download and install the Firebug extension | # Download and install the Firebug extension | ||
# Once installed you will see the Firebug icon in the upper right-hand corner of Firefox. | # Once installed you will see the Firebug icon in the upper right-hand corner of Firefox. | ||
| + | |||
| + | {{#ev:vimeo|9714142|600|How to use Firebug to your advantage}} | ||
| + | |||
===Use Firebug To Change Padding of an element=== | ===Use Firebug To Change Padding of an element=== | ||
Latest revision as of 21:47, 7 March 2012
Contents |
What is CSS?
- CSS stands for Cascading Style Sheets
- Styles Sheets define how to display HTML elements
- They were created to do the job that HTML was never intended to do
- They can save a lot of time & work
- Go to http://www.w3schools.com/css/ to find out more
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:
- The framework's core CSS files (style.css, objects.css, etc...)
- Any active sections containing their own style.css
- Child themes style.css (This includes the "Base Theme," if activated)
- The dynamic.css (This includes CSS added to the "Custom Code" settings)
- dynamic.css is stored in your site's database.
- 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 similar CSS loaded before it.
How to use CSS Inspection Tools
CSS Inspection Tools are essential for isolating the exact selector you need to make the changes you want. Simply turn on Inspection Mode, hover your mouse over the element you want to change, and it will display the name of the selector that you need to add to your custom CSS. There are a couple of FREE CSS Inspection Tools which can be used to do this.
- Firebug - An add-on for Mozilla Firefox
- Google's Chrome internal Inspection tool
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.
Use Firebug To Change Padding of an element
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 Code"
- Or edit style.css inside the PageLines Customize Plugin
- Paste the CSS code that is being altered into the Custom CSS section
- "Save Options" and refresh your browser to see the changes
Use Google Chrome's Inspection Tool To Change Padding of an element
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 Code"
- Or edit style.css inside the PageLines Customize Plugin
- Paste the CSS code that is being altered into the Custom CSS section
- "Save Options" and refresh your browser to see the changes