How to put different links in your header image - Suffusion theme

This took DAYS to figure out (which would have nothing to do with my lack of web techie education). The answer to my question was NOWHERE online and I couldn't even get the answer I needed on the Aquiod (Suffusion) forum.

Any tutorial type thing you might find on this blog probably involves "tinkering". I've learned that truly custom thingys in Wordpress (like what I'm about to demonstrate) are NOT cut and dry. One person's precise instructions will probably not produce the exact same result for you. Image sizes differ, back end settings for other thingys differ.... it's just not that simple. Which stinks. So what do you do? Tinker with things until you get the result you want. Change ONE THING - just ONE - save that change, refresh your page and see if your change did what you hoped it would. If it worked, hurrah! If not, change back whatever you just changed (even if it appears that it didn't actually change anything - whatever you changed was that way for a reason).

The following tutorial should work with any Theme so long as it has a Header Widget area. Specific instructions are for the Suffusion theme. This is what I did to make my snazzy self-made custom social media graphic clickable with the appropriate links to Facebook, Twitter, and RSS.

So here's how it's done (or how I did it, at least):

Start with no header image in your settings - no background or foreground images. Make the height of your header (the very bottom option in suffusion) and make it 1. This is all under Suffusion Options > Theme Skinning > Header

1. Create your image map. Put your desired image wherever you keep your other uploaded Wordpress images and go to http://www.image-maps.com. Plug in your image url and follow the steps to create your link map. (this part was the easiest - it was figuring out how to make the map cooperate with Wordpress that took forever)


2. Make your header widget area bigger than your image. Go to Suffusion Options > Sidebar Configuration > Header Widget and adjust the width of the header widget to slightly wider than your actual header image (mine is 80px wider with a 1000px image, if yours is 800px, try starting with 50-60px)

3. Put your image map into the Header Widget area. Go to Widgets, put a Text widget in the Header Widget area. Paste the HTML from the image-maps site into the text box. Do NOT paste the CSS or type anything in the widget title. Just paste the HTML and click Save.

Refresh your page. You should see your image and your blog title (text) in the header area.

4. Get rid of the blog title text. Create a transparent .png file that is 1px by 1px. (If you don't have software that allows you to make a transparent file, just make it the same color as the background of your header image. In my case, that'd be white). Save the little pixel file wherever your header image is. Go to Suffusion Options > Theme Skinning > Header and make the little pixel file your header foreground. I set mine to "Bottom Center". Refresh your page. You should see the text gone and just your header image.

And now the "fun" begins...

4. Remove the border around the header widget/image (if desired). Go to Themes > Edit Themes. Open your theme's style.css file. In Suffusion locate the below line. The border is probably set to 1px. Change it to zero. Refresh your page. The border should be gone.

And I think that's all!

I'll update with screen shots later. This was one of the last things that was keeping my new blog from going live. Now that it's taken care of, I'm ready to move!!