Build Your Own Business Website header image

How to upgrade from Thesis 1.x to Thesis 2 Using the Thesis Classic Skin – Part 11 – Add Custom Content Styles

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

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.

Now, we’re moving on in this Thesis 2 upgrade to implement some of our custom content styles. Let’s compare our Thesis 1.8 site to what we have set up in Thesis 2 so far. Notice how this section here doesn’t look anything like this picture, it doesn’t look anything like that. Also, notice how this text is much larger than the other text. That’s because this text is wrapped inside of a div with the class of byob-emphasis and this is wrapped in a div with the specific class and we can see that here.

Migrate Custom Code to Thesis 2 for Content Styling

If we inspect this element, byob-ebook-download is the class that wraps this whole thing so we can expect to see the CSS for this in our CSS clip file that we did but this also exists here in this content. If we look inside the post content, you can see this is all wrapped in a class of byob-emphasis. This is the kind of thing where we’re going to use some custom code that we’re just going to migrate to Thesis without really having to make any changes to it.

Change Font Settings and Color

We’re just going to come all the way to the top here and scroll down to find that .byob-emphasis one. Okay so we’ve got this .byob-emphasis, I’m going to copy that then come back over to the skin in the skin editor, go to custom CSS and all I’m going to do is just paste it there. Now, it says font family is Georgia, is that what this really looks like? Yeah, I did, I changed that to Georgia and it goes back into Arial so there we go, .byob-emphasis, font size is a bit bigger, line-height is bigger, the color is different then we have Georgia and margin-bottom.

If we come over and look at our page for a second, you can see it happened. We got this revised color and revised size and everything looks pretty good there. The same kind of issue exists with that contact form so we can skip down, we’re going to skip past the WP eStore for a moment, past the footer and here’s our ebook-download. We’re just going to copy all of this ebook-download code.

Actually, really this stuff just keeps on going because there’s several other forms that use this so we’ve got this support question form. I’m just going to go ahead and copy all of this because it’s going to be able to be used just as it is.

We’re quite a bit closer to this but I think we’re going to have to do a little bit of tweaking so let’s just go ahead and save this then refresh it and let’s compare the two. These things want to be bolder and I want a little bit more room there and I need some border around that so if I inspect this, this is h3 of our ebook-download. I guess all we have to do is bolden that, let’s see so h3 and h4 should both be bold.

If we come back over to our ebook-download, I guess we’ll just say, font-weight-bold for h3 and actually, I think we want that for h4 as well so I think we’ll just paste that there, let’s see if that helps. The font size is a little too small though too and I think maybe we’ll make this 18px instead, okay 24px. I think it needs to be a little bit narrower than that so obviously, there’s a bit of trial and error here, 20px, font-weight-bold, there we go.

Set Up Padding and Margin

I think we’ve got too much padding at the top and I’m not quite sure where that padding is coming from so let’s ask ourselves where it’s coming from. It’s got quite a bit of top margin so I’m going to reduce the top margin in fact, I’m going to take the top margin down to 0. Actually, I thought these things would transfer over perfectly and they don’t quite but that looks good. I guess we need a little bit of space under that, let’s see, mc_embed_signup. Not sure if I have, no I don’t actually have a style setup for that, you get the point I think.

We may have to do a bit of fine tuning here to get this exactly the way it is or the way it should be but the underlying concept is still the same. We’ve copied in our code and we made a few minor adjustments to the code in order to make this stuff continue to work. Actually, this needs to happen over here as well so that’s the chapter-download and if we come over and look at chapter-download, it almost feels like this is going to be the same.

Assign CSS Definition to the Selectors

What we should do is just repeat that up here so ebook-download h3, chapter-download h3 and now we’ve got our ebook h4 and our chapter-download h4. So we only have to have that CSS definition there once for both selectors.

That’s better and we have the same question that also needs to have that same thing happen so we’ll come over to our .byob-question h3 and h4, here we go. Now, all 3 of those selector have exactly the same style, save our CSS, come back over and take a look at it, it looks right.

I’m going to obviously have to come in and fix this and that is our text area and its width is actually hard coded so to fix that, I’m going to need to go into the widget itself and change that columns to something that fits better. Columns is 33 so we’ll come back over to, let’s save where we are, go back over to the site, go over to Appearance and Widgets, that’s in Contact Form 7 and that would be this one here.

Change Column Size in Contact Form 7

What happens is, it’s automatically putting in the columns so what we will do, inspect that again, cols is what we’re looking for. Just need the exact wording there, cols=”33″, save our contact form, refresh our page and that should be in good shape. No, because I put it in the wrong spot, that’s hilarious.

No, it is the right spot. Let’s see, okay let’s generate a text area, let’s make that 32. No, make that 32 so that’s the right syntax for this, 33x. I forgot the syntax in Contact Form 7 to create that. There we go, perfect. So we’ve got sidebar styles and we’ve got style done and essentially, this just demonstrated how to import CSS into your skin editor.

Now, there’s one other thing I want to show in that and that is CSS that you actually need to change so for a moment, we’re going to come back over here and take a look at this because this CSS actually needs to change in order to work. This is the spacing for one of the widgets, the BYOB Ads Widget and it lines everything up and gives them spacing and that kind of stuff. However, it’s not going to work as it looks like this.

Removing “Custom” in Selectors in Thesis 2

If you are familiar with making these kinds of changes in Thesis, you’d know that I taught that it was customary to put custom in front of everything in your custom CSS but you don’t do that for in Thesis 2.

If you do that, it won’t work because the custom body class has not been added to anything here so if you left that in place, this CSS simply wouldn’t affect the required elements so if you’ve got custom in front of some of your selectors, you need to make sure to remove those in order for this to work properly.

If we just refresh this now, this thing is a little bit better spaced. There’s still flaws here but it doesn’t have anything to do with CSS now, it has to do with these pictures being the wrong size and that kind of thing. So that’s how to set up custom content.

Obviously, you could have done all of this stuff with packages but when you’re converting a site like this and you already have the code working, I don’t see any reason why you need to create a new package as long as you recognize what you’re doing when you do this so that’s why I want to show it to you this way.

0 Comments… add one
0 comments… add one

Leave a Comment