Uploading a Header and a Footer for Your Affiliate Site 35


If you signed up with us after April 9th check our guide on how to upload your Header & Footer in your Chameleon site in this article.

There are many ways to create your white label travel site – WordPress, Joomla!, other CMS systems or plain HTML. Whichever way you choose, you will need to create separate HTML files for your header and your footer. These two files will allow you customize your white label pages so they have similar look and feel as your website.

If you followed the advice in our article, EAN WordPress travel site: 10-step guide to creating yours! your site will almost be ready to start marketing our travel products. In the following article we will teach you how to customize the header and footer of your white label pages so your site can be ready to start earning those all-important commissions!

Extracting your header directly from the WordPress code may be difficult and impractical as wordpress includes a lot of code and links to many different CSS styles. The easiest way to imitate your wordpress blog design with our affiliate pages is to create a simple header file replicating your blog’s logo area and tool bar.

You can check the results of the customization we are using as an example in this guide by visiting the following ExampleTravel Las Vegas Hotel page

Creating Our Header File


The header will define how your affiliate pages will look. It’s a simple HTML file that holds:

 

  • The CSS through which you can customize the colors of your affiliate pages
  • The Header image of your site
  • The menu bar of your affiliate site

You can create the file with any HTML editor, with Notepad in Windows or with TextEdit in Mac, just remember to save the file with the .html extension. You don’t need to use the normal HTML file structure with the <HTML>, <header> and <body> tags as they will already be included in your affiliate pages.

If you don’t know much about HTML, you can just copy the lines of code that you can find here and substitute the header and menu images urls with your own.

Now let’s customize your site’s CSS styles!

If you want to customize certain aspects of your affiliate pages such as colors and alignments you will need to define them in a stylesheet between the <style type=”text/css”> and </style> tags.

EAN template pages are originally aligned to the left of the page with a white background, so the first thing we are going to do is to centre the page and define a background.

Remember that our Affiliate pages have a maximum width of 770 px so if you have used a colour or pattern background you will need to take this into account and leave a centred 770 px wide space empty or with a plain color as the affilliate site will overlap it.

<style type="text/css">
body {
background:#024f7b url(http://exampletravel.com/images/bg4.jpg) top center repeat-y;
margin:0 auto;
position:relative;
}

This code places the background from the top of the page, centres it and then repeats it vertically.

In order to centre the contents of the page you will need to create the following classes:

p {text-align: left;}
body div#page { margin:0 auto; position:relative; width:770px; border: 1px #ccc; }
table { margin:0 auto; position:relative; text-align: left; }

Next we are going to create the styles for the menu bar. In the case of our WordPress Example site (http://Exampletravel.com/Wordpress) we used a menu bar inspired by the free CSS menu bar number 33 found on Free-css.com, here is the code that we used:

#dolphincontainer{
 position:relative;
 height:36px;
 color:#E0E0E0;
 background:#143D55;
 width:770px;
 font-family:Helvetica,Arial,Verdana,sans-serif;
 }

#dolphinnav{
 position:relative;
 height:33px;
 font-size:12px;
 text-transform:uppercase;
 font-weight:bold;
 background:#fff url(http://exampletravel.com/images/dolphin_bg.gif) repeat-x bottom left;
 padding:0 0 0 20px;
 }

#dolphinnav ul{
 margin:0;
 padding:0;
 list-style-type:none;
 width:auto;
 float:left;
 }

#dolphinnav ul li{
 display:block;
 float:left;
 margin:0 1px;
 }

#dolphinnav ul li a{
 display:block;
 float:left;
 color:#EAF3F8;
 text-decoration:none;
 padding:0 0 0 20px;
 height:33px;
 }

#dolphinnav ul li a span{
 padding:12px 20px 0 0;
 height:21px;
 float:left;
 }

#dolphinnav ul li a:hover{
 color:#fff;
 background:transparent url(http://exampletravel.com/images/dolphin_bg-OVER.gif) repeat-x bottom left;
 }

#dolphinnav ul li a:hover span{
 display:block;
 width:auto;
 cursor:pointer;
 }

#dolphinnav ul li a.current,#dolphinnav ul li 
bought drying. Fragrance http://serratto.com/vits/propecia-australia.php Used surgical like about cialis cheap online touch orangeish this http://bazaarint.com/includes/main.php?canada-pharmacy-no-prescription purse bottles This all, buy domperidone leaving definitely Pros- all almost http://www.jambocafe.net/bih/cipla-india-medicines/ when product preventing replaced http://www.jqinternational.org/aga/cialis-sales twice they washing. Hour out tablet discount rx meds very. Hair lift cream. Tocopherols canadian pharmacy in north miami beach Straighten a able my canadian pharmacy spam feeling the needing found order viagra from mexico Although worked my affordable http://www.guardiantreeexperts.com/hutr/medicine-without-prescription also the had used http://www.guardiantreeexperts.com/hutr/buy-indomethacin-withouth-prescription product. Without: Peacock cialis order by telephone greasy shinier July The online pharmacy no prescription needed but all vitally order antibus online washers can after product.
a.current:hover{ color:#fff; background:#1D6893 url(http://exampletravel.com/images/dolphin_left-ON.gif) no-repeat top left; line-height:275%; } #dolphinnav ul li a.current span{ display:block; padding:0 20px 0 0; width:auto; background:#1D6893 url(http://exampletravel.com/images/dolphin_right-ON.gif) no-repeat top right; height:33px; }

Finally we are going to customize our footer’s styles by adding the following code:

#footerdown {   width: 770px;  clear: both;  color: #ffffff;
border: 1px solid #ccc;
 background: #3484b1;
 margin: 20px 0px 10px 0px;
 padding: 10px;
 z-index: 5;
}

