Build Your Own Business Website header image

Part 22 – Setup the Widget 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 that we have our Feature Area content styles created we need to move on to styling our widgets. We have a widget title, a widget subtitle and some widgets text. Let’s look at the HTML site. This is the widget title, this is the widget subtitle and this is the widget text. So those are the three things that we need to style.

Sidebar Heading

I think we’ll just make that standard. That starts off in Skin Design with a sidebar heading. I’m going to make it a little bigger than this. Let’s try 19 and then this is 12. We may bump that up but 19. The text color wants to be our dark purple and then let’s make our sidebar font size 15. Save that.

Create a Widget Style

Then we’re going to come back over to additional styles and over here to widgets styles. We’re going to create a widget style for that. Style manager and come over to widgets styles. Right now we’ll just do one and we’ll call it typical widget and the only thing we really need is a widget heading.

We don’t need widget container, we just need widget headings. We’re not going to need anything for that so this is going to be a Typical widget style – fix for classic style failure. Then we’ll save that.

Come back over here to additional styles. Go down to our widget styles and general settings. Give it a class of dot typical-widget. The font is fine. The font size is 15 and we’ll leave the color alone. The only other thing we want to do is to center the text align and make the line height 24.

And then we’re also going to do typical widget headings and that was 19 pixels. I think the color is fine but we want it bold and we want it centered and I think we’re good with that. So let’s save our widget styles.

Apply the Widget Style

And then we can come over here to widgets and apply that style. Come down here below, you can say select a custom style for this widget. We have one custom style to find so we’re going to define the typical widget. We could also just add our own class name if we wanted to but it’s easy to pick the widget style that you picked there. Every widget style you define is going to show up in a drop-down box.

Review and Make Change to the Style

Let’s reload it and see what we get out of this. Okay that didn’t work though, that’s not 15 pixels. Oh, I forgot that for some of styles we need to add the class sidebar to this column. That’s the other thing Thesis classic does, is it passes those widgets styles by taking this column and giving the class of sidebar.

So now let’s view the site again, reload it, okay it’s still not 15 pixels. Of course this isn’t sidebar yet either. You can see it’s starting to take shape here. I think our Annie Greig area wants to have more margin on the bottom. Let’s come back over to our widget style and we’re going to give it some bottom margin and say 24 pixels. Save the widget style. There we go.

Create New Text Style

We just need a style for this heading so we’re going to come over and create a new text style. Style manager, text style and we’re going to call this one Text style 3. Save it. Text style 3 comes up and we’re going to give this typical widget.

This is going to be subhead for typical widget. For typical widget I think that’s all we really need there. Save. And then come back over to additional styles and down to our text style options. We’ve got this typical widget and this is going to be typical widget h3. Take font size up to 19 and for the font color, let’s take that to main.

Let’s give ourselves a tiny bit of margin, say 24 pixels of margin. Now we can save that text style. Reload our CSS file and reload that. Now we have clinical behavioral therapist. What’s that font size though? 19 pixels, okay.

Apply Typical Font Style to Widgets

Let’s see what happens if we apply that typical font style to all of them. So typical widget and typical widget…to tell you the truth it almost feels like when I just take this widget and stick it over here it’ll work. Yeah, that’s what I would do.

Create New Widget

Featured Area – Column 1 just has a nav menu, so we’re going to have to create another widget. We’ll call this Left Widget Area. I would also give a class of sidebar. Drop it in there, save our template and come back to the site. Go to widgets and reload. Now we’ve got our left widget area. Come over here and take the free guided hypnosis and drop it there. There we go.

Maybe we’ll reduce this height a little bit because we’ve got a height specified here. We must have a height specified. Let’s see it’s 70 pixels. If we take it down to 65, we are much closer to lining up across there. We could move those down a bit.

Review the Styles and Make Changes

Let’s come back over to our styles. That’s our main sidebar menu and then the link supplemental styles. We changed the height to 65, let me save that.

Marcy asked, didn’t I make them purple? I think they’re very dark purple, aren’t they? No they aren’t. No, you’re absolutely right, thank you for noticing that. Let’s go back over to our typical wizard style, typical heading, widget headings. I didn’t. Look at that. I’m looking for my color scheme and I’m going to grab my darkest color. Save those. Yeah, that’s better, you’re right.

That was interesting though. If I take out sidebar out of that, I go back to my correct one although that’s kind of odd. Take that out, the typical style everything.

We might have another widget to style although it may be that typical widget is going to work fine for that. Typical widget, save. Yeah, that’s closer to what she was after. The Annie Greig are is smaller, although really this wants to be bigger than 19 pixels I think. Let’s make that heading 24 pixels. And that will do it for widget styles.

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