SlideShare a Scribd company logo
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.
A style sheet looks like this.
This is called a selector.
These are the attributes you want to give
to the selected item.
If you do a View Source on your page, you will
be able to see that WordPress automatically
adds these types of selectors to your site
through your theme.
Here is the selector we just
saw. It is called with a div
You can also add these selectors yourself by
using the Text tab in your visual editor
Here I have made a selector called “red” and now I
can give that red and bold properties in my style
sheet.
Divs are either ID’s or Classes
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
CSS Tip:
You 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.
Keep in mind that…
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
Next, 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.
Notice that the right side of your Firebug window is set up just like your style sheet.
Firefox window Style sheet
That is great because we are going to use
Firebug to find out what CSS styles are
controlling things and how to change them to
how we want them to look.
On the other side of the Firebug
window, click the + or – boxes
to expand or collapse the elements
This side looks exactly like your View Source. 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.
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.
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.
Box Model
If you’re not
familiar with the
box
model, basically,
every element
on your site is in
a box.
CSS Tip:
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 yellow
section shows
the margin
The narrow gray
line shows the
border
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.
Before making any changes to your files
Word of Warning
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.
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.
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:
Find the Style Sheet
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.
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/
Hot Tip:
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.
Since that works the way we want it to, in our style.css file,
we are going to either find
.post-info a
by using Ctrl +F or we can create a new line and add it.
You see here I have
.post-info
But not
.post-info a
So I’m going to add it
right after that being
careful to go outside
the brackets {}
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.
Again, you can use Crtl +F to find
these selectors in your style
sheet and make the changes,
or if you are using the Custom
CSS plugin, you can just copy and
paste the selector and attributes
to your clean Custom CSS file.
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.
Moving the Sidebar
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:
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.
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.
You can see I have my @import statements above
where the fonts are actually called.
Here is my style sheet:
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.
Instead of
width: 650px;
you would use
width: 60%;
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!

More Related Content

What's hot

HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
David Lindkvist
 
Blogging blueprint
Blogging blueprintBlogging blueprint
Blogging blueprint
Uzzal Hossain
 
Designing for the web - 101
Designing for the web - 101Designing for the web - 101
Designing for the web - 101
Ashraf Hamdy
 
Windows Vista
Windows VistaWindows Vista
Windows Vista
cartsh
 
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD CombinationLotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Sean Burgess
 
Fewd week2 slides
Fewd week2 slidesFewd week2 slides
Fewd week2 slides
William Myers
 
HTML 5 Complete Reference
HTML 5 Complete ReferenceHTML 5 Complete Reference
HTML 5 Complete Reference
EPAM Systems
 
Face/Off: APEX Templates & Themes
Face/Off: APEX Templates & ThemesFace/Off: APEX Templates & Themes
Face/Off: APEX Templates & Themes
crokitta
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop Notes
Pamela Fox
 
Punch it Up with HTML and CSS
Punch it Up with HTML and CSSPunch it Up with HTML and CSS
Punch it Up with HTML and CSS
mtlgirlgeeks
 
From doh to pro!
From doh to pro!From doh to pro!
From doh to pro!
Jeremy Harder
 
Using class suffixes
Using class suffixesUsing class suffixes
Using class suffixes
shailendra vishwakarma
 
Basic CSS concepts by naveen kumar veligeti
Basic CSS concepts by naveen kumar veligetiBasic CSS concepts by naveen kumar veligeti
Basic CSS concepts by naveen kumar veligeti
Naveen Kumar Veligeti
 
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog TemplateBP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
Sean Burgess
 
css and wordpress
css and wordpresscss and wordpress
css and wordpress
umesh patil
 
Unit f adobe dreamweaver cs6
Unit f adobe dreamweaver cs6Unit f adobe dreamweaver cs6
Unit f adobe dreamweaver cs6
Krista Lawrence
 
WordPress Basics
WordPress BasicsWordPress Basics
WordPress Basics
Michelle Ames
 
HTML Bootcamp
HTML BootcampHTML Bootcamp
HTML Bootcamp
MayeCreate Design
 

