In this tutorial, you will learn how to create a drag-and-drop-able sidebar text widget that can be styled endlessly.  I’m exaggerating about the endlessly portion, of course, but not much.  This tutorial will also allow you to color individual sidebar titles and their backgrounds – unlike the default wordpress text widget.  You will also learn how to insert images to your text widget and style it. This is part II in the Widget Styling Series. You can find Part I here.
Lets roll.

If blog content is peanut butter then your sidebar is the jelly.  But I see jelly gone bad.  Eww.

If you’re writing for an audience then your blog content is usually all text.  Sure, you’ll throw some images in here and there, but lets agree that your blog content is 90% textual.

How about your sidebar?

In a very non-scientific study, I’ve spent the past few days browsing through some Thesis-based themes built by average people (I mean normal people with limited css experience – definitely not web developers or programmers) and I’ve noticed a pattern – like abstract paintings, people just throw text all over their sidebars.   If I am your reader, where am I supposed to focus?

Many bloggers include the following in their sidebars:

1. Their Twitter Feed
2. Their Categories
3. A blogroll or other links
4. Their Archives
5. And a Tag Cloud

If you have a personal blog just for fun, maybe it’s no big deal to have a bad layout with bits of text streaming down your page like a muddled waterfall of font.  But if you’re trying to get people to buy your product or sign up for your ebook or newsletter, it’s a big problem if your audience doesn’t know what you can offer them.

Text, text, text, text, text.

In my opinion, with all of those words in your sidebar displayed to your reader in the exact same format, they are bound to miss the message that you really want to get across since it is sandwiched above or below your last 5 tweets, which everyone ignores, by the way.

Take a look at some default WP/Thesis sidebar text widgets used in a straight-out-of-the-box Thesis Theme:

Oh you’re still here?  Sorry, I drifted off from looking at all that text.

Highlight the Important Stuff

Make it easy, like, super easy, like SUPER-DUPER obvious where you want your reader to look.

Can you spot what I want the reader to focus on in this next picture?

Sure you can, it’s obviously the Pacific Cruise Line text.  And there are a few reasons why: the font of the title is much larger than the default, there’s color, there’s a border highlighting the content, and the borders are rounded and sexy.  All of those elements will tell the reader LOOK HERE, HOMBRE!  And that’s exactly what they’ll do.

Alright, rant = off.

Want to make your own customized text/video/signup form/flash player widget that is guaranteed to draw your readers towards it?  Copy and paste from the lines below and make it happen!

Ok, begin tutorial now.

Step 1.  Open up your custom_functions.php and custom.css files.

Custom What!?
Not used to editing your custom_functions.php and custom.css files?  That’s OK.  Here is a tutorial to get your going.

In custom_functions.php add this:

/* My Custom Widget */

add_action('widgets_init', 'my_text_widget_init');

function my_text_widget_init() {
register_sidebar_widget('My Custom Widget', 'my_text_widget');
}

function my_text_widget() { ?>
<li class="widget">
<div class="my_widget_header">
<h3><span style="color: #ff0000;">Your Custom Header</span></h3>
</div>
<div id="widget_content">
<img class="widget_icon" src="<?php bloginfo('template_url'); ?>/custom/images/your_pic.jpg" height="100px" alt="" />
<span style="color: #ff0000;">Put Your Content Here</span>
</div>
</li>
<?php
}

You’ll need to replace whats in red with your own image and content.

Step 2.  Open up your custom.css file and drop this somewhere in it:

.custom #widget_content {
background: #fff;
color: #111;
padding-left: 1em;
-moz-border-radius:5px;
-webkit-border-radius:5px ;
border-radius:5px ;
padding: 1em 0em 1em 1em;
border: 4px solid #777777;
}

.custom #widget_content .widget_icon {
float: right;
margin-right: 0.5em;}

.custom li.widget .my_widget_header {
background: #ffcc00;
-moz-border-radius:5px;
-webkit-border-radius:5px ;
border-radius:5px ;
}

.custom li.widget .my_widget_header h3 {
color: #111111;
font-size: 1.5em;
text-align: center;
}

Step 3. In your WP dashboard go to Appearance->Widgets

