The no-click tutorial provides general information on creating and identifying components of image banners, dimensions, image selection, image formats, CSS text replacement, and general Thesis-specific concepts for banner-style image replacement.

We’ll not repeat what was said there, here… if you find yourself scratching your head, either you’ve made contact with the filthy barn dog, or you may need to read or revisit the more basic “how to” image banner guide — the link at top — before proceeding here.

Create a clickable image banner for your Thesis blog

The herd is working on pulling a stump in the south field.  We’re also working on a comprehensive Thesis CSS code robot.  Clickable banners are one among dozens of Thesis modification options undergoing laboratory tests in the corral.

As a lark, we have decided to share this three-field code robot specifically to help make a clickable banner image header for users who are new to the Thesis theme.  If you feel comfortable, click and be off with you! For further instruction and detailed notes on proper use, keep reading.

Requirements to use the Thesis clickable banner image CSS robot

You will need to know four things to correctly benefit from the clickable banner tool: the location of the image you wish to use… your image width in pixels… your image height in pixels… and how to edit your custom.css file — even most of the foals know custom.css is the style sheet used by the Thesis framework for CSS modifications.

The Mule edition CSS code assumes the Thesis user has not made extensive modifications to the default Thesis custom.css file — more precisely, the generator assumes no changes have been made to the #header or its sub-elements, #logo and #tagline.  The code can be used to overwrite existing header, tagline, and logo styles, but may not function as intended if your custom.css contains multiple references to the same identifiers.

Additional CSS styling to the clickable banner generated code

To make this “clickable” banner script calf-simple, the herd has made certain decisions for you, the Thesis user.  You’ll see these decisions in the CSS code output.  Items of note on Mule decisions:

Padding, border, and margins are all set to zero and use “em” units.  Each of these three high-level selectors is broken into “top, right, bottom, left” pieces, allowing Thesis users to modify these “zero” values with complete control.  If you wish to put a certain amount of distance between the clickable banner image and the Thesis code that follows the header, you could edit the CSS output of (#header) padding-bottom: 0em; to a value such as 1.1em.

Similarly, the CSS code generated for the Thesis clickable banner will not “repeat” or tile the image, and the banner image will be centered.  To change values of this kind, look at the .custom #header #logo a section for the background property.  Even humans may recognize that “center” can easily be changed to “left” or “right” to alter the banner’s alignment.

SEO considerations of the clickable banner CSS image replacement

As an SEO and usability consideration, recognize that in two places, .custom #header #logo a and .custom #header #tagline, the following technique is used… text-indent: -9999px.  If you want your clickable banner image to contain the tagline as visible, on-page text, delete this entire line for the .custom #header #tagline section.

As for .custom #header #logo a, the Thesis structure requires that the visible text — in this case, your blog’s title — be visually removed.  Better said, indented beyond visibility.  As this code remains in the “view source” output, such “image replacement” of text may be considered an SEO concern to some.

Matt Cutts has discussed text-indent and other CSS methods that achieve a similar end result — so have Google’s WebMaster (WM) team members… and there has been no final, unquestionably clear answer or consensus as to whether such actions could result in a penalty or ban.

The herd has decided their four-legged stance is a policy within the realm of reasonable defense — namely, for Thesis users, ensure that you replicate your blog’s original title and tagline text in the graphical text of your banner.  Because your image and “invisible” text are equivalent in this scenario, SEO penalties are less likely.

That should do.  If you did not click earlier, here’s the automated “clickable header” CSS code generator for Thesis theme users…

Make your Thesis clickable image banner

Questions, errors, technical issues, ideas… usability concerns? Leave a comment — centralised location of human feedback permits us to more efficiently ignore the yapping of an inferior species.