WordPress CSS Tips for Beginners
Articles Blog

WordPress CSS Tips for Beginners

August 11, 2019

(upbeat music) – Hi everyone, welcome
to another WordPress Wednesdays video, my name
is Kori Ashton and I’m one of the WordPress
experts here at WebTegrity. And today’s we’re gonna
get started on WordPress CSS tips for the total beginner. Check this out. So just really just briefly
before we get started on any sort of changes
to your style sheet, I have this tip right here. We wanna be sure to backup
your WordPress style sheet. So whatever you do
before we get excited and get started and changing
things, we wanna just be sure that you’ve got either a
backup of the style sheet itself or backup your whole
WordPress website if you can. Also, in a little bit
more advanced area, if you wanted to make
these changes you could be using child theme to make
these customization changes. Or, some authors are
really cool and give you a space called a custom CSS
box, something like this, where you can drop in
some style sheet elements and overwrite the main
style sheet and this kind of acts like a child
theme in some ways when it comes to your additional CSS. So this is a pretty
cool feature. Be sure to check if your author
has allowed a box like that. If not, you can either
make a child theme, or you can go to your
appearance, go to editor, and this of course is your
style sheet, where you can make all of these changes that
we’re about to learn. So the very first tip
we’re gonna start off with is changing your
font color and size. A lot of authors will give
you the opportunity to make these changes inside of an area
to customize in your theme. All of that varies, but
sometimes you can go to something that looks like
a typography, and you can make some changes immediately
using options like this. But, let’s say there’s
something in your website like maybe the title text up
here you wanted to change. Or maybe this area here,
you wanted to change this to a red color, and you don’t
know how to do that, and the author didn’t give
you the ability to easily. This is how we do it. All of the tips I’m about
to show you, I’m going to use a free extension
inside of Firefox, which is the browser I use. So this is a free
extension called Firebug. If you jump over there
and download that, you can either do a
Google search for Firebug, or inside the article here
down on the second tip I have I have the link right
here to the Firebug tool. Download that, activate
it, and that’s the plug-in, that’s the extension
we’re gonna use right now. So over here on the
right side, once you activate that Firebug
tool, you’ll have a little bug appear in
your dashboard area. You click on that, and then
a screen opens up that’s gonna show you the left
side of just some html here, what your website looks
like, and the right side here is this style
sheet information. Don’t get freaked out,
this is a lot of nerd code, but I’m gonna walk you
through how to use this tool so you can see how
powerful it is. There’s a little
icon over here on the left side that’s
a select element. When you click on that,
you can see now it gives you a box that allows
you to kind of hover over a particular spot
on your website. And it allows you to select it. So I want to change the
color of this text here. So I’m gonna click on it. And immediately that window
opens back up for Firebug. It’s gonna show me that the
area I’ve selected in the html is the H1 or the header
one, the class of it is called entry title, and
there’s my text right there. On this right side,
I see entry title. And it’s showing me some
of the options that are manipulating that bit
of text right here. What I see right
here is entry title. Here’s the color code,
and we see that’s kind of a darker gray, almost
a black color code. So if I bring this
window down we’ll be able to see kind of both
view here for a second. I am going to change this
color code option here to be a red color and
see what that looks like. See if I like the way it looks. FF one, two, three, four. And right away, you see
it’s this bright red color that I’ve been able
to change it to. So this little Firebug tool
really is just used as kind of a very quick way to evaluate
what’s going on in your page. In order to actually make
this change permanent, what I would do is I
would select entry title. I’m gonna click on it and
copy that to my clipboard. And close down that screen, come over here to theme options. You can either go into
your style sheet or your custom CSS box
and overwrite things. If I wanted to use a style
sheet or a child theme, this is how I’d do it, I’d drop that
in, open up the element, write in color, use the hashtag
and put my color code. One, two, three,
four, there you go. Close that element completely. And click save options. Coming back to the front
side of my website, if I click refresh, now
that should stay that nice red color, and across the
whole website now, any of my entry titles should
be this nice red color. I could also make that
change if I did not have one of these theme option boxes
or if I did not want to use a child theme to make
these manipulations. I could actually go directly
into the style sheet itself. I would click on
appearance, go to editor. I would do a search
for entry title. And this is that color
code that we saw earlier. We wanna take that out. We wanna replace it with the color code we want. Scroll down, click update file. And now that will overwrite
what we originally had there. Remember though, that anytime
you update your theme, whenever that’s gonna be
required, anything you’re doing inside this style sheet
could easily be overwritten. So that’s one reason why
you wanna be sure to go ahead and use either that custom
CSS box, or a child theme. The same way we just manipulated
it to change the color, is the same way we
would manipulate it
to change the size. So we come up here, click
on Firebug, select the tool that we want to grab
the area to manipulate, here entry title we see the
color code that we dropped in. Font size is set
to 32 right now. So if you were to
increase that font size, increase that number say to
42 you see how big it is? Or we can also minimize
it, take it down to 22. You can play around with
whatever number you wanna put in there and see how that
manipulates the size of it. Again, we’re gonna go back
to that same area that we just made the changes to
the color, and here’s our font size here, if we wanted
to change that here inside the style sheet we would
manipulate that number, click update, and the change
would be live to the website. Just be sure that whenever
you’re affecting things like this, to check throughout
the whole website and be sure that even though we’re
only manipulating the entry title area, you want to be
sure that that’s not changing anything else on your website. It should only be
affecting the entry title. All right, moving right
along we’re gonna go ahead and learn how to
change a background
color on your website. Let’s say that your
author doesn’t allow
you to very quickly and easily change whatever
color is around your page, but you want to do that, you
want something more dynamic. Well the way we’re gonna
do that is first of all you want to figure out what
kind of a color you actually want back there, okay? So I use another
free extension on Firefox called ColorZilla. So I’m just gonna click
on that and run down here and maybe say I like
this turquoise color. Let’s choose that
color, and that’s the color I want to be
set as my background. So since I’m using that
fun little extension called ColorZilla,
it’s now copied the color code that color
is onto my clipboard. So I can come now with
my Firebug extension, click on my select element tool, and on the background
of my page here, come up to the body area and
see here, check this out. Right here it says
background color F2 F2 F2 F2. And that’s that little
light gray color. We want to change that. And just see if this
is the right area to be manipulating and adding in
and you can see already, there is that beautiful pop
of turquoise behind our page. So we know that we’re
looking for the body tag. That’s the area we
want to go into to manipulate the background
color for every single page or post
on your website. So in order to make that
change actually go live on your website, we need to go to the
body area of your style sheet. Now again, whether that’s inside
of a child theme, or inside of your editor area here, we’re
gonna do a search for body. And you don’t want color,
you want background color. So we would change this area
here with our color code, and we would click update file. That’s actually how you would
change the background color on any area, maybe you wanted
your widget box over here, to have that turquoise
background color. You would just come over,
highlight this area, and here we find it says the
background color is white. We would change that, and you see now that
everything running down your right sidebar has this beautiful
background color on it. It’s that simple to
make those changes, but be sure that you’re
affecting the correct area. This particular author
called his sidebar well. Who would’ve known that,
so sometimes it’s not always name something
obvious and that’s why this Firebug tool is a really
cool resource to have, to be able to very quickly
and easily be able to find those areas that you
want to manipulate. The fourth tip I
want to show you is affecting links on your website. A lot of authors will allow
you to do this very quickly and easily inside
of a WYSIWYG area, or your dashboard area
to customize a theme. But if they don’t, and
you really want your text that’s linked on an article
to be a different color from anything else, a
nice contrasting color so that as people are scrolling
down and reading your article, they can quickly see
what text is an actual link, and so their eyes are
drawn to those things. So in order to make those
happen, you’ll want to make changes to the A element
inside of your style sheet. And you can manipulate
different things, like when it’s hovered
over maybe what color it changes to whenever you’re
cursor is hovered over a link. So these are all the
different options here that you can use to
affect a link that’s maybe when it’s visited, or again
when it’s hovered over when it’s active, and you
would do that just by, again if you wanted to
use your Firebug tool. Come over and click on
a link on your page, and you’d be able to
see right away that all the links are set to this color. So if you wanted to
manipulate that you would go in your style sheet and
look for the A element, and those are your links,
again that will affect every text link across
your entire website. It might, depending upon
how your author coded, also affect a top menu. If you had one or any one of
your right side menu options. So just be sure that
whenever you’re making those changes, that
those things are not affected if you don’t
want them to be. List styles, this is pretty
cool because you can do all sorts of fun stuff to
manipulate how these bullet points look, how far
over things are indented. If you wanted to have an
actual image be here instead of a circle, you can do that
by using these codes here. This gives you a couple
of different options. This would actually
manipulate and change things to an image, so you’d have
to upload it to your website, through your media folder
you can upload it here if you wanted to add a
new image to your media library you can
add an icon there. And then you would have
the path of wherever that image sits, and you would
just paste it right there. And this is the code then
that you would go look for inside your style
sheet, the UL LI. So that’s for your list items. And there’s all sorts
of different list types you can do, you
can change to circles, that’s what we show here. If you wanted those
to be squares, you would just come
here, select an item, and we would see right
away inside of our UL that it doesn’t even
actually have by default that makes them be circles,
but if we wanted to manipulate those we
could add in list style, and we could say square. And notice right up here, it’s
changed now to square icons. Pretty cool, so there’s
also a link I’ve listed here inside the article that’ll
give you all sorts of different options that you
can go to and check those out. Hide element, this is a
really cool resource that some people want to hide certain
features on their website. Maybe something like a
search bar is up here, and instead of just, obviously
on this one if I wanted to remove that I could go
into my appearance and go to widgets, and just
take that search bar out, you know delete it. But maybe an author has
coded that search bar to sit up here in your header
and you can’t figure out how to hide that option. You can actually use
something called display none. And it will quote unquote hide
an item, or not display it. So using my Firebug tool,
I’m just clicking on the element to figure
out where that is. I’m gonna come here and
type in display none, and immediately
that takes it away. And if that little button is
there, you could go ahead and just keep on adding that
option of display none. There you go, and
that’s totally hidden. The only thing you need, this
is just a warning, notice that I’m manipulating something
that says input field, it wasn’t just a search bar
that I was trying to hide. This input field might
actually affect any other contact forms
or any other forms that you might have
on your website. So just be sure that
whenever you display none, like that on your
website, that it has not affected anything
else on your website. But I give you that exact
code right here on number six. Number seven, border styles. This is what I was referencing
earlier when it comes to adding a border around an image. You can also add a border
around content boxes like this. You see there’s this very thin, one pixel line around here. You can manipulate borders
by increasing the width size of the border,
the number here. The higher of course,
the thicker the line. You can manipulate how
it actually displays. Do you want it to be
dotted or dashed, double ridge, all sorts
of options here. And then you can also
change the color. It doesn’t have to be that black border we
were talking about. So if you wanted to you could
make it a nice gray color, or turquoise or whatever
color you want to match the beautiful branding
on your website. Aligning things on your
WordPress website is pretty fun. Let’s say you didn’t
want something like this option here aligned
left, you wanted it actually centered down the page. That can be tricky sometimes. So you want to come in here
using your Firebug tool. I’m gonna grab the
select element. And I’m gonna look here and see what this author
has coded for me. These are H2 tags
sitting in here. So I want to come
over here to H2. Let me drop down this
screen a little bit you can see one while
we’re doing this. H2, I’m just gonna add
the option here for text, align, center. Check that out, immediately
all my H2s on the whole website are gonna be beautifully
centered right down the page. Just be sure again to
note that this does not just only affect this one
page, this will affect any H2 you have on your website. But there are all sorts
of options so right align, left align or centered,
you can just kinda have fun and play around with
what that looks like. I’m gonna refresh and take
things back to that left side alignment and move
onto number nine. Margins to add some
space around things. This is pretty fun because
if you say for instance you didn’t like the fact that
this category’s title here that this content was so
close or maybe you needed it closer, you didn’t
like that big gap there. You manipulate that by playing
around with margins spacing. Some authors use padding. It kinda just depends on
what they’ve placed in there. Let’s see here, it says second widget margin bottom 50 pixels. So that’s the margin at the
bottom of the widget box. Giving this beautiful
padding here between each individual box. So if you didn’t want
that much space between the two boxes, you could
zip that up, and you see right away taking it from
50 pixels to 30 pixels minimize that
spacing beautifully. But if we wanted to
manipulate exactly what I was saying earlier, maybe
shrinking this up, we would come here to the
categories area, click on that, and we
see that the secondary widget H3 which is
typically that title. That’s the color of
that name category has a margin bottom
of 25 pixels. We don’t want that,
we want 15 pixels, we wanna zip that
up a little bit. Making that change
obviously inside of Firebug does not actually
affect your website. This is just kind of playing
around with how that looks. So we’ve gotta highlight
that element title, and either again go into
your child theme and make that change, or go
into your actual editor here and make that change. The margin bottom 25,
we don’t want it to be 25 we want it to be 15. And just make that save,
and you’ll see that change happen across
your entire website. Very cool, and there’s all
sorts of options you can do with margin spacing, so
I’ve given you that kind of here, it says you know if
you wanted to manipulate different spacing on
different sides of the element the top, right, bottom
or left, you can kinda play around with that here. Number 10 and our
final tip is the exclamation point
important tip of the day. This is not the best practice. I wanna stress that. You really don’t wanna
have to stress to overwrite something inside of
your style sheet because later on, if you’ve
forgotten you’ve done that, it’s very difficult to
overwrite this element. So you really need to
be sure if you can to go into the actual
element itself and make the change to it or write
it inside of your style sheet to manipulate things,
but if you’re struggling, if you’ve said Kori, you
know I’ve done everything you told me to do and
it’s still not changing anything, nothing is
center aligning like I’m telling it to do,
it’s not working. You can add this
exclamation important inside of the
element option here, and that should stress
to overwrite anything else found in any
other style sheet. This basically then
trumps anything else inside of your style sheet. So it’s a really
cool option to use, just again not the best
option because if you ever had to come back
and change things sometimes that could cause a
little bit more difficulty. So the most common
errors that happen inside of manipulating anything
inside of your WordPress CSS is typically misspellings. So if you go in there
and you type in you know text align and you’ve
misspelled the word align, your item is not going
to align correctly. So be sure to double
check all your spellings. And also another common
error is forgetting to end. You know you’ve gotta
put this end element on this end parenthesis
on all of your elements whenever you wanna close them. So no matter what, just
take your time and be sure to save the original file
of your style sheet so that you don’t have a headache
later on down the road in case you do kind of
whoops mess up something. I hope all of those tips
help you get a better understanding of how you
can change your theme and make it look
exactly like you want. If you have some more
questions, please be sure if you’re in
the San Antonio area to check out our WordPress
meet up group. We meet very regularly,
and we also are gonna be producing these videos
every single Wednesday of the month so that you
can come back here to our YouTube channel, subscribe
and check out some great videos that are gonna cover
a wide range of topics. Anywhere from responsive
design to developing resources to SEO topics, everything
to do with WordPress itself. So check out the links
below, connect with us soon and we’ll see
you next Wednesday. Bye bye y’all. (upbeat music)

