How to Create and Upload your Header and Footer in Chameleon 33


Our groundbreaking new white label platform “Chameleon” is here and you can start using it today. We have made the process of customizing your private label site much easier and intuitive, with an affiliate facing control panel enabling you to customize the colors and appearance of your site with a few clicks.

Although Chameleon is a more robust platform that provides numerous tools to create your own travel brand, the header and footer upload process still requires some work on your side to function properly. We are working to improve this to make it even simpler, but for the time being you will have to follow a similar process to our previous private label platform explained in this post) as well as have a hosting service to store your header initially.

How are headers different with Chameleon?

The key header difference between our previous platform and Chameleon is that our old platform retrieved your header file from your server every time someone visited your site, whereas, Chameleon takes the header hosted on your server and incorporates it to your affiliate template by stripping out any JavaScript and CSS that may interfere with the correct functioning of the affiliate pages. This will allow your branding to remain consistent throughout the entire purchase experience, even during the secure check-out path, which was not possible on our old platform.

Let’s get started

When creating your header, make sure that you don’t include any Javascript. If you do, Chameleon will strip it out completely and therefore, might not display as expected.

First, create a version of your header with a width of 960px – our template only admits that size at the moment. In this article we are going to show you how to create a header that has a 960px wide banner and a menu underneath, just like the one used in this sample white label site.

Don’t break the header banner into smaller images as it may not display correctly when uploaded to control panel.

First steps into creating the Header HTML file

There are actually two options with Chameleon, you can simply use just a 960px image as your header or you can use an HTML file that contains an image and possibly a menu underneath. For this tutorial we are going to choose the second option.

First we are going to create the basic structure of the file assuming that you have your image banner inside a folder called “images”:

Open a text editor, such as Notepad in Widows or TextEdit in Mac, and copy the following code which will call your image banner from the “images” folder

Then we are going to create a layer that will contain our menu and a layer that will wrap the contents of the menu. We’ll change the styles of these layers afterwards so that you can change the look and behavior of the menu.


This is how our header looks like so far:

It’s not quite ready yet, so now we need to apply some styles to the menu so it integrates seamlessly with the header.

Styling you header

Because of potential issues with the secure pages, some CSS classes won’t be imported to your Chameleon header, so we recommend that you stick to basic styling. Even with these restrictions you can achieve very professional results that will easily integrate with your branding.

First we are going to change the color of the background of the page:

body
{
background:#024f7b ;
}

Then we are going to add a class to modify the style of the menu container defining a dark shade of blue background and we are also going to set the dimensions of the layer:

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

Not much visual improvement yet, but we are close to finishing it:

The next step is to create styles for the menu itself:

#dolphinnav{
	height:33px;
	font-size:12px;
	text-transform:uppercase;
	font-weight:bold;
	background:#4493be;
	padding:0 0 0 20px;
	}

And the elements within the menu:

#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;
	}

This will result in a version of the menu that is pretty close to the final result that we want to achieve. Now we only need to add a mouse over behavior to animate it a bit, and in order to do that we just need to add a few more classes to our CSS:

#dolphinnav ul li a:hover{
	color:#fff;
	background:#30617f;
	}

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

#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{
	color:#fff;
	background:#1D6893;
	line-height:275%;
	}

#dolphinnav ul li a.current span{
	display:block;
	padding:0 20px 0 0;
	width:auto;
	background:#1D6893;
	height:33px;
	}

This causes our menu items to change color when the user hovers the mouse over them, as it’s shown in the following image:

With this we have finished creating our header, while this is just a basic example, the menu can be enhanced and modify using CSS such as including image backgrounds for the menu elements.

Footer

Creating your Chameleon footer is even easier than your header; just remember to include any footer CSS styles in the CSS portion of the header.

This is an example of a basic footer with some miscellaneous links:

HTML


And the CSS you can add on the header to change the style of the footer

#footerdown {
 width: 960px;
 clear: both;
 font-family:Helvetica,Arial,Verdana,sans-serif;
 font-size: 12px;
 color: #ffffff;
 border: 1px solid #ccc;
 background: #4493be;
 margin: 20px 0px 10px 0px;
 padding: 10px;
}

This will generate a footer that looks like this

