Build Your Own Business Website header image

Community Library Website Case Study – Part 26, Adjust the Teaser Styling Using Design Options

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.

This is the twenty sixth in a series of live lessons on using WordPress and Thesis as a Content Management System (CMS). In this lesson we adjust the styling by enlarging the image size, getting rid of the extraneous date, changing the “Read the full article” to “Read more”, increasing the column size to make the teasers wider and increasing the post title font size. We accomplish all this in Thesis Design Options.

Video Transcript

So now the next step then is to style this stuff. And the first step in styling, I think, should be enlarging our image size, getting rid of this date, and changing the Read the full article, right? Because if we look at our preview here, we’ve got a larger image…actually I think we have a little larger heading here so we’ll do that and we want Read More, not Read the full article.

So we’re going to do that from inside our site obviously and… I thought I’d logged in to this, apparently not. WP admin, okay, byobrick…and so, we go to Design Options, might as well start off with default thumbnail settings. I think I’m going to take these up to 100 for a moment, let’s see how that looks. And we’re going to leave it before post and page because that will allow us to… oh, look at that. There is a right position. Okay, we’ll select right here for this.

Okay so we’ve got that and then we want to come over to our teaser display options and we’re going to turn off date and then we’re going to change our link to Full Article text to Read More with dots and then we save that. We might as well take a look at that for a moment.

Okay, so our picture’s over there, we’ve got Read More and I don’t know… if maybe 100 by 100 is making it…well you know, let’s just go ahead and bite the bullet on that column width for a second here and let’s make that 200 pixels wide instead of 300 pixels wide.

So Design Options… okay, we can look at 80 by 80. You know, we were just looking… the original was 88 by… I mean, the one I had here showing was 88 by 88 and it seemed to me like that was a little too small. But we’ll go back and try that.

Let’s go to columns… oh, so let’s go to 600. Actually, let’s go to 700 and we’ll go to 200. We’ll save and then we’ll go back to site. Okay so now our teaser’s a little bit wider. You know, maybe that needs to be a little wider. Let’s go back to this for a second.

And we’ll go down to Design Options and okay, 650, 250 and then thumbnail settings… let’s take them down to 90. We’ll save that, check it out.

Okay well, I think that looks pretty good. So now, we just have to add some styling to this and well, actually not just… let’s increase the size of our heading here for just a little bit.

So Design Options again and teaser font sizes. Okay so, post title… let’s make that 18 and yeah, so let’s do that. Save, check it. Obviously, making ruses like this is iterative.

Yeah, that’s good. I like that better, stands out a little bit more.

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