Bill Weye

Category: Tutorial (page 2 of 2)

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.

Begin a daily video podcast today

Sometimes you should just jump into a new project. Especially when the plan is to work on the project for the long term, as I’m doing with Farm Report, a daily video podcast I started this morning. The production values of the video aren’t worked out yet, the format isn’t solid yet, but the general idea is there. Improvements to come.

The goal with Farm Report is to generally inform people about local growing in Western Massachusetts. There’ll be interviews, commentary, nice photos. But, I’ll probably also include videos about weight loss and it’s relation to the food we grow. Continue reading

What Paul Newman taught me about reducing puffy face when vlogging [video]

When video podcasting you need to look your best. Increasingly production values (how your video looks) are important. Picture quality is getting better even for the smallest video producer, which puts pressure on everybody to improve. Check out the lesson I learned from movie star Paul Newman on how to get rid of your puffy face before vlogging.

http://blip.tv/file/3241613

5 screw-ups you can make recording a skype to skype call

We record the Photo Share Podcast using a Skype to Skype call; I make a Skype call to my podcast co-host Sandra and record the conversation, editing and mixing the audio file (.wav) later. We do this because it’s convenient and cheap (Skype to Skype calls are free), but there’s a bunch of problems that can crop up. Here are my top 5 potential screw-ups when recording these calls: Continue reading

Tip on improving work flow when creating podcasts

Would you like to encode your podcast file to mp3 and fill-in the ID3 tags with just one right mouse click? Then this tip is for you. To brand your podcast effectively, consistent ID3 tags and file encoding is important; you want your listeners or viewers to feel like you’re dependable, that your podcast will show up on the same day every week and that it’ll be in the same format every time. This tip will show you both how to get that consistency and speed up the time it takes you to prepare your podcast file for upload. Continue reading

5 Mistakes To Avoid When Recording A Skype To Skype Podcast

One of the ways to cheaply record a podcast that has multiple hosts is to use Skype, the voice over internet protocol (voip). I’m using this technique when I record Photo Share Podcast with Sandra, my co-host. This post will try to steer you away from some of the mistakes we’ve made. Continue reading

Newerposts

Copyright © 2019 Bill Weye

Up ↑