What's hot (18)

HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
Blogging blueprint
Blogging blueprintBlogging blueprint
Blogging blueprint
 
Designing for the web - 101
Designing for the web - 101Designing for the web - 101
Designing for the web - 101
 
Windows Vista
Windows VistaWindows Vista
Windows Vista
 
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD CombinationLotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
 
Fewd week2 slides
Fewd week2 slidesFewd week2 slides
Fewd week2 slides
 
HTML 5 Complete Reference
HTML 5 Complete ReferenceHTML 5 Complete Reference
HTML 5 Complete Reference
 
Face/Off: APEX Templates & Themes
Face/Off: APEX Templates & ThemesFace/Off: APEX Templates & Themes
Face/Off: APEX Templates & Themes
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop Notes
 
Punch it Up with HTML and CSS
Punch it Up with HTML and CSSPunch it Up with HTML and CSS
Punch it Up with HTML and CSS
 
From doh to pro!
From doh to pro!From doh to pro!
From doh to pro!
 
Using class suffixes
Using class suffixesUsing class suffixes
Using class suffixes
 
Basic CSS concepts by naveen kumar veligeti
Basic CSS concepts by naveen kumar veligetiBasic CSS concepts by naveen kumar veligeti
Basic CSS concepts by naveen kumar veligeti
 
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog TemplateBP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
 
css and wordpress
css and wordpresscss and wordpress
css and wordpress
 
Unit f adobe dreamweaver cs6
Unit f adobe dreamweaver cs6Unit f adobe dreamweaver cs6
Unit f adobe dreamweaver cs6
 
WordPress Basics
WordPress BasicsWordPress Basics
WordPress Basics
 
HTML Bootcamp
HTML BootcampHTML Bootcamp
HTML Bootcamp
 

Viewers also liked

Proces izrade web sajta
Proces izrade web sajtaProces izrade web sajta
Proces izrade web sajta
Ivan Cosic
 
Prvi roditeljski sastanak
Prvi roditeljski sastanakPrvi roditeljski sastanak
Prvi roditeljski sastanakurke72
 
3 pitanja o Web Dizajnu
3 pitanja o Web Dizajnu3 pitanja o Web Dizajnu
3 pitanja o Web Dizajnu
Ivan Cosic
 
Развој српске државе четврти разред
Развој српске државе четврти разредРазвој српске државе четврти разред
Развој српске државе четврти разред
Основна школа "Олга Милошевић" Смед. Паланка
 

Viewers also liked (6)

Proces izrade web sajta
Proces izrade web sajtaProces izrade web sajta
Proces izrade web sajta
 
Prvi roditeljski sastanak
Prvi roditeljski sastanakPrvi roditeljski sastanak
Prvi roditeljski sastanak
 
3 pitanja o Web Dizajnu
3 pitanja o Web Dizajnu3 pitanja o Web Dizajnu
3 pitanja o Web Dizajnu
 
Selo zivot
Selo zivotSelo zivot
Selo zivot
 
Развој српске државе четврти разред
Развој српске државе четврти разредРазвој српске државе четврти разред
Развој српске државе четврти разред
 
ЗАДУЖБИНЕ НЕМАЊИЋА
ЗАДУЖБИНЕ НЕМАЊИЋАЗАДУЖБИНЕ НЕМАЊИЋА
ЗАДУЖБИНЕ НЕМАЊИЋА
 

Similar to Customizing Your WordPress Theme Using Firebug and Basic CSS

Intro to CSS Presentation
Intro to CSS PresentationIntro to CSS Presentation
Intro to CSS Presentation
WP Pittsburgh Meetup Group
 
La build your own website september 5
La build your own website september 5La build your own website september 5
La build your own website september 5
Thinkful
 
BYOWHC823
BYOWHC823BYOWHC823
BYOWHC823
Thinkful
 
Wordpress (Theme,Widget,plugins)
Wordpress (Theme,Widget,plugins)Wordpress (Theme,Widget,plugins)
Wordpress (Theme,Widget,plugins)
Rathod Shukar
 
Css basics
Css basicsCss basics
Css basics
Marcus Crutcher
 
Using Wordpress with Reclaim Hosting
Using Wordpress with Reclaim HostingUsing Wordpress with Reclaim Hosting
Using Wordpress with Reclaim Hosting
Cindy Royal
 
Sacramento web design
Sacramento web designSacramento web design
Sacramento web design
lambertvilleg_5
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
butest
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
butest
 
ARTICULOENINGLES
ARTICULOENINGLESARTICULOENINGLES
ARTICULOENINGLES
Mónica Sánchez Crisostomo
 
Complete word press tutorial
Complete word press tutorialComplete word press tutorial
Complete word press tutorial
wp-enlight
 
Overview of Using Wordpress for Web Site Design
Overview of Using Wordpress for Web Site DesignOverview of Using Wordpress for Web Site Design
Overview of Using Wordpress for Web Site Design
Amy Goodloe
 
Basic tutorial dreamweaver_cs5
Basic tutorial dreamweaver_cs5Basic tutorial dreamweaver_cs5
Basic tutorial dreamweaver_cs5
seanoiii
 
Tfbyoweb.4.9.17
Tfbyoweb.4.9.17Tfbyoweb.4.9.17
Tfbyoweb.4.9.17
Jordan Zurowski
 
Tfbyoweb.4.9.17
Tfbyoweb.4.9.17Tfbyoweb.4.9.17
Tfbyoweb.4.9.17
Jordan Zurowski
 
WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared ...
WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared ...WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared ...
WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared ...
New Tricks
 
Presentation 1 [autosaved]
Presentation 1 [autosaved]Presentation 1 [autosaved]
Presentation 1 [autosaved]
AbdulrahmaanDhagacad
 
Lesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdfLesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdf
AshleyJovelClavecill
 
Blog profits
Blog profitsBlog profits
Blog profits
Toju Olley-douglas
 
Blog profits
Blog profitsBlog profits
Blog profits
Toju Olley-douglas
 

Similar to Customizing Your WordPress Theme Using Firebug and Basic CSS (20)

Intro to CSS Presentation
Intro to CSS PresentationIntro to CSS Presentation
Intro to CSS Presentation
 
La build your own website september 5
La build your own website september 5La build your own website september 5
La build your own website september 5
 
BYOWHC823
BYOWHC823BYOWHC823
BYOWHC823
 
Wordpress (Theme,Widget,plugins)
Wordpress (Theme,Widget,plugins)Wordpress (Theme,Widget,plugins)
Wordpress (Theme,Widget,plugins)
 
Css basics
Css basicsCss basics
Css basics
 
Using Wordpress with Reclaim Hosting
Using Wordpress with Reclaim HostingUsing Wordpress with Reclaim Hosting
Using Wordpress with Reclaim Hosting
 
Sacramento web design
Sacramento web designSacramento web design
Sacramento web design
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
ARTICULOENINGLES
ARTICULOENINGLESARTICULOENINGLES
ARTICULOENINGLES
 
Complete word press tutorial
Complete word press tutorialComplete word press tutorial
Complete word press tutorial
 
Overview of Using Wordpress for Web Site Design
Overview of Using Wordpress for Web Site DesignOverview of Using Wordpress for Web Site Design
Overview of Using Wordpress for Web Site Design
 
Basic tutorial dreamweaver_cs5
Basic tutorial dreamweaver_cs5Basic tutorial dreamweaver_cs5
Basic tutorial dreamweaver_cs5
 
Tfbyoweb.4.9.17
Tfbyoweb.4.9.17Tfbyoweb.4.9.17
Tfbyoweb.4.9.17
 
Tfbyoweb.4.9.17
Tfbyoweb.4.9.17Tfbyoweb.4.9.17
Tfbyoweb.4.9.17
 
WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared ...
WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared ...WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared ...
WordCamp Atlanta 2014 - CSS For Beginners - By Michael Earley of ATL Squared ...
 
Presentation 1 [autosaved]
Presentation 1 [autosaved]Presentation 1 [autosaved]
Presentation 1 [autosaved]
 
Lesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdfLesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdf
 
Blog profits
Blog profitsBlog profits
Blog profits
 
Blog profits
Blog profitsBlog profits
Blog profits
 

More from Laura Hartwig

WordPress 101
WordPress 101 WordPress 101
WordPress 101
Laura Hartwig
 
Website content
Website contentWebsite content
Website content
Laura Hartwig
 
Websites 101
Websites 101Websites 101
Websites 101
Laura Hartwig
 
Word press security 101 2018
Word press security 101  2018 Word press security 101  2018
Word press security 101 2018
Laura Hartwig
 
How to Start a WordPress Meetup in Your Town
How to Start a WordPress Meetup in Your TownHow to Start a WordPress Meetup in Your Town
How to Start a WordPress Meetup in Your Town
Laura Hartwig
 
Woocommerce 101
Woocommerce 101Woocommerce 101
Woocommerce 101
Laura Hartwig
 
Favorite WordPress Plugins 2016
Favorite WordPress Plugins 2016Favorite WordPress Plugins 2016
Favorite WordPress Plugins 2016
Laura Hartwig
 
Customizing WordPress Themes
Customizing WordPress ThemesCustomizing WordPress Themes
Customizing WordPress Themes
Laura Hartwig
 

More from Laura Hartwig (8)

WordPress 101
WordPress 101 WordPress 101
WordPress 101
 
Website content
Website contentWebsite content
Website content
 
Websites 101
Websites 101Websites 101
Websites 101
 
Word press security 101 2018
Word press security 101  2018 Word press security 101  2018
Word press security 101 2018
 
How to Start a WordPress Meetup in Your Town
How to Start a WordPress Meetup in Your TownHow to Start a WordPress Meetup in Your Town
How to Start a WordPress Meetup in Your Town
 
Woocommerce 101
Woocommerce 101Woocommerce 101
Woocommerce 101
 
Favorite WordPress Plugins 2016
Favorite WordPress Plugins 2016Favorite WordPress Plugins 2016
Favorite WordPress Plugins 2016
 
Customizing WordPress Themes
Customizing WordPress ThemesCustomizing WordPress Themes
Customizing WordPress Themes
 

Recently uploaded

DocSplit Subsequent Implementation Activation.pptx
DocSplit Subsequent Implementation Activation.pptxDocSplit Subsequent Implementation Activation.pptx
DocSplit Subsequent Implementation Activation.pptx
AmitTuteja9
 
10 Conversion Rate Optimization (CRO) Techniques to Boost Your Website’s Perf...
10 Conversion Rate Optimization (CRO) Techniques to Boost Your Website’s Perf...10 Conversion Rate Optimization (CRO) Techniques to Boost Your Website’s Perf...
10 Conversion Rate Optimization (CRO) Techniques to Boost Your Website’s Perf...
Web Inspire
 
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
APNIC
 
Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
Tarandeep Singh
 
EASY TUTORIAL OF HOW TO USE CiCi AI BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CiCi AI BY: FEBLESS HERNANE EASY TUTORIAL OF HOW TO USE CiCi AI BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CiCi AI BY: FEBLESS HERNANE
Febless Hernane
 
Bangalore Call Girls 9079923931 With -Cuties' Hot Call Girls
Bangalore Call Girls 9079923931 With -Cuties' Hot Call GirlsBangalore Call Girls 9079923931 With -Cuties' Hot Call Girls
Bangalore Call Girls 9079923931 With -Cuties' Hot Call Girls
narwatsonia7
 
Unlimited Short Call Girls Navi Mumbai ✅ 9967824496 FULL CASH PAYMENT
Unlimited Short Call Girls Navi Mumbai ✅ 9967824496 FULL CASH PAYMENTUnlimited Short Call Girls Navi Mumbai ✅ 9967824496 FULL CASH PAYMENT
Unlimited Short Call Girls Navi Mumbai ✅ 9967824496 FULL CASH PAYMENT
rajesh344555
 
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
thezot
 
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
APNIC
 
