CSS Basics - using Firebug to identify & modify CSS in WordPress sites

1. S
Using Firebug to Find
& Edit CSS
WordCamp Nashville 2014

2. About Me
Marcus Crutcher - @mcsocially
Owner, cSocially Media
http://csocially.com
Web design, SEO, Social, Content
iThemes Builder advocate
WordPress fan & user since 2011
1st WordCamp – 2012

3. What We’ll Cover Today
S 1. What is CSS
S 2. How to Add Custom CSS via JetPack plugin
S 3. What is Firefox Firebug?
S 4. How to use Firebug to identify & modify CSS on live site.
S 5. Time permitting >> How to Use Chrome Inspect
Element

5. Where to Find CSS in
WordPress
Login to your WordPress
site.
From your Dashboard,
go to Appearance >
Editor

6. Finding your Stylesheet
Don’t touch the .php files
unless you know what you’re doing!

7. Active Jetpack Plugin
If you don’t have Jetpack already, search the WP Plugin Repository for Jetpack,
download, & activate it.
Connect Jetpack to your WordPress.com account to get access to the CSS Editor

8. What is Jetpack Custom CSS?

9. What is Firebug?

10. Why Use Firebug?
S Easily preview & test html & CSS changes in real time
S No harm, no foul – changes don’t affect site until you add to
your stylesheet or custom CSS area
S Saves a ton of time, allows for easy debugging
S Ability to open Firefox controls in new window
S It’s FREE

11. Get & Start Firebug
S To get Firebug, go to http://getfirebug.com/
S To use, click the Firebug icon on your Firefox browser

12. Firefox Opens
Firefox splits your screen, opening it’s control window. This is where you will
identify & modify CSS

13. Inspect Page Elements

14. CSS Tips
S When styling for responsive sites, use percentage, EM &
REM instead of PX designation
S For example: .container {
S width: 100%;
S max-width: 650px;
S }
S Instead of .container {
S Width: 650px;
S }

15. CSS Tips
S The last CSS command to load wins.
S Imagine you have .menu li {font-size:14px;} at the top of your
stylesheet
S And you have .menu li {font-size:21px;} at the bottom of your
stylesheet
S Bottom one wins.
S Use !important after attribute if you have the selector correct
but the attribute just isn’t working

16. Fun with CSS
S CSS Background Patterns
S http://lea.verou.me/css3patterns/
S CSS Button Generator
S http://www.cssbuttongenerator.com/

17. CSS Resources
S How to load Google Fonts into your page
S http://www.wpbeginner.com/wp-themes/how-add-google-
web-fonts-wordpress-themes/
S How to use Firebug for WordPress (detailed slideshare)
S http://www.slideshare.net/LauraHartwig/customizing-your-
word-press-theme-with-firebug-and-css-33273990
S W3 Schools Tutorial
S http://www.w3schools.com/css/default.asp

18. Chrome Inspect Element
S Simply open Chrome, right click on the website & choose
Inspect Element
S To access stylesheet, click Sources tab & follow instructions
to open files

19. WordPress Default CSS
S WordPress generates default classes & IDs
S http://www.wpbeginner.com/wp-themes/default-wordpress-
generated-css-cheat-sheet-for-beginners/