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

1 jbutzu whinnied... 06/2/2009 at 1:16 pm

“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.”

Is this bad?
John

Reply

2 The Mules whinnied... 06/2/2009 at 2:16 pm

Thank you for stopping by, jbutzu — that’s a great question.

We’re on the fence as to how “bad” text replacement of this specific kind might be interpreted. It may not be entirely safe from a Google penalty, and we are not alone in having asked Google for clarification on the issue.

We would recommend sticking to very limited and mindful use of image replacement CSS. To be safe, if one can be safe in this regard, we choose to have the replaced text illustrated (text-as-graphic) in the CSS replacement image. Aside from the home page, this text would have otherwise been displayed as a limited-value Paragraph (P) tag.

Our Thesis tagline is Half as Smart, Twice as Stubborn — which is “hidden” — but the image says the same thing. To us, that’s not much different than ALT text on steroids, and was demonstrably not created with intent to manipulate or mislead search engines.

Because Thesis pulls the tagline into the meta TITLE also, or can, leaving the field blank is not a reasonable option. Sizing the font to 0px or other display alternatives sound no better.

Unless we see bans occurring or hear more specifically from Google on their position, our instinct suggests careful use of the above code should not trigger penalties.

Reply

3 minerva whinnied... 06/3/2009 at 10:08 am

Hi there. Your instructions are really clear and comprehensive. But I’ve encountered a problem with a WP blog I’m trying to revise with a new banner. (I’m a total WP newbie.)

I can get to the custom CSS file and remove the CSS they have for a banner (doesn’t look like yours) and replace it with what you have. But I can see by the source code of the blog that there’s a bunch of code calling the banner that I would have to edit. And I have no idea what file that source code is actually in. This is so confusing. Can you offer any advice?

Thanks,
Andrea

Reply

4 The Mules whinnied... 06/3/2009 at 4:06 pm

Hi Andrea,

This tutorial is specifically geared to the Thesis Theme for WordPress. Nearly any other design will require additional or modified steps. Aside from migrating to Thesis, the only other option is to dig into the code you have today.

We’ve sent you an email guessing at the blog you may be speaking to, which does look like it could use a similar set of steps with a tweak or two along the way.

Reply

5 eggzy whinnied... 06/19/2009 at 9:16 am

Thank you! This is so clean.

Would it be possible to have the banner OVER the menu bar?

Reply

6 The Mules whinnied... 06/19/2009 at 1:27 pm

Eggzy,

We pondered your question, eating in a line down the cabbage rows. Banner over menu bar — yes, possible, but why?

Once the last cabbage had been cropped and bitten to a cud, the elders among the herd agreed… we believe you probably meant: can the navigation be floated over the CSS background image? — and we bobbed our heads immediately.

Yes.

The banner (a DIV image background) and navigation menu (an unordered list of items with separate positional controls), can float over the nav, or vice-versa. Only one makes good sense to the end user, but either could be done in Thesis.

Thanks for stopping by! We’re out of cabbage, but fresh banner images are in plentiful supply.

Reply

7 eggzy whinnied... 06/21/2009 at 4:39 pm

Oh Mules!
Thanks for your reply.

I’m not sure I understand! What I’d like is to have the menu bar (the one saying HOME STF STFU MULE MUSINGS…) under the logo banner.

I feel it’s much more esthetical. Don’t you think? If you look at this site for example (I don’t think this site is using thesis though): theiphoneblog.com, you see the menu line is under the top banner.

If it’s doable, can you push me towards the answer? I’m a real newbie :S

Reply

8 The Mules whinnied... 06/21/2009 at 5:15 pm

This is why cabbage, SEO, and banners do not mix well. We should have read more carefully. Your request is a simple one, and as a Thesis user, if you’ve been to the forums you already have the answer.

Thesis has exceptional separation of content and presentation layers — and a great way to customize the latter with ease. To move the navigation as you’ve suggested, you’d add this to custom_functions.php — nothing else required.

remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header', 'thesis_nav_menu');

Reply

9 eggzy whinnied... 06/22/2009 at 5:52 am

:/
Well, back to square 0 for me. Time to sit down, read the thesis forum and documentation. I’m a noob :P

Thank you for your precious help!

Reply

10 The Mules whinnied... 06/22/2009 at 5:56 am

The forums are a wonderful place for spring foals to get their hooks and custom functions fix. Rick’s OpenHook plug-in can help make edits such as these calf simple, or so we hear. Mules are not very fond of plug-ins, even those we know will be supported in coordination with Thesis. Back to the pasture for us – it’s another banner day! ;)

Reply

11 dpilkington whinnied... 07/16/2009 at 12:44 am

Thank you so much for stopping your grazing to put this tutorial together. Is there a simple way to take the code you have and go one step further to make it clickable?
http://www.csappraisals.net

That is all, back to grazing.

Reply

12 The Mules whinnied... 07/16/2009 at 2:04 am

Yes, it has been a decision of the herd to create not just a “clickable header” code tutorial, but rather a full, correct-syntax CSS code output based on simple, intuitive user inputs.

This is an offshoot of our Custom.css Code Generator project, and as such, will take some time to perfect and release to all. The end result should be quite useful, however, so we ponder the code robot’s needs while grazing… and should have the better part of it completed in a week or two.

Reply

13 HotSauceDaily whinnied... 07/16/2009 at 8:02 am

@ eggzy: I’ve done what you are asking about. Moved the menu to display below the banner.
If you’re still around, drop me a line.
Also, you may get more help if you include your website’s address when you post questions. :)

Reply

