Style the Widgets – Case Study, Styling a Gardening Blog Part 6

by Rick Anderson on April 25, 2012

In part 6 of this series on Styling a Gardening Blog, we style the widgets using the Thesis Widget Styles plugin.

Rick:  And we have 4 recent posts. Now all we have left to do is to deal with the sidebar. And so in the sidebar, what we’re going to do is add the Widget Styles plugin so we can style the widgets.

Add the Thesis Widget Styles Plugin

Let’s add a new plugin. Go to Plugins, add new and then upload, choose the file. Now we need to download this Widget Styles plugin. Okay, here we go, save link as. Save it as Widget Styles. And, add new plugin. Upload, choose a file, Widget Styles, open and install.

So we’re going to essentially do this kind of a style for the widget. We have a little ebook here. Let’s see what the original looks like. Okay so all we really need to do is just to make these images a little bit smaller and we can go ahead and keep this.

Create 2 Widget Styles

Let’s go over to Appearance and Widgets for a moment. I guess we want to say width = 300 pixels. What happens if we just do that? Image = width, width = 300 px. I wonder if it will scale it. It might not. It might just distort it. No, it didn’t distort it. It just adjusted it.

Okay and so we’ll do the same thing with the next one, Grow Fantastic Tomatoes. And again, we’ll say width = 300 px and hit save. Okay, that worked fine.

I don’t really like the way the titles are working here. And so I think what we’re going to do is change those titles, in this case, to Georgia and we’re going to make them big and we’re going to center them in the space. So that’s our first widget style. We’re going to create 2 widget styles.

The first widget style is just going to change out the heading. So we’re going to customize the widget heading and then customize the heading font, that’s it. The Heading font style is going to be Georgia. Heading font size is going to be 24 pixels. Let’s make the heading font color this dark green here. Let’s have normal spacing. We’re going to remove all caps. We’re going to center the heading text. We’re going to hit save.

So that’s font style 1. Then under Appearance and Widgets, we will go here and choose style 1 and we’ll do that here too. And refresh this, there we go. “Dig in to your free ebook, Grow Fantastic Organic Tomatoes”. And I think maybe I want just a little bit of padding there too so let’s look at those styles and customize the heading padding. Let’s give ourselves a little bit of bottom padding, say 10 pixels.

Add Styling to the Categories to a Widget

Okay so the next thing we’re going to do is add the categories to this and we want to add the categories not as a drop down but as an actual list. And we’re going to do that with this light green background color and we’ll have the darker green heading.

And so that’s what our new widget style is and in this case, we’re going to customize the overall widget background. We’re going to customize its background color. We’re going to give it some padding. We’re going to customize the heading font. We’re going to customize the heading padding and then we’ll just see what it looks like.

In terms of our overall background color, we’re going to use that light green. Overall padding, we’re just going to give ourselves 20 pixels of padding all the way around it. In terms of our heading font style, it’s going to be Georgia… I think we did 18 there. And it was that dark green color and we’re going to use normal spacing. I think we’re going to remove the all caps thing there too. We’ll go ahead and center that heading text. Let’s go ahead and save it.

Go over to our widgets and let’s see what it looks like. It’s called topics now but we’re really going to call it categories. Let’s see, Article Categories and we’ll show that as a hierarchy instead pick 2, hit save, refresh.

Okay, Article Categories. Obviously, I was wrong about the size and we don’t want this blue either. I think what we want is white. I wonder what we did here though. We used a…white with a lightish green or dark green. It must be the same dark green so let’s come back over to the style. Let’s make our header font size 24, customize our font, our widget body.

So we’re going to customize the widget font and then body text style, it’s going to be Georgia. We’re going to say 14 pixels. Leave line height alone, make this that dark green again. Make the link color the dark green and make the hover color white. Save that and refresh it.

I think 14 is too small so we’re going to increase the size of that and we’re going to give ourselves a little bit of space. So heading padding, we’ll give ourselves 20 pixels of bottom padding. And I think the text size, we’re going to take up to 15 and hit save. Wrong one. Okay there we go, vertical categories.

And then what we can do is…I think for this one, let’s try using that one. Okay, Organic Cut Flowers goes way. Let’s type style 1 for a search, refresh it, enter search term here.

Add a Favicon

Okay so I guess the last thing we need to do is add our favicon. So if we come back over here to Thesis and Favicon Uploader, we’re going to remove this favicon and we’re going to add a new one. And that new one is under documents, websites, organic gardening, favicon and checkout our site. There we go.

Let’s see, I think one other thing we want to do is change this heading style. We want to use that tomato red for the heading style here and that tomato red is this color of red. Let’s see, Thesis Design Options. Okay, headlines. Okay that is the headline color and then… let’s see, what is the body color? We’ll leave that blue alone for the time being.

Widget Text Alignment In Footer

Okay so Jared, I’m going to unmute your microphone there. Okay Jared, so was there anything else?

Jared:  Hi. No.

Rick:  Okay.

Jared:  I think you’ve done wonderful. Thank you.

Rick:  You’re welcome.

Jared:  The drop down at the bottom, let me comment on the footer. The spacing, if you look at the left, between the r and the border and look at the right between list and the right, does that need to centered any better than what is it or what? Do you see what I’m talking about?

Rick:  I do. You could choose to right-align everything over here…

Jared:  The only reason I bring that up is because of the middle topic – could the title, line title of each be seen?

Rick:  Yes.

Jared: Would that help…

Rick:  Yeah, it absolutely could. We’ll take a look and see what that looks like. We did that under Footer Widgets and under the row heading style and we just say center heading text and hit save. So that’s what it looks like when we do that.

Jared:  It’s a little bit better that way.

Rick:  Well, it makes it clear that there’s not some funny gap over here, right? I mean, some things work just fine to right-align then over here and then you can choose to right-align it. But I don’t think lists like this right-align very well. I think if you add it to your reading list so that you had more choices here for people to choose from and it filled out then you’d probably be in good shape.

Jared:  And I put my other links and other sites in there but I catch the idea of what you’re doing.

Rick:  Right.

Jared:  The only other suggestion that I like is I like that picture I have for the ebook with her picture on it. But maybe that should go into Growing Tomatoes. I just want to save that picture.

Rick:  Well yeah, I mean, we certainly can. I think, now that the site’s where it is right here and as prominent as these two things are, you definitely want to work on those. Something wants to happen there. And we can turn on the Contact Form plugin.

Jared:  Oh, that was another thing, yeah.

Rick:  Notice how few of your old plugins we actually have working right now.

Jared:  Right. I’m not sure that Contact Form was really working very well.

Rick:  Well, I don’t know if it was working well or… oh I see. This is Contact Form 7 is what you’re doing there. I missed that…

Jared:  You’d suggest a better one?

Rick:  Well, Contact Form 7 is the one I use. I’m through creating a styling plugin for it so that you can easily style the forms.

{ 0 comments… add one now }

Leave a Comment

Previous post:

Next post: