Build Your Own Business Website header image

Change the Heading and Tagline Styling in the 2010 Theme for WordPress

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

A new member is using the 2010 Theme for WordPress and would like to change the heading, tagline and body font styles and sizes. We demonstrate briefly how you would accomplish this very easily in Thesis Design Options and some of the differences in editing Thesis versus the 2010 Theme. Then we show how to change some of the styles in the style.css file to affect the changes in the 2010 Theme using Firebug and Web Developer. We also talk about web safe fonts and other fonts that would require custom programming in the 2010 Theme.

Video Transcript

Rick: Ella asks, “I’d like to change the font on my welcome page and the header font. My WordPress is chicagomindfulness”. Actually Ella, let’s just see if your microphone is working. I’m going to unmute you right now and can you jump in.

Ella: Yeah, can you hear me?

Rick: Oh, I can. I can hear you just fine.

Ella: Perfect.

Rick: Okay, so let’s see if we can I guess I’m just going to have to type the name out here. Actually we’ll do it in Firefox too so we can use our tools. So that is www.chicagomindfulnesspsychotherapy.com. Hopefully I spelled that right, okay I did, good. So you haven’t gotten to using Thesis yet, is that correct?

Ella: That’s correct. Thesis 2 have the WordPress theme, is that right?

Rick: Yes, that is right.

Ella: Okay.

Rick: And this is the Twenty Ten theme and the Twenty Ten theme is a bit more difficult to change this sort of thing than it is in Thesis but is this what you’re trying to change here, Georgia Jones, LCSW?

Ella: Yeah, I need to change the font of that and then you can see that the right, “Therapy for individuals and couples.”

Rick: Yeah.

Ella: I’d like to change that font as well and the text underneath “Welcome” we also want to change that. She needs it

Rick: This text right here?

Ella: Yeah.

Rick: Okay. So I’m going to first show you how you could do it in Thesis because you’ll see what I’m talking about here in a moment then. Actually, although I think I will go back to Community Library Case Study site and log in to it. See the only way to do that in Twenty Ten is to physically edit your style CSS stylesheet, I’ll show you how to do that but Thesis gives you the chance of just you know, setting some settings to make that work so let’s see, byobrick. So if you were using the Thesis theme and then you would just come down to Design Options and under Fonts, Colors and More under your header, you can choose the header font.

It can either be the body font which in this case is Georgia and this is where you would change that stuff under “Welcome” so you can change the you know, font type you want to use here and the font colors and also on the next one down, the font size and then for that header which is the main site title, you can either use the same font as it’s used by the site or you can choose another font style and you can set its height and you can set its color and then the same thing is true with the tagline.

Again, it can either be inherited from the header or it can be anything else you may want and again, you can set its height and you can set its color. So it’s quite easy to do this via Thesis, it’s not that easy to do inside of Twenty Ten but we’ll go ahead and do it anyway. So you probably have not look at my Tools of the Trade videos, is that a fair thing to say?

Ella: The Tools of the Trade, is that?

Rick: Yeah, I have a set of videos called Tools of the Trade.

Ella: I definitely watched some of your videos, I’m not recognizing the term Tools of the Trade though so probably not.

Rick: Okay. Well so I have a set of videos called Tools of the Trade which shows how to use these various Firefox add ons for the purpose that we’re going to do right now and the Firefox add ons I’m going to be using are Firebug which is this little icon down here and then web developer which is this toolbar across the top and we’re going to use Firebug to identify what the selector is for this heading and once we know the name of the selector for this heading, we are going to use Edit CSS in the web developer toolbar to change the heading font.

So without further adieu we’ll just go ahead and do that so we’ll inspect the element here and come on, there we go and then we’ll Edit CSS and in Twenty Ten, Twenty Ten follows the WordPress convention for stylesheet naming and so Twenty Ten has a stylesheet named style.css. Now, you have a choice either to make a child theme of Twenty Ten which we won’t go into here or you can change the style.css and that’s what we’re going to do right now, we’re going to go ahead and change style.css.

So if we inspect the element, this element is <h1 id=””site-title”> and so the definition of that right now is it’s id=”site-title” it floats left, it’s got a font size of 30 pixels, it’s got a line height of 36 pixels, it’s got margins and widths and what font did you want to change it to?

Ella: Like more of a script to softer fonts, I don’t know if my options would be

Rick: Well, your best bet would be to choose web safe fonts at this point so I’m going to show you a resource for that which is w3schools and w3schools.com is the source that I use for teaching and if we go over to Learn CSS and then look at Styling Fonts, here are the web safe fonts and right now what you have is Times New Roman, Georgia, Arial, Verdana, Courier New and Lucida Console. There are a couple of other safe-ish fonts let’s see.

Ella: I wonder if I could upload an image then instead because I could create a jpeg of the font that I want in that size.

Rick: Well, you certainly can but what happens is it when you upload the jpeg it goes here rather than here.

Ella: Okay.

