How to replace the default “Post a Job” button

In previous posts, we’ve outlined how to remove the "Post a Job" button, but we recently received a comment from Chris, who wants to learn how to replace the default "Post a Job" button.

What’s Needed:
•    Basic Photoshop skills to create a new image (or a creative friend)
•    A place to host the new image
•    An open mind…this might seem technical, but we promise we can talk you through it.

Instructions to replace the "Post a Job" button:
1.  Create a new image that’s 280 pixels wide and 60 pixels high.  Upload this image to your main web site, noting the image’s URL.  (If you can’t easily upload it to your own site, adding it to Photobucket will work fine.)

2. Insert the following CSS into header field on the the Header / Footer Page to hide the current image:

<style>
.content .main #post_link_container{position:absolute; top:0px; left:360px;}
.content .main #post_link_container.theme {
width:280px;
height:55px;
background-image:none;}
</style>

3.  Insert the following Javascript into footer field on the Header / Footer Page to add your new image, where http://www.yoursite.com/image.gif is the URL of the image you created in step 1.

<script type="text/javascript">
if (document.getElementById('post_link')) {
  document.getElementById('post_link').innerHTML = '<img src="http://www.yoursite.com/image.gif" width="280" height="60" alt="" border="0" />';
}
</script>

4.  OPTIONAL: Adjust the positioning of the image.  Go to the the Header / Footer Page and modify the number of pixels to the top and left of your new image to suit your tastes.  Change the positioning by modifying this line:

.content .main #post_link_container{position:absolute; top:0px; left:360px;}

Need Help?
We're happy to assist -- give us a shout if you need any additional pointers.

Comments

[Chris]

Thank you for the great pointers.

What I ended up doing was hiding the existing PAJ image and replacing it with a text link formatted via CSS with a relative link to the job post page. It did the trick!