Only registered users can comment.

  1. Hello, I've been watching lots of your videos, they are very good thank you. I was wondering if you could tell me how to get the search box when you search for the entry title on the style sheet? (around the 5.53minutes). Im finding it hard looking through the text for the entry title to change the colour. This would be a great help if it is not too hard to do. Thanks.

  2. Using Vantage them from wordpress – first website for me. Have installed CSS Custom as a plugin and have been able to change the background color on almost everything. The part I'm stumped on is not on the homepage – it's additional pages. When i search the code with firebug it comes up as p{ – a paragrpah background. Copying and pasting this to Custom CSS and then changing the background color has no effect. i can see the correction made when I correct the code in the inspector mode. What am I missing when I copy/paste?

  3. Great Great Great…hats offf u just solved my one of big headache ….thank u so much these css things are so horrible
    bt u explained very easily ..suggest me more abt like this things abt css
    thank u once again
    keep posting

  4. hey as I saw, you were changing css codes from firfox addon..my question is..can anyone change that code without login into your website or only you can change that code..?
    Please explain in brief.

  5. okay.. trying to track down your video on changing the menu bar color…. this video is very old. Firebug doesn't exist anymore.. now what?

  6. Wow this video is a gem full of information! Those extensions are amazing!!! Thank you for sharing.

Leave a Reply

Your email address will not be published. Required fields are marked *