Beat the Thesis Theme Learning Curve

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

If you want to find me on Twitter, I'm {@4oclockproject}.