Let’s begin by opening the Thesis Widget Styles Plugin and then going to our style options. Here we’ll style the widget heading by customizing its font, padding and border but we’ll leave the background alone for the moment. Select each of those options and hit save to so the choices for those appear.
Style the Font in a Thesis Widget Heading
We’ll make the heading font style Arial and make it 24 pixels in size. Let’s choose a yellowish-charcoal color. We want normal spacing and we’ll get rid of the all caps and center the heading text. We won’t add a background image yet but we will add a border style.
Style the Border in a Thesis Widget Heading
Copy that same color and we’ll use it in the border that we’ll add. We’ll only use a bottom border here for the heading. Go to the Heading Border Style and select the option of Allow each side of the border to be different then hit the save button so the options for this appear.
Check the boxes for No Top, No Right and No Left Border. Let’s make the bottom border 4 pixels wide with the same color used above and we’ll make it solid. Hit the save button. Then let’s go to the page with the widget and refresh it, you can see all the changes.
Review the Changes to the Thesis Widget Heading Font and Border
You can see we lost our margin around the heading since we modified the text so we need to add some padding to the top. Let’s go back to the 20 pixels of heading padding. Return to the Thesis Widget Styles plugin and go back over to the Overall Padding and get rid of the 1 that we’d placed in Overall Top Padding. Hit save. Now we’ll have 20 pixels on the top again.
Go back to the page and refresh it again. It looks like we could use some top margin on the the body text to move it down a bit from the heading. Return to the plugin again and go to our Widget Style Customization Options. Now let’s go to Style the Widget Body and check Customize the Widget Body Margin. Hit save. Then let’s add 10 pixels to the Body Top Margin and leave the rest blank. Return to the page and refresh it and you can see that the body text has moved away from the heading.
As you can see using the Thesis Widget Styles plugin to customize widgets is very simple. There are many ways that you can customize and style individual widgets using the overall widget style plus some special styling for the heading and for the body.# vimeo.com/31490939 Uploaded 53 Plays 0 Likes 0 Comments
Let’s begin by opening the Thesis Widget Styles plugin and going to the style’s customization options. Select Customize the Widget Border. We’ll add a border to the widget to enhance its appearance (video 1 has introductory instructions on using this plugin). Hit save to make this change.
Go back to the widget style and then to Overall Border Style and you can see we have a choice here. One of our choices is to allow each side of the border to be different. If we check this, settings will appear for each of the top, bottom, left and right borders. For now leave this unchecked so we’ll get a border that is the same on all sides.
Add First Border to a Thesis Widget
Let’s add a border width of 2 and pick a sort of a darker yellow grey color to compliment the yellow we already have. Then we pick the style of the border which in this case will be solid and then hit the save button. Let’s go to the page with the widget and refresh it. You can now see the solid border around the widget which makes it stand out.
Add Second Border to a Thesis Widget
However, an outset border might actually be kind of interesting around the widget as well. To see that let’s return to the Overall Border Style and choose outset instead of solid. This change will make the bottom and right side darker with the top and left side lighter. Hit save. Go back to our page and refresh it.
You can see that this got to be a darker color and this stayed the same color or lightened up a little bit. Well, it looks a little cleaner if you use straight edges and if you don’t have corners. So let’s turn off around the rounded corner to see what that looks like. Go back to the style and turn them off and hit save. Return to the page and refresh it. Now you can see the offset look.
This look is pretty dramatic. If you like this idea but want to downplay it some, you can do that by selecting the option of Allow each side of the border to be different. Do that, then copy your Typical Border Color and hit save.
Add a Border to the Widget with Different Borders on Each Side
Now in the border style you can customize each side of the border. For the top border, let’s paste that color in but make it quite a bit lighter with the color picker. Then choose 2 pixels for width and solid. Let’s add those same settings to the left border the same. The right and the bottom borders we’ll make slightly darker keeping the width at 2 pixels and solid. Paste in that color again and then hit save. Let’s go back to our page and refresh it.
We have very easily, with our Thesis Widget Styles plugin, customized the widget border. We’ve got a fairly subtle but nevertheless apparent border around the widget with a sense of depth that emerges out of having these different colors.# vimeo.com/31491858 Uploaded 50 Plays 0 Likes 0 Comments
Let’s look at styling the widget area now where we’ll style the heading and the body separately. Begin at the widget style’s customization options (video 1 has introductory instructions on using this plugin) in the Thesis Widget Styles plugin.
Leave the widget background alone but we’ll customize the heading font and heading background. And for this example we’ll use a background gradient. The heading padding and border will be customized along with the widget body padding and widget body margin so we can separate the text from the header. We’ll use a background image to customize the body background.
Style Heading Font and Gradient Background
In the Thesis Widget Styles Plugin, go to the heading font style. Change the heading font to 24 pixels and pick Molengo one of the Google fonts. Select normal spacing, get rid of all caps and center the heading text.
For the background gradient go to colorzilla.com and use the Gradient Editor to configure the gradient code. We have one set up here. It’s actually quite simple. I picked a dark red color as the base and then a lighter version of that for the edges. And all I did was just move up directly above the other color to pick a lighter version of that same color and then I created these two stops.
You can create a stop simply by pressing a button. I created these two stops, made the two edges lighter and then went to dark. And what I’m aiming for is a very slight variegation of color from light to dark.
I have this whole group of text that I have to copy. Then I’ll come back over here and paste that gradient text right there. In the padding we’ll give ourselves 10 pixels all the way around. Select the save button in the Thesis Widget Styles plugin. Remember, this is style 2 we are working on. Go to our widgets here and we are working in widget block 2. I’ll take column 2 here and select style 2 to apply to it. Save it. Come back over and refresh this.
Review Changes to Heading Font and Gradient Background
Now we have our variegated red that goes from light to dark in here in a way that gives it a sense of depth. I don’t love that text so we’ll go back to the heading font style and change it to Droid Serif which I like better. So now we’ve got a heading that’s cool looking.
Style Widget Body with a Background Image
Next we’ll style the body with a background image. A few weeks ago, I introduced you to the Subtle Patterns site which has many very subtle patterns that you can download for free. In fact, Thesistoolbox.com uses one of their patterns for the body background.
I like this fabric pattern here. I’ve already downloaded it but you can just hit download and then upload it to your Media Library or even better into your custom folder. For the time being it’s been uploaded to my Media Library.
I’ll go to the library, select edit and copy the URL. Then go back to the Thesis Widget Styles plugin to our style and then to the Body Background Image. Paste that image URL. We want to repeat it in both the x and the y directions. It doesn’t really matter where it starts since it’s starting in the x and y direction. Go to Body Padding and put in 20 pixels around this. And then add 10 pixels on top for our Body Margins and hit save.
Review Changes to Widget Background Image
Go back to the page and refresh it. Now we have this paper background, 20 pixels of padding all the way around the text, 10 pixels of margin in between the two. Next we’ll add a border around this paper.
Return to the Thesis Widget Styles plugin to our style customization options, select customize body border and hit save. Then go to our border style and make it 1 pixel with a solid light grey color. Go back to the page and refresh it. The border gives it a bit of definition because the variegation of the paper no longer continues to the perimeter but stops right there. We could also give it a very slight drop shadow to give it a little bit of depth. Return to the Thesis Widget Styles plugin to our style and give it 2 and 2 and make it slightly darker. Hit save, refresh it.
Now we’ve come up with a very attractive widget style that can be used over and over again. The widget stands out nicely. It’s easy to read and it doesn’t look like a default Thesis widget.# vimeo.com/31491914 Uploaded 97 Plays 0 Likes 0 Comments
To begin we’ll create a new style into which we’ll place the image. Open the Widget Styles plugin under Thesis plugins. Then under Widget Style General Settings add one more style (if you only have 1 style, choose 2). Click on the save button and then the new style will appear below your last one. Open the Customization Options and under Style the Widget Heading select the Customize Heading Font, Customize Heading Background – Use Background Image, and Customize the Heading Padding. Save again to have these options show in the new style.
Add a Background Image to a Widget Heading in Thesis
We’ll customize the heading font and the background using a background image. We’ll customize heading padding and the body margin. We’ll take this background image, copy the URL, go back to the Thesis Widget Styles plugin, go to the new style, edit Heading Background Image and paste it. We don’t want to repeat it all. We want it to be located in the center and in the top so select those.
Adjust Widget Heading Font, Padding and Margin
Go back to the page with the widget you are styling and refresh it. We need to make the font bigger and give ourselves more padding plus a margin. So go back to the style and down to Heading Font Style and choose Arial Black, size of 18 pixels, keep white, change to normal spacing, remove all caps, and center the heading.
Next go to Heading Padding and make top 15 pixels and bottom 20 pixels. Under Body Margins add 20 for top, bottom, left and right. Then hit the save button and go back to the page with the widget style and refresh it.
We have now added a background image to our widget heading and adjusted the font style, padding and margins all easily within our Thesis Widget Styles plugin.# vimeo.com/31492009 Uploaded 47 Plays 0 Likes 0 Comments
Here we demonstrate how to make equal height widget columns using our Thesis Widget Styles plugin. If you’ve got two widget columns side by side and one has more content than the other, you get a mismatched appearance with the columns unequal in height. This doesn’t look good particularly when you’ve got a strong background like we have here in our example.
To make the widget columns equal height, we set the size of the body so that every widget of the particular style has the same height. Of course, you need to know what that height is going to be which you will know after determining what content is going in the widgets.
How Thesis Widget Styles Plugin Makes Equal Height Columns
Begin by selecting the Widget Styles plugin under Thesis plugins. Then go to the specific style you want to change and select Customization Options. After it opens scroll down to Style the Widget Body. The first option is Set a Fixed Height for the Widget Body. Check the box next to that option and then click on the save button on the page. After saving, go back to the style you are changing and you will find a new setting for Height of Widget Body. Open that setting and enter the number of pixels you would like for the height and then hit save. Go back to and refresh or open up the page with the widget style and you will see that both columns are the same height. You can easily go back and change the height of the columns if you don’t have it right yet or if you change the widgets’ content in in the future.
Creating Additional Styles
This feature works well if you’ve got widgets that are side by side, side by side and stack on top of each other and for widgets with similar content. You can quickly create styles that are very different or the same as an existing style with one variation such as body height and let the widget height be as long as necessary to accommodate the content.# vimeo.com/31492059 Uploaded 33 Plays 0 Likes 0 Comments
Thesis Theme Tutorials - by Thesis Toolbox
A showcase for video tutorials demonstrating how to use plugin designed to be used with the Thesis Theme for WordPress
Browse This Channel
More stuff from “Thesis Theme Tutorials - by Thesis Toolbox”
Heads up: the shoutbox will be retiring soon. It’s tired of working, and can’t wait to relax. You can still send a message to the channel owner, though!