Transcript Using and Basic CSS to Customize Your WordPress Theme Intro Course First- a little about me • My name is Laura Hartwig and I’m a developer.

Using
and Basic CSS to Customize
Your WordPress Theme
Intro Course
First- a little about me
•
My 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.
We’ll Discuss
•
•
•
•
Basic CSS Terms & Usage
What is Firebug
How to Install It
How to Use It
Within 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.
We will talk more about how to access that file
in just a minute. But first, let’s talk about
What 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.
What’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…
No Cost
No Monthly Payments
No Hidden Fees
No Kidding
How to Install Firebug
Visit 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.
Using Firebug
First, 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.
Once 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.
The default is to show HTML on the left side.
Add CSS on the right side.
Click the + or – boxes
to expand or collapse the elements
You 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.
CSS 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:
Notice how it says div
And you will see this in your style
sheet:
Click on the inspect icon to see the
sections of your webpage.
You will be able to see the HTML
This 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.
You 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.
CSS Tip: Box Model
If you’re not
familiar with the
box model,
basically, every
element on your
site is in a box.
So when you hover over the HTML in the Firebug window, you
will be able to see the box model elements on your website
The blue section
is the main
section (or div).
The purple
section shows
the padding.
The narrow gray
line shows the
border
The yellow
section shows
the margin
You can also see this by changing the
second window to the Layout tab
Editing the HTML in Firebug
Simply 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.
Editing the CSS in Firebug
Again, 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.
Editing the Actual CSS
Now 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.
Word of Warning
Before making any changes to your files
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.
To find your style sheet, you need to go into the
WordPress dashboard and choose
Appearance > Editor
It will default to the style.css file
It 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
Word of Warning
If 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 New
and typing “Custom CSS” into the search bar
Once 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.
Find the Style Sheet
If 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:
In this example, they are
all coming from the
same style sheet, but
sometimes they will be
different.
Then you can find that file here:
The main style sheet file should always be named style.css
Notice that sometimes files have names above them in bold but the file name is under
in parentheses.
Let’s Go Over Some Basic CSS
Firebug 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-size
font-family
color
width
And these are all exactly what they sound like.
Keep in mind that…
You will need curly brackets
before and after all the
attributes. {}
You should put each attribute
on a separate line, like you see
here so that it is easier to read.
After each attribute, there
should be a semicolon.
Hot Tip:
If 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/
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.
Be Careful to Check What Other
Things You Will Be Changing When
You Change Your CSS
CSS 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.
So, 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!
So 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.
And 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.
And 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.
So, if we look at what we’ve got, we will notice that the link we are trying to change is
within the post-info division
We’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.
Now you can see that just these top links change and the sidebar
and the link below it are unaffected.
Changing the Background Color
Usually 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.
Moving the Sidebar
Another 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.
Change 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.
Fixing Image Margins
Occasionally 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.
As 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 Left
Think of going clockwise.
So your changed CSS would
look like this:
margin: 0 20px 20px 0
Hot Tip:
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.
Website design is done in pixels, so forget inches and points.
Hot Tip:
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.
1.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
I’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
Otherwise, 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.
Another way to increase the number of
fonts available is to use
They can be found here:
https://www.google.com/fonts
And they are fairly simple to use.
You 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.
Then 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 sheet
Then 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.
For 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.
Word of Warning
If 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.
So, we talked about
•Changing text colors and sizes and fonts
•Changing 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
Get these slides: http://www.slideshare.net/LauraHartwig/
Follow my blog: http://wpdecoder.com/
Follow me on Facebook: https://www.facebook.com/laurahartwigdesign
Follow me on Twitter: https://twitter.com/LHartwigDesign
Follow me on YouTube: https://www.youtube.com/user/LauraHartwig
Thanks for Listening!