On the left hand side you should see a list of “Available Widgets.”  Your new one should be there called “My Custom Widget.”  Click “Add” and your custom widget should now appear in your widget column on the right hand side of the page.  You might notice if you click “edit” that there are no options for this widget.  That’s because we defined its contents in our custom_functions.php.  That means that to change both the title, content text and image of the widget you’ll need to edit the custom_functions.php file that you copied and pasted above to add your own content.

That’s All, Folks

I’d love to know how this works for you!  Please send me some links to your site if you decide to implement this so I can see how it turns out.  Also, if you have any problems let me know via email (on my contact page), Twitter or in the comments.  I respond to every single one and will be glad to walk you through the process of editing your custom_functions.php or custom.css files if you get stuck.

The Elusive Blue Text Box
Giving credit: The idea for custom styled widgets came from this thread on the Thesis Support Forums. The widget_init code I used is a modified version of that supplied by girlie in the mentioned thread.

Once again, if you want a primer on Thesis, custom_functions.php and custom.css you can fine them here and here, respectively.  Also, if you don’t need such an elaborate sidebar text widget, here’s a lite version of how to style your text widget.

Update: in the comments below, Neil requested a version of this widget that would only show up on certain pages. Here is the updated custom_functions.php for that functionality:

/* My Custom Widget */

add_action('widgets_init', 'my_text_widget_init');

function my_text_widget_init() {
  register_sidebar_widget('My Custom Widget', 'my_text_widget');
}

function my_text_widget() {
if (is_page('about')) {
?>
<li class="widget">
    <div class="my_widget_header">
        <h3>Your Custom Widget Header</h3>
    </div>
<div id="widget_content">
<img class="widget_icon" src="<?php bloginfo('template_url'); ?>/custom/images/your_pic.jpg" height="100px" alt="" />
Put Your Content Here
</div>
</li>
<?php
}
}

Adding the above to your custom_functions.php file will cause the widget to only show up on your ‘about’ page. Change ‘about’ to whatever page you want to make it work for you.

…by understanding what you can control with CSS!

→ I can’t make a clickable custom header!
→ The color of my multimedia box doesn’t match my background!
→ My navigation buttons are too small!
→ My widgets aren’t blue like the demo!
→ I can’t figure out where to put Adsense and my bullet points line flat up the left margin of my sidebar and look like crap!

Did you just get Thesis and it’s already busted? Got text floating off the page?  A FAILed header?  Did you order Thesis because you wanted usability but instead the waitress brought ubiquity with a side of CSS and PHP?   I understand, it happens even to the best of us.  But there’s a reason why so many people migrate to Thesis and can’t dream of ever switching back.  The destination is worth the journey.  Yes, the learning curve to learning Thesis is steep, especially if you’re completely new to writing a blog and don’t know anything about using an FTP client (like Filezilla, Fugu or Cyberduck) or how to style websites with CSS.  It looks like this:

So in order for you to get away from your comfort zone of WYSIWYG editors (temporarily) and on the road towards beating the Thesis learning curve I’ve put together some of the most commonly used CSS terms.  Once you understand what these do you’ll be able to fire up your text editor and customhack your blog like a pro.

Understanding CSS:

Background

Thesis Example: .custom #header { background: #333333; }

This makes the background of the <div id=header> a dark grey color.

Padding and Margins

Here is a thorough explanation.