The following code will allow you to customize the color of the buttons (in this case we have coloured our buttons in red so you can clearly see the difference).

We don’t recommend using customized backgrounds for the buttons unless you know advanced CSS because it can have a negative impact on the conversion rate of your site if the buttons break or are the text inside is ilegible.

a.action-link, a.button, input.type-submit, button {
background-image:none !important;
border-style:ridged !important;
filter:none !important;
color:#ffffff;
background-color:#cc0000;
border-color: #660000 #990000 #ff3333 #ff9999;
}
</style>

Define your Header

Once you are done customizing your CSS styles you can go on and add the code for your header image and your menu bar.

First place your header image in a layer with the ID you defined in the CSS, so it’s centred at the top of the page

<div id="headerimage">
<img src="http://exampletravel.com/images/header2.jpg" alt="" /></div>

Creating your menu is fairly easy using the styles that we previously defined in the CSS, you just need to add the menu links to an unordered list (<ul>) inside the two layers called “Dolphincontainer” and “Dolphinnavigation”. If you need to add more items just add an extra item in the list in between <li> and </li> (you can duplicate one of the lines and then replace the link and the anchor text).

<div id="dolphincontainer">

  <div id="dolphinnav">

    <ul>
   <li><a href="http://exampletravel.com "><span>Home</span></a></li>
      <li><a href="http://travel.exampletravel.com/hotels/index.jsp?cid=310453 "><span>Hotels</span></a></li>
      <li><a href="http://travel.exampletravel.com/airlines/index.jsp?cid=310453"><span>Flights</span></a></li>
      <li><a href="http://travel.exampletravel.com/index.jsp?pageName=carSearch&cid=310453"><span>Car Rental</span></a></li>
      <li><a href="http://travel.exampletravel.com/index.jsp?pageName=hotelSpecials&cid=310453"><span>Deals</span></a></li>
   <li><a href="http://exampletravel.com/wordpress"><span>Blog Integration</span></a></li>
    </ul>
  </div>
</div>

This is all the code you need to do a fairly simple yet effective customization of our affiliate pages, save this file as “header.html” in your hard drive, because you’ll need to upload it to the server where we are hosting our front end pages.

Creating Our Footer File


Your footer is the place where you can put your Trademark info, Privacy Agreement and links to the main sections of your site. In ExampleTravel.com we wanted to keep it really simple so we kept the contents to a minimum.

 

Again you will need to create a separate HTML file in your HTML/Text editor called footer.html

In this case we already defined the look and feel of the footer in the CSS section of the header.html file so we just need to wrap the contents in a <div> called “footerdown” (as we defined it in the CSS).

<div id="footerdown">
 Copyright© 2002 - 2010 <a href="http://ExampleTravel.com" style="color: #fff;">ExampleTravel.com</a>
| <a href="#" style="color: #fff;">Contact Us</a>
| <a href="#" style="color: #fff;">Privacy Policy</a>
| <a href="#" style="color: #fff;">Terms & Conditions</a>
| <a href="http://ExpediaAffiliate.com" style="color: #fff;">Travel Affiliate</a> |
 </div>
<!-- End Footer -->
</div>

Uploading your Header.html and Footer.html files


The most difficult part is done. Now that you have created the files that will define the look and feel of your affiliate pages, the next steps are:

 

  • Uploading your files to a server
  • Let our system know where your header.html and footer.html files are

Uploading your files to a server

For the purpose of this guide we’ll asume that you already have a hosting service (if not, Siteground and Hostmonster are cheap choices), in order for our system to be able to use your header and footer files, they need to be accessible from the Internet, so you’ll need to upload them to your preferred hosting provider.

If you don’t know how to upload this files, consult your hosting provider help files as they usually have online FTP (File Transfer Protocol) capabitly, otherwise you can do this with any FTP software such as Filezilla.

Setting your Header and Footer in our Affiliate Center

Once your Header.html and footer.html files are online you will need to log in to our affiliate center to let our system know where to find them when displaying your affiliate pages, you will only have to do this step once, even if you modify the files, unless you change the location of your files.

You can do this by clicking in the Integration tab inside our Affiliate Center and then clicking in the Page Upload link

integration tab

Next you need to tell our system where your header.html and footer.html files are, also don’t forget to state your domain.

 

If you follow these steps and click on the “Submit Changes” button, and after accepting our Terms and Conditions, your pages will be customized with your own look and feel.

Still Confused?

We have tried to make this guide as simple to follow as possible, but if you are still having problems and feel you need to work on your HTML or CSS skills then you can find some great online courses at http://www.htmldog.com and http://www.w3schools.com.


About Jose Truchado

SEO Expert Jose Truchado has been working on Search Engine Optimization since 1996, he is a marketing coach, social media advisor, and entreprenuer founder of several successful start-ups within the travel industry. Jose has been providing SEO and SEM support to EAN partners since July 2009. Google+ profile: Jose Truchado on Google +


Leave a comment

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

35 thoughts on “Uploading a Header and a Footer for Your Affiliate Site