S Using Firebug to Find & Edit CSS WordCamp Nashville 2014
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
S
Using Firebug to Find& Edit CSS
WordCamp Nashville 2014
About Me
Marcus Crutcher - @mcsociallyOwner, cSocially Media http://csocially.com Web design, SEO, Social, Content iThemes Builder advocate
WordPress fan & user since 2011
1st WordCamp – 2012
What We’ll Cover Today
1. What is CSS
2. How to Add Custom CSS via JetPack plugin
3. What is Firefox Firebug?
4. How to use Firebug to identify & modify CSS on live site.
5. Time permitting >> How to Use Chrome Inspect Element
Where to Find CSS in WordPress
Login to your WordPress site.
From your Dashboard, go to Appearance > Editor
Finding your Stylesheet
Don’t touch the .php files unless you know what you’re doing!
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
What is Jetpack Custom CSS?
What is Firebug?
Why Use Firebug?
Easily preview & test html & CSS changes in real time
No harm, no foul – changes don’t affect site until you add to your stylesheet or custom CSS area
Saves a ton of time, allows for easy debugging
Ability to open Firefox controls in new window
It’s FREE
Get & Start Firebug
To get Firebug, go to http://getfirebug.com/
To use, click the Firebug icon on your Firefox browser
Firefox Opens
Firefox splits your screen, opening it’s control window. This is where you will identify & modify CSS
Inspect Page Elements
CSS Tips
When styling for responsive sites, use percentage, EM & REM instead of PX designation For example: .container {
width: 100%; max-width: 650px; } Instead of .container { Width: 650px; }
CSS Tips
The last CSS command to load wins. Imagine you have .menu li {font-size:14px;} at the
top of your stylesheet And you have .menu li {font-size:21px;} at the
bottom of your stylesheet Bottom one wins.
Use !important after attribute if you have the selector correct but the attribute just isn’t working
Fun with CSS
CSS Background Patterns http://lea.verou.me/css3patterns/
CSS Button Generator http://www.cssbuttongenerator.com/
CSS Resources
How to load Google Fonts into your page http://www.wpbeginner.com/wp-themes/how-add-google-w
eb-fonts-wordpress-themes/
How to use Firebug for WordPress (detailed slideshare) http://www.slideshare.net/LauraHartwig/customizing-your-
word-press-theme-with-firebug-and-css-33273990
W3 Schools Tutorial http://www.w3schools.com/css/default.asp
Chrome Inspect Element
Simply open Chrome, right click on the website & choose Inspect Element
To access stylesheet, click Sources tab & follow instructions to open files
WordPress Default CSS
WordPress generates default classes & IDs http://www.wpbeginner.com/wp-themes/default-
wordpress-generated-css-cheat-sheet-for-beginners/
Related Documents
