Web Hosting

How to Style the Thesis Multi-Media Box

Thesis theme for WordPress A little while back I published a tutorial on how to make use of the Multi-Media box in Thesis.

Today I want to describe how to style your Multi-Media box.

There are countless reasons you’d want to style your Multi-Media box, but probably the most obvious is when you want to use it to contain a newsletter opt-in form.

Making attractive, eye-catching opt-in forms gives them a lot more oomf – and will help to increase your opt-in rate.

Styling Your Thesis Multi-Media Box

So here’s how to style your Multi-Media box:

Step 1:

Create a new div in your custom.css file. I call mine the mmbox div. (Yes – took me hours to think of that one!)

Step 2:

Declare the styles you want in your newly created div for font-family, float, background-color, font-color, font-size and all the other selectors you want to use.

If you’re new to CSS there’s a great tutorial for beginners here.

Remember to precede your div name with the .custom selector – I described how and why here.

As a sample, here’s the CSS code for the Multi-Media box on this site:

.custom #mmbox { background-color: #EEEEEE; font-color: #000000; font-size: 0.9em; padding-top: 0px; padding-left: 6px; padding-right: 6px; padding-bottom: 10px; }

(I’ve also used some in-line CSS in the Multi-Media Box itself to centre those images. But that was lazy – I should have done it in the stylesheet!).

Step 3:

When you place your custom, or embed code, in the Multi-Media box input area ( Design Options screen, over on the right) be sure to wrap it in the div id tags with the name you assigned.

Thesis Multi Media Code Input Box.

Input your custom code, wrapped in the tags of the div you created

Here’s how to create the content for your Multi-Media box.

Step 4:

Click Big Ass Save and you’re done.

Once your code is in the Multi-Media box you can re-style it at any time to keep it in line with styling changes you make on your site – all of it done in the custom.css file.

OK, that’s it! Enjoy, and if you have any questions leave them as a comment – I’ll get right back to you.


Martin Malden


Web Hosting