In your custom.css you’ll often use margins to move elements around (like this example towards the end of the thread) and padding to touch up spacing issues (such as your bullet points jutting up against borders or content boxes.

The shorthand way or writing margins and padding works like a clock from 12, 3, 6, 9 related to top, right, bottom, left.  So if you want all sides different you would write something like {padding: 1em 4em 0em -4em; } to supply 1em from the top, 4 from the right, zero from the bottom and -4 from the left.

Borders

You can find a list of your border options here.  You can also specify all borders i.e. {border: 1px solid #999999; }.  This will produce a 4-sided border in the solid format that is a light grey color all the way around.  Individual sides can be called as well: {border-right: 1px dashed #eeeeee;} and you can also hide borders simply by {border-bottom: 0px; }

Radius

Want to make spiffy looking rounded corners?  Lets look at your nav menu in Thesis.  We can make all corners rounded or specify individual ones in our css like this:

.custom #nav_area ul li {
-moz-border-radius: 10px ;
-webkit-border-radius: 10px ;
border-radius: 10px ;
}

The “-moz” is specific to users reading your site with Firefox.  The “-webkit” is for people using IE and the border-radius is the web standard for most other browswers.

Links

Lots of options with links.  Here is what you’ll need to know using your navigation links as examples.

.custom ul#tabs li a {color: #ffffff; }
The “a {color: #ffffff; }” is the important part.  That means that the TEXT color of the link will be bright white (#ffffff).

.custom ul#tabs li a:hover {text-decoration: overline; font-weight: bold; }
The “a:hover {whatever}” is the important part. The a:hover defines what happens when you roll your cursor over a link. In this example, we’re telling the text of the link to put a line over itself and “bold” itself.

If you understand what each part of your code does, it makes it a lot easier to piece parts of your site together because you can apply all the same commands to different parts of your site via your custom.css file.  If you’d like more specific answers to questions, check out the official DIY Answers page or ask the crowd over at the Support Forums.

If you’d like more ways to “piece-of-cake” your Thesis blog, please read this:

Things I Wish I Knew When I Started Using Thesis

And, if you are having a specific design problem, let me know if the comments.  I respond to each one and will be glad to help.

Let me guess,

…you bought Thesis because of all the flexibility it offered in customizing your wordpress theme, not to mention the SEO benefits that it advertised.  Or maybe you bought Thesis because social media gurus like Chris Brogan and Darren Rowse were using it, you copycat…

Regardless of why you bought Thesis, if you’re a web amateur* like me you probably thought it would be, well, EASIER!

I mean, come on!  What the heck is CSS?  Or custom functions?  What about just regular functions?

I mean, Thesis is nice and all straight out of the box, especially if you want a simple theme with a lot of options on the back end.  But I like to think of Thesis as a motorcycle.  You can buy a motorcycle and drive it straight off the lot and it will work just fine.  But that motorcycle will also be just like everyone else’s motorcycle unless you start chopping it up and adding your own personality to it.

That’s what Thesis is to me.  It’s a perfectly-functioning web motorcycle that I can’t help but to chop up and put back together with my own style.

In order to be able to chop it up, I’ve had to learn a few things along the way.  I’d like to share those things for all the people looking for the answers.

1. How to FIND custom.css and custom_functions.php

Remember where you installed wordpress?  They’re there under:

wp-content/themes/thesis-15/custom/

Note that “thesis-15″ might be different depending on what version you’re running.  It might just be called “thesis,” for example.

2. How to edit my custom files in my SFTP client.

When you want to change the look of your site, are you sick of downloading your custom.css file to your desktop, opening it in textedit or notepad, making your changes, saving the file, re-uploading it via FTP and refreshing your page?

Me too.  That’s why I use TextWrangler so I can change my code in real time. You could also use FileZilla if you like FireFox.

3. How to edit my site offline

Download MAMP and turn you laptop into your own personal server.  This is how I build sites and make changes to FoCP to fine-tune stuff before I take it live.

4. How to select a color pallette

Picking colors that go well together from PS takes too much time, especially when you factor in the css. Use a Hex Color Code compatability chart like this one to speed things up.

5. How to add gradients

This is a great design reference. However, there is an easier way (as long as you’re not possibly worried about load time.)

6. How to use other people’s photos from flickr

There is a lot of confusion about what you can and can’t use others’ photos for. Fortunately, flickr has a page that explains it all. If you want to use a picture you found on flickr, make sure it has a Creative Commons license. Then just give them credit with a name and link on your blog post.

7. How to use OpenHook

A great plugin that eliminates the need for custom_functions.php.

8. Why I SHOULD NOT use OpenHook

Rick Beckman definitely made openhook a popular plugin, and Thesis newbies will appreciate it since it lets them edit their custom_functions.php from their WP dashboard. But for people who like to chop their site up, it’s a little limiting. If you’re into a lot of customization then the original way is still the best. At least until the next version

9. How to make and install a favicon

Nuff said.

10. Firebug

Firebug for Mozilla’s Firefox web browser is probably my most-used tool for CSS problem solving.  It is a tool that I could not live without.  Click here to download.  Also, check out Kristarella’s video tutorial on how to use it!

If you’d like more ways to “piece-of-cake” your Thesis blog, please read this:

Beat the Thesis Learning Curve

So that’s about it.  I hope I’ve answered a lot of questions but I’m sure I’ve missed some as well.  If you have any questions please leave them in the comments and I’ll be glad to answer every single one.