I’ve compiled a short list of some of the very best copy-and-paste-able Thesis tutorials on the net. This might look familiar. Recently, Matt Langford published a fantastic list of 100 Resources for Thesis. This list included a lot of tutorials as well as general CSS resources and pieces of advice. Some of those classics can be found here, but I’ve tried to also include some more obscure and even more recent tutorials from Thesis developers.

I hope that these tutorials give you some inspiration for your own blog.

Create XHTML Sitemap using Thesis
Author: Gary Jones
Site: http://garyjones.co.uk/

Using Thesis with Wordpress and phpBB3
Integrate Featured Content Gallery with Thesis
Author: Greg Rickaby
Site: www.gregrickaby.com

Auto-generated Recent, Popular or Random post widget boxes
Author: Alex Frasier
Site: www.asnio.com

Advanced Ad Targeting
Customizing the 404 page
Author: Rae Hoffman
Site: www.sugarrae.com

Tabbed Widget for the Thesis Sidebar
Author: Matt Langford
Site: www.mattflies.com

Understanding the Thesis Full Width Framework
Understanding the Nav Menu
Display Tweets without a Plugin
Author: Kristarella
Site: www.kristarella.com

How to use the Thesis Feature Box
Author: Larry
Site: www.emptycabinmedia.com

How to add a Thesis ad above your comments after every post
Author: Eddie Callaway and the Birdfreak Team
Site: www.birdfreak.com

Multiple Custom Sidebars
Dynamic Header Image
Author: Berchman
Site: www.berchman.com

How to Create a Sales Letter Landing Page with Thesis
Author: Marko Saric
Site: www.howtomakemyblog.com

Use Thesis to Display Text associated with Tag
Author: David Gagne
Site: www.davidgagne.net

Contextual Submenus (forum entry, might require login)
Author: Mike Nichols
Site: www.anxietypanichealth.com

Did I forget to include your tutorial? Oops, how embarassing. If you feel that you have a rockstar tutorial that needs to be listed please contact me and shoot me a link and I’ll get it posted.

A lot of people have asked me to set up a widgetized footer using the great tutorial at FergusWeb.net.

You can find a full thesis theme-ready copy and paste answer here as well.

It’s a great tutorial, and I give full credit to the author for it so please don’t think I had anything to do with writing it just because I’m writing about it. Since the author doesn’t mention how to style the widgetized footer, I thought I’d mention how I styled it to get it to work for me and also mention how you might need to adjust it to fit your needs.

Once you’ve added the tutorial’s php to your custom_functions.php, go ahead and add the following code to your custom.css:

#footer div.col {
float:left;
margin:5px 3px 0 0;
padding-left:10px;
text-align:left;
width:29em;
}

That’s it! The three “footer widgets” should be centered, more or less, in your footer now instead of stacked on top of each other. Please make sure to change the width: 29em; in order to accurately fit your site design and layout.

This tutorial will teach you how to add a customized navigation bar to your wordpress footer using the power of hooks in the Thesis Theme. All you need is access to your custom.css and custom_functions.php files.

First off, copy and paste the following code into your custom_functions.php file:

<?php

function footer_nav_menu() {?>

<div id="custom_footer_nav">
<ul>
<li>
<a href="http://www.yoursite.com/">Home</a>
</li>
<li>
<a href="http://www.yoursite.com/about/">About</a>
</li>
<li>
<a href="http://www.yoursite.com/contact/">Contact</a>
</li>
<li>
<a href="http://www.yoursite.com/privacy/">Privacy</a>
</li>
<li class="noborder">
<a href="http://www.yoursite.com/advertise/">Advertise</a>
</li>
</ul>
</div>
<?php
}
add_action('thesis_hook_footer', 'footer_nav_menu');

That will add the Nav Menu to your footer and give it an ID of “custom_footer_nav”. I set the default categories to “Home,” “About,” “Contact,” “Privacy,” and “Advertise.” You’ll want to change those as well as the links pointing to them. Now lets style it.

In your custom.css file add the following:

.custom #custom_footer_nav {text-align: center; }

.custom #custom_footer_nav ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0 0 20px;
font-size: 1.5em;
}

.custom #custom_footer_nav li {
border-right: 1px solid #326FBE;
display: inline;
margin-right: 20px;
padding-right: 20px;
}

.custom #custom_footer_nav li.noborder {
border-right: 0px;
}

.custom #custom_footer_nav li a {
color:#777777;
font-weight:normal;
text-decoration:none;
}

Now you should have a custom nav bar in your footer with a 1px spacer between the categories. All colors and spacing can be changed in your custom.css file.

Next time I work with footers I’ll show you how to add some images and really make it stand out. If you use this for your footer, leave a comment and let me know so I can take a look.

This tutorial will show you how to build a fully customizable block of 125X125 pixel ads that can be displayed in your Wordpress Sidebar. This tutorial is specific to the Thesis theme, but if you have even a beginner understanding of working with your theme’s files you can easily adapt it to almost every WP theme.

When you’re done, you’ll have sidebar ads that look something like this:

What you will need:

1. Four 125×125 px images/ads that will take the place of the above colored blocks.

2. Access to your custom_functions.php and custom.css files (for Thesis).

Copy and paste the following code into your custom_functions.php file making sure to replace the <img src=”http…> with your own 4 distinct image urls leading to your ads and 4 distinct urls leading to your desired ad pages.

function my_ads() { ?>

<div class="ad_block">
<ul>
<li>
<a rel="nofollow" href="http://www.yoursite.com">
<img src="http://www.yoursite.com/images/ad1.jpg"/>
</a>
</li>
<li>
<a rel="nofollow" href="http://http://www.yoursite.com">
<img src="http://www.yoursite.com/images/ad2.jpg"/>
</a>
</li>
<li>
<a rel="nofollow" href="http://http://www.yoursite.com">
<img src="http://www.yoursite.com/images/ad3.jpg"/>
</a>
</li>
<li>
<a rel="nofollow" href="http://http://www.yoursite.com">
<img src="http://www.yoursite.com/images/ad4.jpg"/>
</a>
</li>
</ul>
</div>
<?php
}
add_action('thesis_hook_after_sidebars', 'my_ads');

Now, in your custom.css file add the following:

.custom .ad_block {
float:left;
height:100%;
margin:5px 0 0;
padding:0 0 0 0;
width:315px;
}

.ad_block ul {
margin:0;
overflow:hidden;
padding:0;
}

.ad_block li {
background:#FFFFFF none repeat scroll 0 0;
display:block;
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:10px 5px 0;
overflow:hidden;
padding:8px 9px;
width:125px;
}

Save and refresh your page and you should have ads beneath your sidebars. To move the ad block around just change the hook from ‘thesis_hook_after_sidebars’ to whatever you’d like.

That’s it! If you need help making it work or styling it let me know in the comments. Also, if you’d like a different ad arrangement please contact me and I’ll be glad to work with you to make it happen.

Check back soon for more in the How To: Design Ads series.

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.

Without touching your custom.css!

Below is a picture of what Thesis looks like almost straight out of the box.

It’s OK clean, which is great, but it’s also kind of BLAAHH, you know?  Where’s the COLOR!?

How about we keep the same clean layout and lines that Thesis offers straight out of the box, but add just a touch of color to make the page pop.

Like this!

It’s easier than washing a window and you don’t even need to dig into your custom files to do it!.

Step 1.  In your Wordpress dashboard, Appearance->Widgets->Text Widget.  Drag a few text widgets into your side bar.  Click on them to open up them up so that you can type in them.

Step 2.  Paste this into them:

<div style="background-color: #E3F0F2; border: 1px solid #222222; padding: 5px 0px 5px 10px;">
//Write Something Here.</div>

Step 3. Save your changes and refresh your blog.

You should exude the glow of a proud parent of a light blue sidebar widget.

Let’s break down what each part of it does so that you can hack it to your own liking!

background-color: #E3F0F2; This is pretty obvious.  It changes the bg color to light blue.

border: 1px solid #222222; This gives your box a 1 pixel, dark grey (almost black) border.  Feel free to make it thicker or change up the border style.

padding: 5px 0px 5px 10px; Just as I covered in this post, this is the shorthand way to write padding and margins and refers to the top, right, bottom and left, respectively.

Put all of that between some divs and you have a colored text widget that can easily be moved in your widgets panel WITHOUT TOUCHING YOUR CSS!

Next time I talk about colored text widgets, I’m going to rehash how to make your own with custom_functions.php and how to do some advanced styling with them.  Later, I’m going to cover how to make custom widget headings to replace the default h3 text!  So stay tuned and, as always, feel free to ask me a question in the comments, on Twitter or shoot me an email.

Note:  I used one line of css in that last picture: .custom #header #logo a { color: #57B37B; } to make the logo light green.

]]> http://www.fouroclockproject.com/2009/colored-text-widgets-for-your-wordpress-sidebar-part-1/feed/ 20 http://www.fouroclockproject.com/2009/beat-the-thesis-theme-learning-curve/ http://www.fouroclockproject.com/2009/beat-the-thesis-theme-learning-curve/#comments Tue, 26 May 2009 07:30:12 +0000 R.J. http://www.fouroclockproject.com/?p=117

…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.

When I started my last design, I knew that I wanted to display the faux oil painting in the background as much as possible.  But what about the TEXT?!  I mean, let’s look at the colors on the page.

I’ve got dark green taking up the left, light blue in the middle and green again on the right.  I can’t use white text becaue it washes out in the center of the page.  And I can’t use dark text because it gets absorbed by the trees on the left.  I knew the answer was to make a gradient as the background for the content box – that would satisfy my two criteria:

1. Display the background
2. Make the text consistently visual

but I didn’t know how to do it.  On top of that, ya know, I’m always trying to be a little more professional with the way I code, and right now I’m on a kick to understand browswer compatibility.  For example, how to write the CSS so that it looks the same on Firefox, Safari AND IE.  That last one is rough sometimes.

So I had to do some research for figure out how to code in the opaque function.  Good thing there are great resources for it!

1. http://www.w3schools.com/Css/css_image_transparency.asp
2. http://www.cssplay.co.uk/opacity/

So here is an example of how to make a transparent portion of your site:

.page {
filter:alpha(opacity=90);
-khtml-opacity: 0.9;
-moz-opacity:0.9;
opacity: 0.9;
}

Now lets break it down.  Imagine you wanted the background of your posts to be partially transparent.  If you were using Thesis, that would correspond to the content_area.  So in your custom function you would write:

.custom #content_area .page {
Insert Your CSS
}

*Note: the page gets a period in front of it because it’s a class and not a div id.  I think of it like this: “Classes in high school were called periods.”  Everything else gets a # (except for lists, they don’t have anything in front, but don’t think about that right now).

Now for the different ways of setting opacity…

For Internet Explorer:

filter: alpha(opacity=90);

For Mozilla:

-moz-opacity: 0.9;

This is mostly for older browswers (anyone still use Netscape Navigator?)

For Safari (current):

opacity: 0.9;

This is the important one.  It is the current standard supported by Safari, Opera and Firefox

For Safari (old):

-khtml-opacity: 0.9;

This is for older versions of Safari, back before it adopted webkit (which is what you use for something like round borders).

FOUR lines of code?!

Yeah, it’s not elegant, but it’s not hard either.

Once again it’s just this:
.page {
filter:alpha(opacity=90);
-khtml-opacity: 0.9;
-moz-opacity:0.9;
opacity: 0.9;
}

And honestly you’ll probably get by just using:

filter:alpha(opacity=X);

and

opacity: X;

Of course you can change the 90 and 0.9 to whatever you want to make the image more transparent.  1.0 = no transparency.

Hope this has been a help and inspired some great new Thesis designs!

I’d love to know if you’ve designed anything like this using this tutorial or another.  Please let me know in the comments or hit up the Twitter below.

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.