Rick: You know, actually there are thousands of fonts you could use but anything other than a web safe font is going to require a custom programming in Twenty Ten. You could use TypeKit fonts which is one system of using a customize fonts or you could use the kind that I like to use which is escaping my mind at the moment but it’s a javascript based font system that you can programmatically add to your site and then use that font family but let’s just go ahead give you the easy answer to the question, how do you change this font and what are your font family choices and let’s just change it to script.

Let’s just go down to the bottom of this whole page of style.css and type in #site-title, opening and closing brackets and then just say font-family:script; it’s not rendering properly. Okay, let’s use sans. No, okay we’re going to get to some place here, web safe font combinations, sans, okay Serif Fonts. I’m sorry I thought there was a script font that fit the definition of web safe but just for grins just so we can demonstrate how this works, let’s go ahead and copy this name here and come back over to that page and instead of putting in script let’s put that in.

So you can see how that changed, right because we have overwritten the font family. Well actually the font family style I hadn’t been assigned to site title, it must have been assigned earlier in oh yeah, it was assigned under the h tags. All the h tags were given this font family of Helvetica New and we just gave it you know, gave this one specific element the font family of Comic Sans MS. Now, what did you want to do with this?

Ella: Make it (12:20).

Rick: Okay, so we do the same thing, right click on that and inspect the element and it has a div id of “site-description” and let’s see, “site-description” where is it getting its font size from? It’s getting its font size from body so instead of 12 pixels we’ll make it say, 18 pixels, does that sound right or we’re trying?

Okay. So if we copy that again, down here at the bottom and we’ll just say font-size:18px. Now because this was given a width, you know and the 18 pixels it’s too big at that 18 pixels to fit in that width and made it two lines. If you want to take it down to 1 line you might be able to just get rid of width, well that’s not such a great idea. Maybe what we do is we increase the width, let’s just do it in this for just a second and see whether or not that works. I guess what we have to do is decrease the width of this too because I think that’s got a width.

Ella: So this whole interface that you’re working with, I’m sorry if these questions are redundant and I’m just new to this. I mean like when I go to right click on these things, I don’t have these options, like how do I get to this tool area?

Rick: Yeah. Now, what you should do is you should start off with the Tools of the Trade videos.

Ella: Okay.

Rick: Although you know to tell you the truth, the overwhelming majority of the site is about Thesis.

Ella: Okay.

Rick: And so the Tools of the Trade addressed questions of you know, how do you do this in Thesis not how do you do this in Twenty Ten and there is a big difference not only because you can make these kinds of changes without touching a code in Thesis but also because it uses different files also right, I’m using style.css. Well, in my lessons, the way Thesis works is you never want to edit style.css, you would edit instead what’s called is custom.css, is the file that you edit when you want to make this kind of change and you know, most of the participants here are not familiar with this format because you know, because they aren’t familiar with how Twenty Ten works.

Ella: Okay. I should download Thesis and see if I can

Rick: Well what you should do is you should consider what your options are. You know, Thesis is a very easily, especially you know, when you look at this and what you have to do in order to make this stuff the way you want it. Thesis is a very easily edited theme in fact, it’s so easily edited that people don’t even think about you know, the programming side of doing these things and they move on to doing stuff that’s a lot more difficult because this stuff is so easy in Thesis but it’s also not a free theme and so you’ll spend 87 bucks or 89 bucks or whatever it happens to be in order to get that functionality but you know, I mean we’ve got 400 and some odd videos on the site, almost all of them are about how to do stuff in Thesis and there aren’t any about how to do stuff in Twenty Ten.

Ella: Okay.

Rick: But having said, you asked a question I didn’t really answer which is how do you get this right click stuff? These are called Firefox add ons and if you search Firefox add ons, the two that I’m using here are Firebug which is what is producing this interface here and web developer which produces this interface here and this is a system that I follow when I’m editing CSS.

When I’m editing something in CSS I use Firebug to identify what I need to edit, I use web developer to actually test the edit and then I use my text editor you know, my text editor actually change the page so what would normally happen is I would normally take this stuff that I type down here, copy it, come over to my code editor and in the appropriate place paste it and then save this file, upload the file to my site and look at it that way. So you know, you just saw a small part of the process which is why I suggest that you look at those introductory videos.

The use of web developer and Firebug like this is not in any way unique to Thesis. You know, lots of professional web designers use these tools together like this in conjunction with each other for the purpose of testing CSS edits however, it is just a test because as soon as you refresh the page, that stuff all goes away because you didn’t change the code for the site actually, you just changed the code for this browser session and so if I had another browser window opened, it wouldn’t look that, it would still look like it would normally is because we’re not really changing the code, we’re just testing that change to see what it would look like. So you have to copy the code that you’ve used for testing and paste it into the appropriate file which in that case was style.css.

Ella: Okay.

Rick: So.

Ella: Okay.

Rick: It’s the hard way to accomplish what you want to accomplish and there are you know, I strongly suggest Thesis but there are other options out there available to you including one that’s free that has an awful lot of customization available to it, it’s called Suffusion and that might be something worth considering as well but it’s not nearly as flexible or as fast as Thesis is but it is free.

Ella: Okay. Thank you.

Rick: Okay? Oh, you’re welcome.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment