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.

1. The Anatomy of
a WordPress CSS File
WordCamp 2014
April 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
2

3. CSS Styling Options
• Theme Options
• Built In Custom Fields (ex: Widgets)
• Editor Files
3

4. Theme Styling Options
4

5. Theme Styling Options Example
5

6. Widget Styling Options
6

7. Footer Text Color Edit – Before and After
7

8. Primary WordPress Style Sheets
• Three primary WordPress Style Sheets
– style.css
– header.php
– footer.php
8

9. Accessing WordPress Style Sheets
• Follow this path
– Dashboard > Appearance > Editor
• Back Up Prior to Editing
9

10. Locating Primary Style Sheets
10

11. header.php
11

12. footer.php
12

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}
13

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)
14

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
15

16. Inspecting the Element
This Example Uses Google Chrome
Using Chrome browser; right mouse click; select Inspect element
16

17. Element Identified
17

18. Locate CSS Code
Chrome Console shows file name and code line number
18

19. Practice with Twenty Eleven Theme
Change Background Color – Inspect the Element
19

20. Practice with Twenty Eleven Theme
Change Background Color – Identify Source Line
20

21. Practice with Twenty Eleven Theme
Change Background Color – Locate Code
Note: Installed WordPress Advanced Code Editor Plugin.
WordPress code does not have line numbers.
21

22. Practice with Twenty Eleven Theme
Change Background Color – Enter Color Hex
22

23. Practice with Twenty Eleven Theme
Change Background Color – Update File
23

24. Practice with Twenty Eleven Theme
Change Background Color – View Change
24

25. Practice with Twenty Eleven Theme
Reduce Site Title Size – Inspect the Element
25

26. Practice with Twenty Eleven Theme
Reduce Site Title Size – Edit Code
26

27. Practice with Twenty Eleven Theme
Reduce Site Title Size – Reduce Size
27

28. Practice with Twenty Eleven Theme
Reduce Site Title Size – View Change
28

29. Some of the Elements You Can Edit
There Are So Many Possibilities
29

30. Before and After Example
30

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
31

32. Thank You
32