DoubleMule

 | Half as Smart... Twice as Stubborn...

How to Add Your Custom Banner Image to the Thesis Theme Header – CSS Version

I can haz Thesis custom image banner header preez?

The most frequently-asked question new users of the Thesis theme for WordPress ask is surely this: how do I add a custom image to the banner / header section of my blog?

We omitted the obscenities — mules have sensitive ears.

We heard you loud and clear. Let’s create, upload, edit, and clearly demonstrate exactly how to measure, make, and add a custom image file to your very own Thesis banner!

As per various requests, we will assume little and explain much in this tutorial.

If you just want the code to plug into custom.css, scroll near the bottom and you’ll ruin your blog be done in a jiffy.

On this site, the custom Thesis banner image is the area containing a handsome mule in profile, the “Half as Smart, Twice as Stubborn” faux text, and the wine-red mule shoe on the right. All of these are a single, simple custom header image that required editing three lines of code in one file to make our header area sparkle.

Three lines of code. Total.

Two of those three lines use CSS to remove preexisting text content. For those handy with their maths, this means the mule team added the header you see with one (1) line of code.

Now for how!

Because Thesis permits extreme flexibility, the concept of a banner image can become complicated quickly. However, creating, publishing, and styling a single-file banner image — without concerns for link destination or additional information on or around the banner — is as friendly and simple as a bucket calf.

Presumptions and requirements.

You have installed or updated WordPress (currently 2.7.1) and you are using the latest release of Thesis (currently 1_5, 1-5, or 1.5 depending on where Mules look — check the downloads section to be sure). You have, if necessary, enabled file permissions such that you can create and save posts, images, and files.

The mules will presume that, prior to creating a custom image banner for Thesis, you either have, or plan to in the course of this tutorial, “enabled [your] custom style sheet” in the WP dashboard’s Thesis options area — see image — and, as per the installation instructions, mules figure you’ve renamed “custom-examples” to simply “custom” in the Thesis folder on your server.

Did you remember to enable your custom.css file from the options panel?You also uploaded Thesis as a set of files and folders, not as a single uncompressed ZIP. If you forgot to un-ZIP, fix it — but don’t tell anyone. Ever.

There are some quality posts from others such as this recent one, Things I Wish I Knew When I Started Using Thesis that can supply ideas and help at these most basic levels — an example being recommended FTP clients.

Searching with target terms in Google or the DIYThemes site and member forums will solve any assumptions we make that you have not yet overcome. You’re back? Good!

Banner Image types, quality, and recommended formats.

Let’s start with the image itself. You can go with a GIF, a JPG, or a PNG as common image types. A GIF offers the potential for transparency and very small file sizes for low-complexity rendering… but a GIF also only supports 256 colors.

The JPG or the PNG format are thus recommended for most Thesis users, as the majority of custom image banners include a colorful, energetic photograph or logo of some kind. Want your name in grayscale? Mayhaps a GIF is the ticket — the banner on this site is a GIF, but then Mules are not big on color variety.

How big (pixel dimensions) should your custom header image be?

For our purposes, we will assume Thesis users wish to “fill the space” to create a banner that, like ours, fills the header portion of the screen completely. It would be our recommendation to determine the header image size as follows: when you have adjusted Thesis options for sidebar and column widths to your satisfaction, take a screencap of your site.

For Windows users, Alt-PrintScreen will take a snapshot of the active window. You can then paste this into an image program and determine the pixel width of your header. To keep this free and low-tech, a minimalist solution would be to crop the image carefully, then save it from any graphical software as a GIF or JPG — either is fine for this quick purpose.

Minimize your graphics program, open your browser of choice, drag your saved image from your saved location — the desktop, for example — and once it renders, right click and choose properties, inspect, or other options that should provide the dimensions of your image. If that was nonsense, click here to see what we mean. If, as in our example, you see “959×364″ you will have your target banner image width: 959 pixels.

Now we know our pixel width. How to make the banner image?

We’ll not go into detail here, aside from noting again that your width should be the discovered pixel size from the step above or other estimates, and that you should export and save your image as a JPG or PNG in the majority of cases for a crisp custom header banner.

The height of your banner image is all yours to decide. Note that if you create a 959×600 sized image banner, your content may be lost “below the fold” — meaning a visitor may have to scroll to read your posts. They won’t. That’s bad. Also, the larger the rectangle (image), the larger the file size, which can slow your load times, eat your bandwidth, and generally annoy Mother Earth.

As a rule of hoof, aim for a range of height between 50 and 200 pixels and a file size that does not exceed 200kb. You can check your file size by right-clicking a saved image (on your desktop) and viewing its properties.

Mac users? Sorry — no tricks and tips for you. Stop advertising shiny but inedible 3-pound Apples, then we’ll talk.

If your custom banner image is over 1mb, you may want to reconsider the file type, or use any of the numerous and free instant optimization services for images online (here is a simple image optimizer, here is one with richer but more complex features).

Okay, we have a banner image, where does it go on my server?

