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.
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
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
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