When you create your Job-a-matic account, your Job-a-matic
job site comes with a default header that contains the name of your job site.
It’s pretty simple and generic, so it should inspire you to bling it up to suit
your tastes. Wouldn’t it be nice if it
matched your site’s look and feel?
In this tutorial we will walk through the process of adding a header to your job site to make it match your web site. If you are using Firefox as your main browser, it would be helpful to have the Web Developer Toolbar add-on installed. If you have Internet Explorer 7 (IE7), the Internet Explorer Developer Toolbar will make your life a lot easier.
1.
First of all, you will have to identify the header that you
would like to add to your job site.
Firefox: Using the Outline > Outline Current Element tool in Firefox's Web Developer Toolbar, hover your mouse cursor over the header of your web page. An outline should appear around the header elements.
IE7: Use the Select Element by Click 
tool in the Internet Explorer Developer Toolbar, hover your mouse cursor over the header of your web page. An outline should appear around the header elements. Click on the area once.
Take note of the classes or IDs of the HTML elements that make up the header section.
2. Find the code for the header.
Firefox: Right-click on page and select View Page Source. Find the code for the header section by searching for the classes or IDs from the previous step.
IE7: Use the View Element Source 
tool. Scroll to the bottom of the window that pops up and you will see the code for the header.
Copy the code for the header. Login to your Job-a-matic account and go to the Configuration > Header-Footer section. Paste the code into the box labeled Header HTML.
3.
Find the CSS for the header.
Firefox: Use the CSS > View Style Information tool and click on the header. The styles will be displayed in a split window. Copy the CSS.
IE7: Scroll back up to the top of the window that popped up in the previous step. Copy all the styles that pertain to the header.
Go back to the Configuration > Header-Footer section in the Job-a-matic dashboard. Paste the code into the box labeled Header HTML above the stuff that you previously entered. Wrap the CSS between
<style type="text/css">...</style> tags.
4.
Firefox users may need to repeat the previous step for each element within the header section. Remember to remove line numbers and other mark-up that is not a part of CSS syntax.
5.
The code should look something like this.
Click on Save Changes to apply your settings.
6.
Click on View My Site in the top right to admire your handywork.
If the header does not include a link back to your website, it would be nice to add one so that visitors to your job site may find their way back.
A link can be added by surrounding any text or image with the following tags:
<a href="http://www.example.com/">...</a>
(Remember to replace example.com with the URL of your web site!)
If you have any problems with customizing your header, let us know! We have a crack team of HTML ninjas who can help!
We like you. 
Comments