Make Artisteer Header Area Clickable In WordPress

NOTE:  This only works for 3.0 Beta versions.  With 3.0 RC1, Artisteer changed the structure and names of classes.  A similar technique will work, but with different class names.

You really don’t need to modify any code to make an Artisteer 3.0 header area clickable.  You can do it all with CSS (at least in the designs I have tested).

I would suggest making a Child theme first so you don’t even need to change the generated style.css file.

Then, use Firefox with the Firebug addon, or another development tool so you can make on-the-fly changes to the CSS.

First, make sure the heading text generated by Artisteer is visible and clickable.

If you like the font and position of the title, you can retain that.

I usually have the heading text as part of the background image and make the Artisteer text invisible, but this is not necessary if you like the font that Artisteer provides.

Start your changes by adding this to your style.css file so you can see the area you will make clickable:

#name-text {
   border: 2px solid red;
}

Now, add height and width values to make the area the size you want:

#name-text {
   width: 780px;
   height: 50px;
   border: 2px solid red;
}

If necessary, add margins to get the area exactly where you want it. Once you have the area sized and positioned correctly, add the rule to make the text invisible, or the size that you want:

#name-text {
   width: 780px;
   height: 50px;
   border: 2px solid red;
}
#name-text a {
   display: block;
   width: 100%;
   height: 100%;
   font-size: 0px;
}

If you kept the original text visible, you can adjust the padding-top and padding-left of the ‘#name-text a’ entry to reposition the text.  If you need to do this, I suggest adding a different color border to that entry so you can see the actual area covered.

Check to make sure that clicking the area works, remove the borders and you are done!!!

I would appreciate any feedback from anyone who uses this technique.

http://codex.wordpress.org/Child_Themes

2 Responses to Make Artisteer Header Area Clickable In WordPress

Leave a Reply

Your email address will not be published. Required fields are marked *

*