The Anatomy of
a WordPress CSS File
WordCamp 2014
April 14 – 15, 2014
Atlanta, Georgia
What We Will Discuss
• Cascading Style Sheets
• Theme Styling Options
• Primary Edit Files
• Identifying Edit Requirements...
CSS Styling Options
• Theme Options
• Built In Custom Fields (ex: Widgets)
• Editor Files
3
Theme Styling Options
4
Theme Styling Options Example
5
Widget Styling Options
6
Footer Text Color Edit – Before and After
7
Primary WordPress Style Sheets
• Three primary WordPress Style Sheets
– style.css
– header.php
– footer.php
8
Accessing WordPress Style Sheets
• Follow this path
– Dashboard > Appearance > Editor
• Back Up Prior to Editing
9
Locating Primary Style Sheets
10
header.php
11
footer.php
12
Types of Styles
• Tag Style – Create style rules that change HTML code
automatically; applies rule every time element
appe...
Things You Should Know
• Basic Code Structure
– selector { attribute: value }
– h1 {color: #0076bf }
• !important Declarat...
What Is Contained in the CSS File
• Comment block from the author
• A set of style rules for the major elements of the
the...
Inspecting the Element
This Example Uses Google Chrome
Using Chrome browser; right mouse click; select Inspect element
16
Element Identified
17
Locate CSS Code
Chrome Console shows file name and code line number
18
Practice with Twenty Eleven Theme
Change Background Color – Inspect the Element
19
Practice with Twenty Eleven Theme
Change Background Color – Identify Source Line
20
Practice with Twenty Eleven Theme
Change Background Color – Locate Code
Note: Installed WordPress Advanced Code Editor Plu...
Practice with Twenty Eleven Theme
Change Background Color – Enter Color Hex
22
Practice with Twenty Eleven Theme
Change Background Color – Update File
23
Practice with Twenty Eleven Theme
Change Background Color – View Change
24
Practice with Twenty Eleven Theme
Reduce Site Title Size – Inspect the Element
25
Practice with Twenty Eleven Theme
Reduce Site Title Size – Edit Code
26
Practice with Twenty Eleven Theme
Reduce Site Title Size – Reduce Size
27
Practice with Twenty Eleven Theme
Reduce Site Title Size – View Change
28
Some of the Elements You Can Edit
There Are So Many Possibilities
29
Before and After Example
30
The Anatomy of the CSS File
• Decide what you want to edit
• Inspect the element in browser
• Find the code in the CSS fil...
Thank You
32
Upcoming SlideShare
Loading in …5
×

The Anatomy of a WordPress File

556 views

Published on

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.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
556
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

The Anatomy of a WordPress File

  1. 1. The Anatomy of a WordPress CSS File WordCamp 2014 April 14 – 15, 2014 Atlanta, Georgia
  2. 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. 3. CSS Styling Options • Theme Options • Built In Custom Fields (ex: Widgets) • Editor Files 3
  4. 4. Theme Styling Options 4
  5. 5. Theme Styling Options Example 5
  6. 6. Widget Styling Options 6
  7. 7. Footer Text Color Edit – Before and After 7
  8. 8. Primary WordPress Style Sheets • Three primary WordPress Style Sheets – style.css – header.php – footer.php 8
  9. 9. Accessing WordPress Style Sheets • Follow this path – Dashboard > Appearance > Editor • Back Up Prior to Editing 9
  10. 10. Locating Primary Style Sheets 10
  11. 11. header.php 11
  12. 12. footer.php 12
  13. 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. 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. 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. 16. Inspecting the Element This Example Uses Google Chrome Using Chrome browser; right mouse click; select Inspect element 16
  17. 17. Element Identified 17
  18. 18. Locate CSS Code Chrome Console shows file name and code line number 18
  19. 19. Practice with Twenty Eleven Theme Change Background Color – Inspect the Element 19
  20. 20. Practice with Twenty Eleven Theme Change Background Color – Identify Source Line 20
  21. 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. 22. Practice with Twenty Eleven Theme Change Background Color – Enter Color Hex 22
  23. 23. Practice with Twenty Eleven Theme Change Background Color – Update File 23
  24. 24. Practice with Twenty Eleven Theme Change Background Color – View Change 24
  25. 25. Practice with Twenty Eleven Theme Reduce Site Title Size – Inspect the Element 25
  26. 26. Practice with Twenty Eleven Theme Reduce Site Title Size – Edit Code 26
  27. 27. Practice with Twenty Eleven Theme Reduce Site Title Size – Reduce Size 27
  28. 28. Practice with Twenty Eleven Theme Reduce Site Title Size – View Change 28
  29. 29. Some of the Elements You Can Edit There Are So Many Possibilities 29
  30. 30. Before and After Example 30
  31. 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. 32. Thank You 32

×