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