Build Your Own Business Website header image

How to Have the Font Style on Posts that is Different from the Font Style on Pages

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

In this session we show how to have a font style on posts that is different from the font style on pages using Thesis custom content classes and discuss what needs to happen when using CSS to change the font style just in the content area of the post.

Video Transcript

Member: Okay, one last thing. When I want to change the fonts or the… on a post, a particular post, I do it and it changes the font style in the header too, on the menu bar.

Rick: No. Let’s go back… actually, let me just go… let’s look at… I’m looking at your page again so let’s go ahead and go in to the dashboard and then go to Thesis Design Options.

Member: I mean, if I want to change a particular text on all posts, I want to make this into a static page. I want to change the… sort of say the fonts or the font size on all posts.

Rick: Yes. So you go to that… on your Fonts, Colors and More, select content area and there’s where you can change your font size. That’s not going to have… that won’t have anything to do with your nav menu at all.

Member: Okay. Well I did a little CSS and it did change it. I was just… sort of say playing around and it changed the font style in the menu bar.

Rick: Well… and that would be because you used too high a level of a definition.

Member: Okay.

Rick: So if you’re going to use CSS and you want to change the font style in… just in the content area of the posts, you would need to reference the class format_text because all of the text inside the post is controlled by the definition of format_text. So if you go look at one of your posts quickly and I’ll show you want I’m talking about… no, I’m talking… from the front side, not the back side. Do you have Firebug installed?

Member: Yes, yes.

Rick: So just right click on some of that content and say Inspect Element. Go down to the content first and right click on it and just say Inspect Element. So you can see that that is right now, selected a p tag, a paragraph tag. And if you scroll up a little bit in Firefox, you can see that there, it’s inside the div class format text. See that div in Firefox… I mean, yeah next one down. That is the format text class and if you look at… just scroll down format text a little bit on the right, one box…yeah, there you go. If you scroll down a little bit, you can see there’s the font size. You just scrolled past the font size. And so the font for that area is controlled by format text p and so if you want to change the font size for format text only then that’s where you would… that’s the CSS rule you would change. And so it would be .custom .format_text p and then put the font definition in that way.

Member: Okay okay alright. That makes sense now. Now will I assign it to a particular page or will that be for all posts?

Rick: That’s going to apply to all text on all pages and all posts. Now if you want it to only apply it to posts then you need to use the content class as well. So if you’re down in Firebug again for a moment… actually, I’ll take control of this for you and I’ll show you what I mean.

Member: Okay.

Rick: So back to me showing my screen, I’m on a post. What qualities to look for in a man… this is a post. So we inspect this element and we are inside of div class… this is the content class. So type-post would be what you would preface it with. So let’s just say for example that you want to change it on all posts but on no pages. You would say .custom .type-post .format_text p and that would affect only posts but not pages. If we go over to pages and look at that same thing, you can see that this does not have that same class assigned to it, post type or type post. That’s not assigned to a page and it’s also not assigned to an archive page. So if you’re over in an archive page and look at this text, it’s also not assigned to that. Oh actually it is assigned to that. Yeah so that text style is going to affect this text style too in the archive pages. Is that not what you want?

Member: I’m just trying to do posts only. That’s a…

Rick: Well so the easiest way to do that then is to add a custom body class to posts. And you’re going to have to do that using php but there is a filter called the Thesis custom class filter.

Member: One in each post? Within the edit part of the post, the back end, right?

Rick: Well actually, it’s a piece of code in php so it looks… let’s see, if we look at the child theme class I’m teaching right now and… the filter looks like this. Let’s see… well actually, that’s not the filter, custom body class. Where is my custom body class filter? Yeah, this is it here. So you would write a function similar to this where you’d say if is single rather than if is home. If is single classes brackets equals and then you give it some kind of a class name that you would then reference in your custom css. Have you done any php work?

Member: No, not too… no.

Rick: Okay, why don’t you post this to me as a question on the forum? I’ll give you some code to use. The code’s not hard but it takes a good half hour to explain it. And you can just cut it and paste it and then use it.

Member: Okay alright. Alright, yeah. I mean, as far as altering the site, I mean, that’s all I’m looking for. Nothing major right now but those items were the major ones.

Rick: Okay well, post that question to me in the forum and I’ll give you some code to stick in your custom functions php file. That’ll give you the ability then to reference only posts.

Member: Okay, okay. Alright.

Rick: Okay?

Member: I think that’s it.

Rick: Great. Well, thank you very much for joining us.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment