Tag Archives: css

How I wrangled Thesis for WordPress in 5 minutes and got a static CSS layout

This brief tutorial will show you how to customize your Thesis theme, changing it from an em based layout (flexible) to a pixel based one (fixed).

If you look at 100 Web sites built with the Thesis theme and WordPress, I would estimate that 98 of them are using the em based layout (the default). That is, the layout is flexible, not pixel based and fixed. I like flexible layouts, whether they’re em or percentage based, but sometimes that’s not the most appropriate design solution for a given project.

It’s pretty easy to build a fixed width Thesis site if you know what CSS rules to change in your custom.css file. There are four steps to change your layout from flexible to fixed:

  1. Set up your column layout in Thesis > Design Options
  2. Copy the “core layout elements” from the layout.css file
  3. Paste the core layout elements into custom.css, adding “.custom” before each rule
  4. Change appropriate em based definitions to px

Those are the basic steps we’re going to take. Let’s get into the details.

Column layout in Thesis

column preferences for billweye.com

The first thing you’ll need to do is set up your layout preferences in Thesis > Design Options.

First, here’s my obligatory rant about how these preferences are labeled. As of Thesis 1.7, the labels for column widths in the preferences are defined as “pixels”. In fact, you are not entering the pixel width you want, but rather a number that’s then translated into ems using a formula. I’m not going to go on any further, except to say that I explain this problem with more detail in my tutorial, creating a flexible header in Thesis.

Back from my rant … define the column order and widths you want. At this point, the column widths aren’t too important, but you might as well give them the pixel widths you want. The number of columns and the order you want is very important. Define these preferences and save your work.

Copying the “core layout elements”

Now you need to copy the CSS rules that define the layout of your site. There are any number of ways to get these CSS rules; I’ll briefly show you one tool that I use, Web Developer add-on for Firefox. Using that tool you can easily open up all the CSS files. Look under layout.css and find the core layout elements section, then copy all the rules under that block. These are the layout rules for this site in that block (don’t copy these! yours may differ):

 

/*---:[ core layout elements ]:---*/
#container { width: 87.1em; margin: 0 auto; }
#page { padding: 1em; }
#header, #footer
       { padding-right: 1em; padding-left: 1em; }
#content_box { width: 100%; }
   .no_sidebars { background: none !important; }
#content { width: 58.1em; float: left; }
    .no_sidebars #content { width: 100%; }
    .post_box, .teasers_box, .full_width #content_box .page
           { margin: 0 2.1em 0 1em; }
    .full_width #content_box .page { width: auto; }
    .no_sidebars .post_box { margin: 0 1em; }
    .teasers_box { width: 55em; }
       .teaser { width: 26.5em; }
#archive_info, .prev_next
     { padding-right: 2.1em; padding-left: 1em; }
#sidebars { width: 27em; border: 0; float: right; }
    .sidebar { width: 100%; }
#sidebar_1 { border: 0; }
    .sidebar ul.sidebar_list
        { padding-right: 1em; padding-left: 1em; }

 

[Beware that the formating of the CSS code on this page will look different from what you’ll find in the layout.css file. It’s just the word wrapping that’s different, otherwise the code is correct.]

Did you find your CSS code? Great, copy it and we’re onto the next step.

Paste core layout elements into custom.css

Now that you’ve copied the core layout elements, we’re going to paste those into custom.css and add “.custom” before every rule, like this:

 

/*---:[ core layout elements ]:---*/
.custom #container { width: 87.1em; margin: 0 auto; }
.custom #page { padding: 1em; }
.custom #header,.custom  #footer
       { padding-right: 1em; padding-left: 1em; }
.custom #content_box { width: 100%; }
   .custom .no_sidebars { background: none !important; }
.custom #content { width: 58.1em; float: left; }
    .custom .no_sidebars #content { width: 100%; }
    .custom .post_box, .custom .teasers_box,
    .custom .full_width #content_box .page
           { margin: 0 2.1em 0 1em; }
    .custom .full_width #content_box .page { width: auto; }
    .custom .no_sidebars .post_box { margin: 0 1em; }
    .custom .teasers_box { width: 55em; }
       .custom .teaser { width: 26.5em; }
.custom #archive_info,.custom  .prev_next
     { padding-right: 2.1em; padding-left: 1em; }
.custom #sidebars { width: 27em; border: 0; float: right; }
    .custom .sidebar { width: 100%; }
.custom #sidebar_1 { border: 0; }
    .custom .sidebar ul.sidebar_list
        { padding-right: 1em; padding-left: 1em; }

 

Pretty simple. Now we move onto the heavy lifting in creating a fixed width layout.

Making changes to em based definitions

We’ve pasted our code into custom.css, added “.custom” to all the rules, and now we need to change most of the “em” definitions to pixel definitions. A couple of notes here: 1) I’m using this site as an example, so what you’ll need to change will differ; and 2) always test your site on multiple browsers and operating systems.

Let me show you the changes I made to the above code for this site, then I’ll explain those changes to you. Here are the fixed width CSS rules for this site:

 

/*---:[ core layout elements ]:---*/
.custom #container { width: 930px; margin: 0 auto; }
.custom #page { padding: 10px 0; }
.custom #header,.custom  #footer
       { padding-right: 0; padding-left: 0; }
.custom #content_box { width: 100%; }
   .custom .no_sidebars { background: none !important; }
.custom #content { width: 550px; float: left; }
    .custom .no_sidebars #content { width: 100%; }
    .custom .post_box, .custom .teasers_box,
    .custom .full_width #content_box .page
           { margin: 0 10px 0 0; }
    .custom .full_width #content_box .page { width: auto; }
    .custom .no_sidebars .post_box { margin: 0 1em; }
    .custom .teasers_box { width: 545px; }
       .custom .teaser { width: 270px; }
.custom #archive_info,.custom  .prev_next
     { padding-right: 2.1em; padding-left: 1em; }
.custom #sidebars { width: 360px; border: 0; float: right; }
    .custom .sidebar { width: 100%; }
.custom #sidebar_1
   { border: 0; background-color:#f5f5f5;
border: 1px solid #ddd; margin-top: 2em; }
    .custom .sidebar ul.sidebar_list
        { padding-right: 10px; padding-left: 10px; }

 

First, note that I didn’t change all of the rules (the rule changes are highlighted in red). For example, I didn’t change any of .no_sidebars rules — it wasn’t necessary because at this time I don’t have any such pages, but when and if I do, I can easily make those changes in my custom.css file. Also, there are some rules that weren’t necessary to change, but they were in the same block of code so for the sake of simplicity I grabbed it all.

The trickiest change to make is the first, the #container width. That number is the product of the addition of either 2 or 3 numbers (in this example 3 numbers are added). #container is the width of your page with all the content inside, so we’ll need to add the width of your main post section and the sidebars, plus (!) any additional margins we add. In this example I added

#content (550px) + #sidebars (360px) + ul.sidebar_list (20px) = #container (930px)

The last number I added, ul.sidebar_list, is the left and right margin of the sidebar list, which pulls it away from the background and border I styled.

I’m not going to cover all the changes I made above, but let me draw your attention to a few details. On the #content_box .page I needed to take out all the margin space except for the right margin, which gives me space next to the sidebar. For the .teasers_box, that should either be the same or a little less than the #content (mine is 5 pixels less, just in case); and the .teaser should be half or less than the .teasers_box.

Otherwise, the changes should be self explanatory. If you have any questions, please leave them in the comments and I’ll try my best to answer them.

I hope you found this tutorial useful. If you have any improvements to suggest, please leave them in the comments.

Photo by ctankcycles and republished here under a Creative Commons license.

Creating a flexible header using Thesis and WordPress

The following is a tutorial on how to create a full-width image header using the em based layout in the Thesis theme for WordPress.

Increasingly I’ve been using the WordPress framework Thesis to develop Web sites. Some call Thesis a theme, others a framework. I think it’s more of a framework because there’s too much design work to do after installing Thesis, if you really want to customize it.

One of the aspects of Thesis I see people struggle with is the em based design, which is in contrast to the pixel based design so often found on the Web (here are some em resources: Wikipedia definition and history; pixel to em conversion table; general information about using ems in CSS; and using ems to create an elastic layout with css). Out of the box Thesis uses ems to measure just about everything you can think of, including font and column sizes. In general, that’s a good thing expect for the fact sometimes it can cause layout problems with images.

Bird Language site in Safari
Bird Language site in Safari

Depending on the browser or operating system, ems may scale differently; plus the pixel to em conversion isn’t an exact science. Yes, despite all these issues I still think em based design is often the way to go. For visitors to your sites, ems are more flexible.

I want to show you how to create a full-width header for your site that has an em based layout. This technique isn’t really Thesis dependent; you could apply the same technique on any Web site with an em based layout. Onward!

First, let’s look at the problem. The screenshot to the left is of a site using the Firefox Web browser for Mac OS X. You’ll find similar design reproduction in Safari for the Mac too. Notice that header image? It doesn’t span the entire header because the image is measured in pixels, but the layout is defined in ems. Mark this: even though in Thesis preferences you’re defining the column widths in pixels, the CSS is produced in ems. That is my biggest complaint about Thesis because most people don’t understand what this means.

Eagle Hill School site in Firefox
Eagle Hill School site in Firefox

Think of it like this: you bring plans to a cabinetmaker measured in inches, but when the cabinets are delivered they were produced based on centimeters. You could do that using a conversion, but the finished product might not be exactly what you were expecting.

Let me help you create a full-width image header that solves this problem (and retains the search engine optimization Thesis gives your site).

The two example sites I’m using are the Eagle Hill School Teacher Training (that I designed) and the Bird Language site someone pointed me towards. I’ll be showing you how to create a header like the Eagle Hill School site.

background image
#header background image

First, start with your image design. Your final design will actually be broken into either 2 or 3 different images (all PNG files). With the example at hand I used 2 different images, but I’ll show you why you might want to use a third image.

Take a look at that #header image on the left. The image is much wider than the design would ever require (1840 pixels), but we do that just in case. This image is for the background of the header ID, which is defined thus:

.custom #header {
position: relative;
height: 199px;
padding: 0;
border:none;
margin: 0 0 1em 0;
background: url(images/grass_wide.png) 100% 100% no-repeat;
}

That CSS defines the height of the header (no more than the image height), give a margin if you like, hooks up the background image (which you put into your custom directory in Thesis), and ensure that the image spans both 100% of the height and width without repeating. Notice that I used a PNG file here even though it wasn’t absolutely necessary (it’s not a transparency). I could have used a JPG image, however if I used a JPG for the background and a PNG file for the floating logo, there would have been a problem with color reproduction and matching. Better to make all images PNG.

background image 2
background image for the #logo

The next image I need is for the logo ID in CSS. This is a transparent image that floats over the background. When you’re designing the header create your background and logo together, then export each image individually. Also, this is important: depending on where you plan on positioning the logo, give your background plenty of space to put it. Notice the tractor in the background is on the right of the image, but the left side (where my logo will be) is clear of distracting information.

Let’s look at the CSS code that produces the logo:

.custom #logo {
text-indent:-9999px;
width:694px;
height:199px;
margin: 85px 0  0 15px;
position: absolute;
padding:0;
}
.custom #logo a {
display:block;
text-decoration:none;
height:119px;
background:transparent url(images/headertext_trans.png) 0 0 no-repeat;
}

We’ve got two things going on here: a definition for the logo (positions where the logo will be) and the link inside the logo property (where we put the image). One important note: the width and height of the #logo is the width and height of your image. That’s it, except for one more thing …

In the Thesis header there’s also the tagline ID. There’s a couple of different ways to handle the tagline: you can do like I did in this example and hide it using CSS (it will still be available for indexing by search engines), or you can create another image (the third image) and float it opposite from your logo. Here’s the code I used for hiding the tagline:

.custom #header #tagline {
text-indent:-9999px;
width:1px;
height:1px;
display:hidden;
}

That’s pretty straightforward, but what about using a background image for the tagline and hiding the text? I can help you with that. Just look at the header of this site. While I don’t use a background image for the header, I do replace the tagline text with an image (the image of people in the header is actually the tagline). Here’s the CSS code that will make that happen:

.custom #header #tagline {
text-indent:-9999px;
width:363px;
height:77px;
position: absolute;
top: 10px;
right: 0.6em;
background:transparent url(images/people.jpg) 0 0 no-repeat;
}

The trick here is positioning the image. Depending on your site, you’ll have to play around with that. Looking back at the example we started with, I could have made that tractor a third image to replace the tagline text, instead of hiding the text.

I hope this tutorial can help in your Thesis development. If you have any suggestions please drop it in the comments below.

Centering an unordered menu list

I have been struggling for some time trying to create a simple, unordered horizontial list menu using css. Well, I found some inspiration and figured out the problem. Inspired by the Centered List Navbar Updated at Listamatic, and comments by another menu creator at Listamatic, I was able to create a menu like you will find on my footer. This hasn’t been tested on any Windoz machines yet, but it works fine in FireFox, Safari, and Camino on Mac OSX.

First, here is the HTML you will need (you can expand or contract the list as needed:

<div id="footercontainer">
<ul>
<li class="first"><a href="#">Link text one</a> you can also add text outside the link.</li>
<li><a href="#">Just link text</a></li>
<li><a href="#">Link text three</a> you can also add text outside the link.</li>
</ul>
</div>

Before I get to the css, you will notice one change I made because I was using this for a footer: I did not want all of the text in a list item as a link, therefore I had to change where the border (pipe) was added. Originally the border was added to the link; the border is now added to the left of the list item.


#footercontainer ul
{
text-align: center;
padding: .1em 0;
margin: 1.25em 0;
background-color: #fff;
color: #666;
width: 100%;
line-height: 140%;
font-size: 85%;
}

#footercontainer ul li
{
display: inline;
padding: .2em .5em;
border-left: 1px solid #e72000;
}

#footercontainer ul li.first
{
border-left: none;
}

#footercontainer ul li a
{
color: #0000cd;
text-decoration: none;
}

#footercontainer ul li a:hover
{
color: #e72000;
text-decoration: underline;
}

Hope you find this helpful. You can contact me with comments or suggestions.