There are a number of ways to place your image in various locations on your domain (example: http://www.mydomain.com) where “root” is defined loosely here to be that URL shown in the example — namely, your domain address without subdirectories.

The most common placement methods use an FTP program, many of which are freely available, or a “file manager” or “control panel” of some kind, which uses similar transfer protocols to copy an image file from your computer’s local hard drive to that of a remote machine (web server).

What’s key is to know — and write down — where you put the image on your host / server.

The basic formula to calculate your “absolute link” — a link that describes the full path to the image location — is this:

yourdomain + any subfolder[s] + the image name you created

An example would be:

http://www.doublemule.com/myimages/banner-for-thesis.png

Knowing this image path is critical to easily creating a custom image banner in Thesis.

Again, the above represents an “absolute” path. The other “path” useful for Thesis users is a relative path. A relative path, as the name implies, defines the image location in terms of its relationship relative to the file calling for the image. For purposes of illustration, if the Thesis PHP (main files) call for content “a folder away” from your custom banner image, you could use a very short relative path to call the image.

Absolute* path example:

http://www.doublemule.com/wp-content/themes/

thesis_15/custom/images/banner-for-thesis.png

Relative path example:

images/banner-for-thesis.png

* A carriage return (line-break) was inserted in our Absolute Path example in order to keep the longer URI from spilling out of the Mules’ content frame.

Why the two options, absolute versus relative? Which is better?

An absolute path has an advantage in that you know exactly where the banner image is being called (exact location). If you click, paste, or type the absolute path into a browser’s address bar, the image should display. If it does not, your absolute path is not what you thought it was.

The advantage — for novice Thesis users — of an absolute link/URI is therefore the ability to confirm the image is where you feel it should be before you begin editing any custom files. If your image is visible on your absolute URI, adding surefire code to custom.css statements is a snap.

Absolute link paths can thus reduce the number of variables presented when adding your custom image banner. By way of example, here is the absolute link to our own banner / header image. See the image? Whinny, it works!

A relative path has an advantage in being shorter, as is obvious above in the example. It also survives when subdirectories or domains change “in front” of it. Whereas an absolute reference would break if doublemule.com migrated to doublemule-new.com, a relative link would remain intact, and your custom header functional (if all else were to remain the same in your Thesis installation).

So, at this point we have an image, we know where it resides, and we know its dimensions.

High time we put this custom header image to bed!

How to edit custom.css to add your custom banner image in Thesis:

Everything above was preparation for the simplicity of the code below.

Whether by FTP or file manager or control panels, you will need to reach a path that terminates like this, though variations abound:

…/wp-content/themes/thesis_15/custom/

Where “custom.css” resides in the custom folder shown above. If you cannot access custom.css along this path, look for minor variation (example: thesis/custom) and remember the basic requirements of renaming the original install’s /custom-examples folder to /custom, plus checking “yes” on the “use a custom stylesheet?” option in the Thesis WP-Admin visual controls section we showed as an earlier screenshot.

For example purposes, we shall say our banner image weighs in at 959×150 pixels. Remember that the 959px (px = pixels) width matches our site’s available header width — yours will probably be different. We calculated that earlier. The 150px of height are defined in our custom.css code, and the height was of your choosing — as such, this setting is shown in bold below. You need to change the number to the height of your custom banner in pixels.

The other item in bold is the path. We have discussed relative and absolute paths. In the example below, we adjust custom.css such that the file pulls the absolute URI of your banner image — which, because you have tested it (right?) you know goes straight to your custom banner image, regardless of whether it is a GIF, JPG, or PNG. Obviously you will need replace our placeholder with your image’s URI.

You’ll edit custom.css in a simple program such as notepad.exe or NotePad++ and then save and upload your file — usually; some FTP clients edit “live” on the server. You’re done!

Here’s the one step.

Type or paste this code at the bottom of your existing custom.css file:

.custom #header { border-bottom:none;
height:150px;
padding-top:0;
padding-bottom:0;
background:url(YOUR_ABSOLUTE_PATH)
center left no-repeat; }

.custom #header #logo { display:none; }

.custom #header #tagline { display:none; }

Remember we mentioned three lines of code? For the sake of visual organization, we’ve separated the first “line” into a section, but that’s line one. Line 1 is where and how you add your own custom banner image to the header area in Thesis.

The second and third line do this:

Both #logo and #tagline are “div” id tags governing the name of your blog and the tagline of same. If you want, you can exclude these two lines of CSS code. The result would be that the text for your blog and tagline will “float on top” of your background header banner image.

Displaying this text is fine if intentional. Most novice Thesis users choose to replace the text of the blog name and tagline with the content of their background image, thus we included these two properties for you to use or discard as needed.

That works for “page framework” — what about my “full-width” framework?

This is why the Mules appreciate Kristarella’s good nature. If you have chosen to use the full-width framework, a slight modification is required. Visit her excellent work for a detailed tutorial on banner images for the full-page framework. For our purposes we will note that .custom #header should be .custom #header_area, the rest is similar.

What should your custom Thesis image banner look like?

The Mules’ banner is not high-contrast and blends with other sections’ white space in several areas. If you do not use a blending method, your banner will look more like this “khaki rectangle” image banner from a digital photography site running Thesis.

You can have dissolving white space just as the Mules do, but the image itself remains a rectangle such as is more clearly visible on this photo blog link.

We hope this tutorial proves helpful to “total newbies” of the Thesis theme.

If you have difficulties of any kind — or wish to crow your success! — please let us know in the comments section below. Enjoy your new custom image banner in the Thesis theme for WordPress — and congratulations, your site looks better already!

Significantly more advanced “header section” tutorials may be on the way. Or perhaps not.

Never know with Mules — such stubborn creatures.

Socialist Media for Humans to Click...

Add Unsubstantiated & Wild Claims from Your Fantasy World...

The herd may very well kick or bite your vile spam...

The South Pasture