14 SuperDude whinnied... 07/18/2009 at 7:55 am

Hey Mules,

thanks a LOT!
This is a really awesome post! Too often some uber-geek writes stuff for normal geeks how to tweak this and that, and tech-dumb people like me don’t get it. But this one is different – really broken down step by step, easy to follow, and I succeeded on first try.
Plus, jugding from your comment replies, you really care. Awesome, just awesome!

SuperDude
PS: Did I already mention that you are awesome?
PPS: I really wanna drive my point home: YOU’RE AWESOME.
PPPS: see above ;-)

Reply

15 The Mules whinnied... 07/18/2009 at 3:40 pm

We’re pleased you were successful in your first attempt. And while the herd is loath to admit to it publicly, we have a certain affinity for the human species. Those using Thesis appear to have a higher intelligence than the usual lot.

Reply

16 utopianman whinnied... 08/12/2009 at 5:42 pm

Live Video Phone On Creating a Header.

I’m glad I did not give up on my search for this solution!

Thank you so much for the instructions.

Reply

17 The Mules nickered back... 08/12/2009 at 5:48 pm

Happy apples — the herd will be pleased to know their work has born fruit.

18 Michael whinnied... 01/16/2012 at 5:23 pm

Followed the instructions, seemed simple enough but not working. I am sure of the image path. But something is off.

Here is the code:

.custom #header { border-bottom:none;
height:208px; padding-top:0; padding-bottom:0; 

-- BEGIN MULE POINT OF NOTE --

background:url( http:// http:// ... wpheader.jpg)

-- END MULE POINT OF NOTE --

center left no-repeat; }
.custom #header #logo { display:none; }
.custom #header #tagline { display:none; }

Reply

19 The Mules nickered back... 01/16/2012 at 6:30 pm

The image path is incorrect, as it contains two “http” references. Even in removing this second reference, the image is a 404 Not Found.

The herd discovered an image in your …/custom/images folder with a file name of “WPHeader.jpg” — this appears to be intended for use as a header graphic, though it is not presently employed as such… correctly, in any event.

Because the logo and tagline can in Thesis 1.8.2 be checked or unchecked, the herd recommends using the interface rather than display:none in the custom.css file. This would leave you with the following custom.css entry to resolve the issue:

.custom #header { border-bottom:none; 
height:207px; padding:0px; 
background:url('images/WPHeader.jpg') center left no-repeat; }

With this addition… why, you should be sassy as a freshly-bathed Cat.

20 Michael nickered back... 01/16/2012 at 6:45 pm

Finally got it to work. I think I had the Title and tagline turned off. Turning them on in Display options seemed to work.

21 ajmal whinnied... 01/29/2012 at 7:46 pm

Excellent tutorial for adding banner images in thesis theme. Thank you very much i will do this in my thesis blog

Reply

22 Tom Dwyer whinnied... 02/2/2012 at 11:30 am

Hi,

I’m totally new to all this and my partner in crime (the one that usually figures this sorta stuff out has pushed me outta the nest to fly on my own. The Bastard!)

So, my site, (It was mentioned to post it in previous comment) is http://www.photographiccoach.com – I made my banner last night (first ever, banner and time using photoshop) **Only took me 4 hours.** Grrr

All I want to do is get my banner Above the home link and change the “alt image info” so it reads for the topics my site covers. SEO

Is this the code I need to insert ? (But where???) *I do have [plugin] OpenHook installed.

remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);
add_action(‘thesis_hook_after_header’, ‘thesis_nav_menu’);

Thanks! Great Site! Maybe I can help you one day with a photo question or two. I’d like that very much.

Kinda lost here – so much for a newbie to take in at times.

I’m going to join the forum, but my partner made a game of it — and I need this banner up top by Sunday mid. (Help me kick his ass?)

Reply

23 The Mules nickered back... 02/2/2012 at 2:53 pm

Tom,

In the interface for Thesis, go here, and look for this…

WordPress > Thesis > Site Options > Design Options > Display Options > Header

[x] Show site name in header

Change this selection to not-checked. Same goes for tagline, if selected. Save. You will no longer have a header div with populated text.

Now for your PHP section. OpenHook is not a herd favorite.

Our method would be to add this to your custom_functions.php file… if it is your first-ever edit, at the bottom should be dandy…

function mule_header() {
?>
<div class="mule-header">
<a href="YOURSITE.COM">
<img src="YOURSITE.COM/IMAGE_PATH" 
width="900" height="169" alt="add alt text here" />
</a>
</div>
<?php
}
add_action('thesis_hook_before_header', 'mule_header');

remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header', 'thesis_nav_menu');

Where YOURSITE.COM will be the link destination.

The URL for your image, to replace “IMAGE_PATH” above, would be…

wp-content/uploads/2012/02/2-Photo-Coach-Zen-Banner.jpg

Your banner becomes a linked image with modifiable alt text… and the navigation should flip below it.

To remove the visible padding on the now-empty header div, in custom.css, add…

.custom #header { padding-bottom: 0em; padding-top: 0em; }

On the photo question… the herd quietly plays here as time allows…

http://mulehides.com/photomules/

Cheers.

24 electrical engineering whinnied... 03/3/2013 at 11:21 pm

you have wrote perfect direction. thanks for writing

Reply

25 The Mules nickered back... 01/16/2012 at 6:48 pm

The Herd shall frolic in celebration of your victory!

Reply

26 jhon mertan nickered back... 04/30/2012 at 5:39 am

If design issues cause you to shun header tags, read on. We’ll show you how to quickly customize those headers using cascading style sheets.

Reply

The South Pasture