Embed Size (px)
DESCRIPTION
WordPress is an extremely powerful content management system, but there will always be instances where customizing your stylesheet to meet the needs and/or requirements of the designer, developer or client will make your blog or website more appealing. This is where CSS comes into play. In order to make edits you first must understand the anatomy of the stylesheet. This workshop will provide you an overview of each component and how it outputs in the browser so that you can easily tackle the task of modifying your WordPress stylesheet using CSS.
Citation preview
The Anatomy ofa WordPress CSS File
WordCamp 2014April 14 – 15, 2014
Atlanta, Georgia
2
What We Will Discuss
• Cascading Style Sheets• Theme Styling Options • Primary Edit Files• Identifying Edit Requirements• Inspecting the Element• Locating Edit Files• Editing the Code• Viewing the Results
3
CSS Styling Options
• Theme Options• Built In Custom Fields (ex: Widgets)• Editor Files
4
Theme Styling Options
5
Theme Styling Options Example
6
Widget Styling Options
7
Footer Text Color Edit – Before and After
8
Primary WordPress Style Sheets
• Three primary WordPress Style Sheets– style.css– header.php– footer.php
9
Accessing WordPress Style Sheets
• Follow this path– Dashboard > Appearance > Editor
• Back Up Prior to Editing
10
Locating Primary Style Sheets
11
header.php
12
footer.php
13
Types of Styles
• Tag Style – Create style rules that change HTML code automatically; applies rule every time element appears– h1 { color: #efefef }
• Class Style – You name it; you manually select it– i.e. a div– .infoform{ color: #0076bf }
• ID Style – You can only apply once; use for single unique elements– #box { color: #ffffff}
14
Things You Should Know
• Basic Code Structure– selector { attribute: value }– h1 {color: #0076bf }
• !important Declarations– !important declarations carry more weight– !important declarations by author carry more weight
then !important declarations by the user– Override with caution– Could affect responsive designs (ex: size of elements)
15
What Is Contained in the CSS File
• Comment block from the author • A set of style rules for the major elements of the
theme:– h tags– Colors and fonts– Margins and padding– Basic layout of primary elements
• (header, body, sidebars, footers)
• Basic design and layout rules for the theme
16
Inspecting the ElementThis Example Uses Google Chrome
Using Chrome browser; right mouse click; select Inspect element
17
Element Identified
18
Locate CSS Code
Chrome Console shows file name and code line number
19
Practice with Twenty Eleven ThemeChange Background Color – Inspect the Element
20
Practice with Twenty Eleven ThemeChange Background Color – Identify Source Line
21
Practice with Twenty Eleven ThemeChange Background Color – Locate Code
Note: Installed WordPress Advanced Code Editor Plugin.WordPress code does not have line numbers.
22
Practice with Twenty Eleven ThemeChange Background Color – Enter Color Hex
23
Practice with Twenty Eleven ThemeChange Background Color – Update File
24
Practice with Twenty Eleven ThemeChange Background Color – View Change
25
Practice with Twenty Eleven ThemeReduce Site Title Size – Inspect the Element
26
Practice with Twenty Eleven ThemeReduce Site Title Size – Edit Code
27
Practice with Twenty Eleven ThemeReduce Site Title Size – Reduce Size
28
Practice with Twenty Eleven ThemeReduce Site Title Size – View Change
29
Some of the Elements You Can EditThere Are So Many Possibilities
30
Before and After Example
31
The Anatomy of the CSS File
• Decide what you want to edit• Inspect the element in browser• Find the code in the CSS file• Customize the code• Enjoy the enhancements
32
Thank You