Host your header and your Footer

At the moment you can’t upload your header or footer directly to our servers, you will need to host it either on your own server or using a hosting service (i.e: Siteground andHostmonster ) Once uploaded and hosted on the web, you will input the header URL pathlinto the Chameleon Control Panel, ensuring that it displays on your template pages.

Modifying your header or Footer

Remember that when submitting your header or footer to Chameleon through the control panel, Chameleon will extract them and will embed them into your affiliate site, this means that if you want to change the header or your footer you will need to change the hosted file in your server and repeat the process of submitting them to Chameleon through the control panel.

Please clean your browser’s cookies and allow a couple of minutes to see the changes live on your site.


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>

33 thoughts on “How to Create and Upload your Header and Footer in Chameleon

    • Jose Truchado Post author

      Hi;

      I see both links with the same header, can you send us a screen capture of the differences?

      To change the white background you need to go to you Chameleon Control Panel in the affiliate center and go to these options:

      Control Panel> Design > Template Design > Customize Theme

      Then in the Elements box select the option Page> Content background

  • Chris

    When I copy as instructed, changing the links and image to my own, I get error messages on the affiliate control panel and I see the CSS as my header. What am I doing wrong? I just don’t get this.

  • Enrico Alessi

    CID 357863

    Thanks Jose.

    I posted other two issues in other two blogs:

    1/ hotel search doesn’t work => zero results
    2/ hotel page can not be configured with custom images (size error) and I’m not able to find the hotels in search box.

    Regards
    Enrico

    • Jose Truchado Post author

      Hi Enrico;

      You had activated certain hotel filters that prevented your site to displaying any hotels both in the homepage and as search results, that’s why you were getting those errors.

      We have removed the filters and your site works fine.

  • Anders

    Hi Jose.

    First let me thnak you for an excellent article.

    I am having an issue whit my site http://www.fyndcentralen.se, it seams that the searchbox dosn´t work and nothing happens when you push the searchbutton. Also the links for the popular destinations dosn´t work.
    Have I done something wrong setting up the site? Do you know what I need to do to correct the errors?

    Thansk in advance.

  • Mat B

    Hi,

    I recently signed up to the API and the white label (i’m combining both for SEO purposes) and i’ve tried uploading my header:

    http://www.hotelsin-paris.co.uk/roots/9/integrations/expedia_ean/ean_header.html

    However, the CSS seems to have vanished when I try to view it. I’ve tried all sorts, but with no luck. I left it overnight before checking, so it’s had more than the 5 minutes it suggests it could take to refresh.

    I wondered if naming the ID on my containing div to be “ean_header” was causing the system to strip it out, if “ean_” is reserved. I have just changed it to be “site_header” and still no joy.

    You can see the site i’m trying to view here:
    http://www.travelnow.com/templates/362063

    Please advise, as i’ve been going out my mind trying to get it to take my CSS.

    Thanks

    Mat

    P.S –
    I’ve designed it to be a fluid width and to fit within the smaller “package” pages, as suggested here:
    https://www.ian.com/affiliatecenter/IAN/customHeaderGuide.html

    Since that guide looks really old in comparison to this one, can I assume that the package pages within Chameleon are NOT smaller? If possible i’d like to be able to have larger size fonts on my second line of nav, which isn’t possible with the smaller package page width.

    Thanks

    Mat

  • mat B

    Hi,

    I had several issues getting my HTML/CSS based header uploaded. The HTML would upload, but when the system validates and copies the CSS to an external sheet, it breaks. After much trial and error, I found this was the problem:

    the system does not like it when you name your CSS selectors with an underscore “_” in the name. I took these out and most of my styles were fine.

    HOWEVER, the validator moans because my CSS uses a little absolute positioning. I realise why you might advise people to avoid this because they could end up covering up some site elements, but I didn’t see anywhere that said strictly not to use it, and my use of it is perfectly valid – the container is set to position: relative, so it’s only absolutely positioned in relation to that, it’s parent. This allowed me to have a fluid design with rounded caps, using a sprite sheet, but without it, I simply cannot do what I want – so i’ll have to resort to a fixed width design, where I don’t need to position the end caps. The validator did not complain of this until I removed the underscores in the class names.

    Please update the guide as i’m sure many others will struggle to find the answer to this problem.

    Thanks

    Mat

    • Jose Truchado Post author

      Hi Mat, thank you for your observations. Sorry for the extra work you had to go through, it’s always very valuable when our users give us this kind of input and we’ll make sure that we take into consideration when updating the product.

      Meanwhile we’ll update the guide accordingly.

      Thanks again

  • Franck

    American affiliating programs are so complicated while European one offer easy ways to upload headers. ie. by simply creating a .jpg file and uploading it to the affiliate account. No need to have a hosting server..; you just use your affiliate account and the rest is automatically handled by the company you are affiliated with ! So easy !

  • Enrico Alessi

    I tried with the simple image and it did not work. Then I tried with a page hosted in another server. It worked partially. I faced another issue: the bar disappeared.
    So the problem is still there.

    My previous post (point2) is still unsolved:

    — I’m not able to customize the Display Today’s Top Deals slots in Chameleon.
    For e.g., If I select Catania, Etna, Italy on the right search box, no images are showed.

    For your reference; http://www.travelnow.com/templates/357863/

    Things are easy when they work!

    Thanks for your support.

    Regards

    Enrico

  • Anders

    Hi Jose.

    Thanks for this guide. I tried to follow it to the best of my abbilities, but there seames to be something wrong.
    Could you take a look at this site and let me know what it is that I need to do to get the menus to display right?

    Thanks in advance.

    //Anders

  • Mani

    Hi,

    I have uploaded the vacation.html to my test site (www.esalesbooster.com.sg)

    the Test url as follows,

    http://www.esalesbooster.com.sg/worldvision/vacation.html

    Configured the Domain, Header and footer as follows

    esalesbooster.com.sg – Domain Name

    “/header.html’- Header file name under default location
    /footer.html – Footer File name under default location

    when I click search button, the search results page still have agentRez header and footer only.

    Tried many ways to fix this…., nothing works still. kindly help.

    You may reply to mani@dss.com.sg, if you need CID.

    Thanks.

  • Predrag

    Dear Sir or Madam,

    I am a new member with you. I have a finished website in joomla 1.7 and I do not know how to adjust it to be functional with you. My CID is 377 601

    Best regards

  • Intasar Khan

    Ok, I found the very critical Bug in this program, that maybe become a big reason to lost publisher earning who join chamelon white-lanbel.

    The fact is. if you by default open your CNAM for example: hotels.yourdomain.com so its by default open Expedianetwork template. and peoples register hotels through expedia default CID. not the publisher CID.

    So, whitelabel program only work if you open it with your link that are not remember able to any human easily. for example “hotels.yourdomain.com/templates/Your CID”. except simpple “hotels.yourdomain.com” that basically load template with there CID.

    So conclusion is, the name masking itself have a Bug, because by default it loads there default template with there own CID.

    means, if i open my CNAM to write, hotels.mydomain.com , so its open there default template with there CID, which not make sense to me.

    For live example you can see my site: http://hotels.compareandsaving.com

    The CID which load is not mine CID, its expedia CID, so normally visitors remember simple names like mine have, hotels.compareandsaving.com, and mostly users write in Google like “compareandsaving hotels” so by default the benefit gone to expedia not to me. if my visitor purchase any hotel through “hotels.compareandsaving.com” so that deal not counted as mine deal because it does not purchased on my CID.

    and after too many emails to Expedia support according this issue, there less and dead support totally miss-understand the fact, they replied me twice with 1 answer that said, I did not understand CNAM, even if you guys see so you will better understand what i try to say.

    Thanks

  • David

    Hi Jose,

    Thanks for the great help with the header/footer!

    I’ve set it all up but according to Analytics around 10% of my users get to a /ums_step1 screen then leave. By process of elimination it looks like that they must get to a 404 type screen when clicking “book”. Obviously this is killing my conversions.

    Any help would be most appreciated :)

    cheers
    Dave

  • John

    Hi Jose, I have uploaded the up.htm and the down.htm. There are differences between these two sites and can not find the problem. I need your help. thanks.

    Reservatios and

    TravelNow

    I tested with various styles but styles are not attached or not taken into account. What happens? thanks