Build Your Own Business Website header image

What’s New in Thesis 2.0 Part 9 – Style the Widgets

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

In this session we show how to style the widgets in Thesis 2.0. On our demonstration site we have widgets set in our sidebar. We edit the existing Widget package to set the general style then we create new packages to add different colors to the widget heading, widget font and widget link. We also show where you can write additional CSS inside the package.

The next thing we’re going to do is style our widgets. And remember our sidebars, we gave that a class of widget.

Edit Existing Widget Package

So we’re going to start off by styling that and that is here, widgets. And we’ll go to options and say widgets. I want my fonts to be 15 pixels. The font weight will be default. The line height, we’re going to leave alone. The text align will be left. We’re going to leave margin and padding alone. Widget titles font size will be, let’s say 28 pixels and let’s make the font weight bold. We’re going to leave margin and padding alone for a moment. We’ll leave widget list alone and our typography is going to be set for… yeah, let’s just leave that one and set it at 200. Hit save.

Now we have affected the general styles. But notice that there were no font color settings in there. And so we need to create 3 new packages in order to change font colors.

Create Packages for Widget Font Colors

And the first package is going to be a single element style and we’re going to call it widget heading. Reference will be widget heading. The selector is going to be .widget h4 because that’s what we chose for our widget heading so it’s going to be .widget h4. The option here, we’ve already set the font style. We won’t worry about that but we are going to set the font color. And in that case, I want this really light green color. That’s the heading color. And then we’ll leave everything else alone for the moment. Hit save for that and then make sure that we put this in. It’s going to be widget heading.

And then next, we’re going to do widget font. Our reference will be widget font and the body will be widget. And the name will be widget font and the option, text color is going to be white. And we’ll hit sav to that and then we’re going to add one more of those. And instead of widget font, it’s going to be widget link.

And now we’re not going to pick a single element style. We’re going to pick a link package for this so we’ll add that package. The name will be widget link. The refrence will be widget link. The CSS selector will be .widget a. In options, our link color will be EFEFEF. Text decoration will be none. Our hover links will be white and text decoration will be underline. I think that’s all we have to do there. Hit save. Let’s hit save and compile and see if all of our text looks the way we want it to look.

Well, we’re close. Something is taking that link, obviously the footer link. There must be a footer link set up here. Footer… oh yeah. I forgot. I’ve got this additional CSS place where you can write your own CSS and that was written as additional CSS and it was more specific so it over wrote my settings.

Now my express goal here is to demonstrate how to do this without actually writing code. But clearly, there are going to be cases where writing code will be useful to you and it might be simpler. So in this case, it might actually have been simpler to just write widget heading code rather than creating this. But nevertheless, my goal was to show you how to do this without that.

I guess I probably need a little bit more top padding in that widget, footer widgets column. I must have put it inside of footer. I did put it inside of footer, right? Padding? I did. So let’s just make it 145 of top padding, hit save. Save again. That should move that down. There we go. That’s much better looking.

0 Comments… add one
0 comments… add one

Leave a Comment