Decentralized Justice in Gaming and Esports
Decentralized Justice in Gaming and EsportsDecentralized Justice in Gaming and Esports
Decentralized Justice in Gaming and Esports
Federico Ast
 
KubeCon & CloudNative Con 2024 Artificial Intelligent
KubeCon & CloudNative Con 2024 Artificial IntelligentKubeCon & CloudNative Con 2024 Artificial Intelligent
KubeCon & CloudNative Con 2024 Artificial Intelligent
Emre Gündoğdu
 
cyber crime.pptx..........................
cyber crime.pptx..........................cyber crime.pptx..........................
cyber crime.pptx..........................
GNAMBIKARAO
 
Network Security and Cyber Laws (Complete Notes) for B.Tech/BCA/BSc. IT
Network Security and Cyber Laws (Complete Notes) for B.Tech/BCA/BSc. ITNetwork Security and Cyber Laws (Complete Notes) for B.Tech/BCA/BSc. IT
Network Security and Cyber Laws (Complete Notes) for B.Tech/BCA/BSc. IT
Sarthak Sobti
 
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
dtagbe
 
Unlimited Short Call Girls Mumbai ✅ 9833363713 FULL CASH PAYMENT
Unlimited Short Call Girls Mumbai ✅ 9833363713 FULL CASH PAYMENTUnlimited Short Call Girls Mumbai ✅ 9833363713 FULL CASH PAYMENT
Unlimited Short Call Girls Mumbai ✅ 9833363713 FULL CASH PAYMENT
rajesh344555
 

Recently uploaded (15)

DocSplit Subsequent Implementation Activation.pptx
DocSplit Subsequent Implementation Activation.pptxDocSplit Subsequent Implementation Activation.pptx
DocSplit Subsequent Implementation Activation.pptx
 
10 Conversion Rate Optimization (CRO) Techniques to Boost Your Website’s Perf...
10 Conversion Rate Optimization (CRO) Techniques to Boost Your Website’s Perf...10 Conversion Rate Optimization (CRO) Techniques to Boost Your Website’s Perf...
10 Conversion Rate Optimization (CRO) Techniques to Boost Your Website’s Perf...
 
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
 
Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
 
EASY TUTORIAL OF HOW TO USE CiCi AI BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CiCi AI BY: FEBLESS HERNANE EASY TUTORIAL OF HOW TO USE CiCi AI BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CiCi AI BY: FEBLESS HERNANE
 
Bangalore Call Girls 9079923931 With -Cuties' Hot Call Girls
Bangalore Call Girls 9079923931 With -Cuties' Hot Call GirlsBangalore Call Girls 9079923931 With -Cuties' Hot Call Girls
Bangalore Call Girls 9079923931 With -Cuties' Hot Call Girls
 
Unlimited Short Call Girls Navi Mumbai ✅ 9967824496 FULL CASH PAYMENT
Unlimited Short Call Girls Navi Mumbai ✅ 9967824496 FULL CASH PAYMENTUnlimited Short Call Girls Navi Mumbai ✅ 9967824496 FULL CASH PAYMENT
Unlimited Short Call Girls Navi Mumbai ✅ 9967824496 FULL CASH PAYMENT
 
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
 
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
 
Decentralized Justice in Gaming and Esports
Decentralized Justice in Gaming and EsportsDecentralized Justice in Gaming and Esports
Decentralized Justice in Gaming and Esports
 
KubeCon & CloudNative Con 2024 Artificial Intelligent
KubeCon & CloudNative Con 2024 Artificial IntelligentKubeCon & CloudNative Con 2024 Artificial Intelligent
KubeCon & CloudNative Con 2024 Artificial Intelligent
 
cyber crime.pptx..........................
cyber crime.pptx..........................cyber crime.pptx..........................
cyber crime.pptx..........................
 
Network Security and Cyber Laws (Complete Notes) for B.Tech/BCA/BSc. IT
Network Security and Cyber Laws (Complete Notes) for B.Tech/BCA/BSc. ITNetwork Security and Cyber Laws (Complete Notes) for B.Tech/BCA/BSc. IT
Network Security and Cyber Laws (Complete Notes) for B.Tech/BCA/BSc. IT
 
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
 
