Your WordPress Theme Intro Course firebug First a little about me My name is Laura Hartwig and Im a developer for the MarkNet Group in Brewster NY MarkNetGroupcom I started working with ID: 782701
Download The PPT/PDF document "Using and Basic CSS to Customize" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Using and Basic CSS to Customize Your WordPress Theme
Intro Course
firebug
Slide2First- a little about meMy name is Laura Hartwig and I’m a developer for the MarkNet Group in Brewster NY. (MarkNetGroup.com) I started working with WordPress in 2011 and have been in love with it ever since. I’m a co-organizer of my local
WordPress
Meetup group and a frequent contributor to the WordPress.org forums.
I will give out the link to these slides at the end of the presentation, so no need to write anything down.
Slide3We’ll DiscussBasic CSS Terms & UsageWhat is FirebugHow to Install ItHow to Use It
For a limited
time only
Slide4Within your page editor, you can control your text by making it bold, italicized, left justified, etc, but you cannot control the overall look and colors of the site.CSS (Cascading Style Sheets) are what control the look of your website. That is controlled in the style.css file.
What is CSS?
Slide5We will talk more about how to access that file in just a minute. But first, let’s talk about
firebug
Slide6What is Firebug?A free web development tool available as an extension in Chrome or Firefox browsers. It allows you to see the HTML and CSS while viewing any website.It also allows you to do many other cool things, but for the purpose of this talk, we are going to keep it simple and stick to HTML and CSS.
Slide7What’s So Great About Firebug?It allows you to preview and test HTML and CSS changes on your site without touching your code. It allows you to make changes yourself without paying a developer.Even if you know CSS, it can save a lot of back and forth time.It’s a good way to debug errors or problems.Sooo much easier than “View Source”.And…
Slide8IT’S ABSOLUTELY
FREE
No Cost
No Monthly Payments
No Hidden Fees
No Kidding
Slide9How to Install FirebugVisit https://getfirebug.com/ in your Firefox browser and click on Once installed, you will need to restart your browser for it to show. If you prefer to use Google Chrome, you can install the Chrome extension here:
https://getfirebug.com/releases/lite/chrome/, but I find that the Chrome version doesn’t work quite as well.
And it can be yours now
Slide10Using FirebugFirst, you will want to open Firebug by pressing F12 on your keyboard or right clicking on your Firefox browser window and using the dropdown menu to select “Inspect Element with Firebug”Note: It is supposed to create an icon in your toolbar, but that has never worked for me.
Slide11Once you open Firebug, you will get a window like this on half your screen. I like to use the new window button to create a separate window.
Slide12The default is to show HTML on the left side.Add CSS on the right side.
Slide13Click the + or – boxes to expand or collapse the elementsYou will see your site is composed of what we call “
divs” or divisions in CSS. Each separate division can be expanded or collapsed in the Firebug window.
Slide14CSS Tip:Divisions will always be identified by either a “class” or an “id”. Classes are noted by periods in the CSS style sheet and ID’s are noted by the number sign. So it would look like this: .wrap#title-area
So you will see this in the Firebug window:
And you will see this in your style sheet:
Notice how it says
div
Slide15And Now the
Magic…
Slide16Click on the inspect icon to see the sections of your webpage.
Slide17You will be able to see the HTMLThis can be very helpful in WordPress where pages are generated automatically with PHP. Some of these things you will never see when you are editing your pages so Firebug allows you to see the generated text, and also makes it easier to find what you are looking for by highlighting those areas on the front of your site.
Slide18You can see as you hover over the site, it highlights the corresponding HTML in the Firebug window.As you hover over the HTML in the Firebug window, it highlights the corresponding elements on the website.
Slide19CSS Tip: Box ModelIf you’re not familiar with the box model, basically, every element on your site is in a box.
Slide20So when you hover over the HTML in the Firebug window, you will be able to see the box model elements on your websiteThe blue section is the main section (or div).The purple section shows the padding.
The yellow section shows the margin
The narrow gray line shows the border
Slide21You can also see this by changing the second window to the Layout tab
Slide22Editing the HTML in FirebugSimply click on the inspect element icon and then hover over what you want to change to easily find it in the Firebug HTML window. Then select it in the Firebug window, double click, edit, and enter. This will NOT change the HTML on your site. It will only show you what the changed HTML will look like.
Slide23Editing the CSS in FirebugAgain, simply click the inspect element icon and highlight want you want to change, then click on it in the Firebug panel and type in your changes.Again, this will NOT change the CSS on your site. It will only show you what the changed CSS will look like.
Slide24Editing the Actual CSSNow that you’ve seen the wonderful changes you can make in Firebug, you’ll want to make those changes permanent on your site. To do that you will need to find your style.css file which we discussed earlier.
Slide25Before making any changes to your filesWord of Warningbackup
backup
backup
I cannot stress enough how important it is to make a backup of your files. Use a v1,
v2, v3 at the end so you can revert to previous versions.
Slide26To find your style sheet, you need to go into the WordPress dashboard and choose Appearance > EditorIt will default to the style.css file
Slide27It is possible that you will have other style sheets here. Just click on the file name to select the different files. I highly recommend that you don’t touch the php files unless you really know what you are doing. This could cause the
Slide28Word of WarningIf you are not using a custom or child theme, you will need to install a Custom CSS plugin. If you are not sure if you have a custom or child theme, install the plugin just in case. You can find this plugin by going to Plugins > Add Newand typing “Custom CSS” into the search bar
Slide29Slide30Once you install this plugin, you will simply be adding your new CSS code to the blank page provided instead of making changes to your style.css file. Still very easy.
Slide31Slide32If you will be actually editing your Child Theme files instead of using the Custom CSS Plugin, you will need to know which files to edit. You can find that information by hovering over the file name here:Find the Style SheetIn this example, they are all coming from the same style sheet, but sometimes they will be different.
Slide33Then you can find that file here:The main style sheet file should always be named style.cssNotice that sometimes files have names above them in bold but the file name is under in parentheses.
Slide34Let’s Go Over Some Basic CSSFirebug makes it very easy even if you don’t know CSS. Most things you can guess what they mean. The most common things you will be working with are :
font-sizefont-family
color
width
And these are all exactly what they sound like.
Slide35Keep in mind that…
Slide36Changing
colors
Slide37If you’re not a designer and don’t have Photoshop at your disposal, a good FREE color tool is ColorPic, which can be found here: http://www.iconico.com/colorpic/
colors
Simply download it to your desktop and it will allow you to choose any color from a website or even your desktop.
You can even save your favorite colors to use again later.
Slide38Be Careful to Check What Other Things You Will Be Changing When You Change Your CSSCSS stands for Cascading Style Sheet, which means the rules that you set will affect your entire site, so unlike making changes in the HTML, when you change one thing, it will could change many things throughout your site.
Slide39So, say I wanted to change the color of the “Leave a Comment” link on my site. I use Firebug to find it and I change the color…But now the links in my sidebar change color too!
Slide40So in order to select only the area I want, I need to be more specific with the CSS classes I use.You saw in that example that I changed this:a, a:visited, #nav li.right a:hover, h2 a:hover, #footer a:hover
To change the color of my text, but you can see this is selecting quite a few different classes. Each different thing is separated by a comma, so here we are selecting at least different things.
5
1
2
3
4
5
Slide41And you’ll notice with the a selector, there are several different versions of it. We have it with :visited, with :hover, and finally with #footer a:hover. Now, if I tell you that a is a link, you can guess that adding :visited on the end means that it is a link that has been visited and
:hover means that it is a link that is being hovered over.
Slide42And we can go further to say that #footer a:hover Is only the links in the footer section that are being hovered over. So, if we want to change only some links and not ALL the links on the website, we need to be more specific, similar to the way this last one controls only links in the footer that are hovered over.
Slide43So, if we look at what we’ve got, we will notice that the link we are trying to change is within the post-info divisionWe’ve already got the
.post-info class here, so let’s just add that a at the end so it will control the links in the post-info area.
Slide44Now you can see that just these top links change and the sidebar and the link below it are unaffected.
Slide45Changing
background
colors
Slide46Changing the Background ColorUsually to change your background color, you will need to find your body. However, sometimes there is also an inner wrap or content area that you will want to change.
Slide47Another common request is to change the sidebar to the other side. It’s really very simple. Just use Firebug to find your content area and your sidebar area and reverse their float.Moving the Sidebar
Slide48Change the width of either area the same way.Be aware that if the total of the two areas is wider than your total body width, one of these areas will drop down to the bottom and you will only see one of them.
Slide49Fixing
Margins
Slide50Fixing Image MarginsOccasionally I’ll run into a poorly designed theme that hasn’t taken into account image margin, so your text will be right up against your image when you left align an image, and it will just look bad. That’s easy to fix by adding some margin.
Slide51As usual, you will use the inspect element icon to select the picture and then you will see the alignleft style that is controlling it. If you change the margin to 20px, this moves the image 20px from all sides including the top and left. We don’t want that, so you’ll need to remember this order:Top Right Bottom LeftThink of going clockwise.So your changed CSS would look like this:margin: 0 20px
20px 0
Slide52measurements
Website design is done in pixels, so forget inches and points.
If you need an easy way to measure your website (like pictures, sidebars, etc, )
I like to use
WonderWebware
Screen Ruler. You can download it for FREE here:
http://download.cnet.com/WonderWebware-Screen-Ruler/3000-6675_4-10723805.html
Simply download it to your desktop and use it to
measure the width and height of anything.
Slide53Slide54headings
Slide55Hot Tip:
H tags
Here is a very simple tip to help your style of your website and SEO performance -use H tags (headers). Not only can using H tags help Google figure out what is most important on your page, H tags will also help readers understand what is most important on the page because they will be styled differently. And when you see how easy it is to use them in
WordPress
, you won’t believe that you haven’t been using them all along. Basically, it’s the same as making a word bold or italic.
Slide561.Use the visual editor and simply highlight the word as you usually would. 2.But this time, use the drop down where it says “Paragraph”. 3.From the Paragraph dropdown, select H2, H3, or H4, depending on the importance of the item. The more important – the lower the number. You will see H1, but that should be reserved for the page title, which is the most important. If your theme is well written, the page title will get an H1 tag automatically.And that’s all there is to it! Now you will be able to style those headings. Usually the lower the H tag, the larger the font size. So, this is an H2 tag.This is an H3 tag.This is an h4 tag.To see a video on exactly how to do this, follow this link:
https://www.youtube.com/watch?v=D4JS6PgWXAo
Slide57Changing
Fonts
Slide58I’ve saved changing the fonts for last because it’s a little more complicated.First, a little information about web fonts. Websites have a very limited number of fonts that they can automatically show. You can find that list here:http://www.w3schools.com/cssref/css_websafe_fonts.asp
Slide59Otherwise, you can set your website to show any font that you want, but if the viewer does not have that font installed on their computer, they will not be able to see it. Note that the CSS for fonts is written like this:p{font-family:"Times New Roman", Times, serif;}So you would list the font that you want first, and then a backup font or two, in case there is some problem displaying the font you want. In order to get around this incredibly limiting list of fonts, you can pay to download a font to your server or connect to a site that offers fonts like Typekit.com or Fonts.com, however you will need to pay for the use of these fonts and usually it requires an ongoing subscription, which can become quite expensive.
Slide60Another way to increase the number of fonts available is to use They can be found here:https://www.google.com/fontsAnd they are fairly simple to use.
Slide61You can then either search for the name of the font you are looking for, or narrow down the results by thickness, slant, etc.
Once you’ve chosen a font, use the quick use icon to get the CSS you need.
Slide62Then scroll down on the page to find these two sections:For the top section, make sure you choose the @import tab and copy and paste that info above any other CSS in your style sheet or into the Custom Style Plugin sheetThen you will copy the font-family info as described on the side. You will notice that it also includes font weight. Sometimes that will be an option at the top of the page and you can just check the font sizes that you want to use.
Slide63For example, this font is available in several sizes and you can check those you would like to use. Most fonts only offer one or two weights.
Slide64Word of WarningIf you have a responsive website, these changes are going to be much more complicated. By default, you will be just changing the look for the desktop site. The best thing to do with responsive designs is to use percentages instead of exact number.
Slide65Wrapping up
So, we talked about
Changing text colors and sizes and fontsChanging background colors
Fixing image margins
Moving the sidebar
H tags (Headings)Now you should be able to go home and make some changes to your site
Slide66Questions?
Slide67Find out more
Get these slides:
http://www.slideshare.net/LauraHartwig/Follow my blog: http://wpdecoder.com/
Follow me on
Facebook
: https://www.facebook.com/laurahartwigdesignFollow me on Twitter: https://twitter.com/LHartwigDesignFollow me on YouTube: https://www.youtube.com/user/LauraHartwig
Thanks for Listening!