Unlimited Short Call Girls Mumbai ✅ 9833363713 FULL CASH PAYMENT
Unlimited Short Call Girls Mumbai ✅ 9833363713 FULL CASH PAYMENTUnlimited Short Call Girls Mumbai ✅ 9833363713 FULL CASH PAYMENT
Unlimited Short Call Girls Mumbai ✅ 9833363713 FULL CASH PAYMENT
 

Customizing Your WordPress Theme Using Firebug and Basic CSS

  • 1. Using and Basic CSS to Customize Your WordPress Theme Intro Course
  • 2. 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.
  • 3. We’ll Discuss • Basic CSS Terms & Usage • What is Firebug • How to Install It • How to Use It
  • 4.
  • 5. 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.
  • 6. A style sheet looks like this. This is called a selector. These are the attributes you want to give to the selected item.
  • 7. If you do a View Source on your page, you will be able to see that WordPress automatically adds these types of selectors to your site through your theme. Here is the selector we just saw. It is called with a div
  • 8. You can also add these selectors yourself by using the Text tab in your visual editor Here I have made a selector called “red” and now I can give that red and bold properties in my style sheet.
  • 9. Divs are either ID’s or Classes 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 CSS Tip:
  • 10. You 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. Keep in mind that…
  • 11. 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
  • 12. 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
  • 14. 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.
  • 15. 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…
  • 16. No Cost No Monthly Payments No Hidden Fees No Kidding
  • 17. 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.
  • 18. 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.
  • 19. 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.
  • 20. The default is to show HTML on the left side. Add CSS on the right side.
  • 21. Notice that the right side of your Firebug window is set up just like your style sheet. Firefox window Style sheet
  • 22. That is great because we are going to use Firebug to find out what CSS styles are controlling things and how to change them to how we want them to look.
  • 23. On the other side of the Firebug window, click the + or – boxes to expand or collapse the elements This side looks exactly like your View Source. 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.
  • 24.
  • 25. Click on the inspect icon to see the sections of your webpage.
  • 26. 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.
  • 27. 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.
  • 28. 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.
  • 29. Box Model If you’re not familiar with the box model, basically, every element on your site is in a box. CSS Tip:
  • 30. 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 yellow section shows the margin The narrow gray line shows the border
  • 31. You can also see this by changing the second window to the Layout tab
  • 32. 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.
  • 33. 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.
  • 34. 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.
  • 35. Before making any changes to your files Word of Warning 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.
  • 36. 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
  • 37.
  • 38. 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.
  • 39.
  • 40. 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: Find the Style Sheet In this example, they are all coming from the same style sheet, but sometimes they will be different.
  • 41. 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.
  • 42.
  • 43. 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/ Hot Tip: 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.
  • 44. 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.
  • 45. 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!
  • 46. 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.
  • 47. 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.
  • 48. 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.
  • 49. 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.
  • 50. Now you can see that just these top links change and the sidebar and the link below it are unaffected.
  • 51. Since that works the way we want it to, in our style.css file, we are going to either find .post-info a by using Ctrl +F or we can create a new line and add it. You see here I have .post-info But not .post-info a So I’m going to add it right after that being careful to go outside the brackets {}
  • 52.
  • 53. 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.
  • 54. Again, you can use Crtl +F to find these selectors in your style sheet and make the changes, or if you are using the Custom CSS plugin, you can just copy and paste the selector and attributes to your clean Custom CSS file.
  • 55. 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. Moving the Sidebar
  • 56. 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.
  • 57.
  • 58. 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.
  • 59. 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
  • 60. Hot Tip: 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.
  • 61.
  • 62.
  • 63. 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.
  • 64. 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
  • 65.
  • 66. 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
  • 67. 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.
  • 68. 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.
  • 69. 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.
  • 70. 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.
  • 71. 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.
  • 72. You can see I have my @import statements above where the fonts are actually called. Here is my style sheet:
  • 73. 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. Instead of width: 650px; you would use width: 60%;
  • 74. 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
  • 75.
  • 76.
  • 77.
  • 78. 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!