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
1
|
<img src="/images/header.jpg" alt="" />
|
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.
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<div id="dolphincontainer">
<div id="dolphinnav">
<ul>
<li><a href="http://exampletravel.com ">Home</a></li>
<li><a href="http://travel.exampletravel.com/templates/310453">Hotel Search</a></li>
<li><a href="http://travel.exampletravel.com/templates/310453/itinerary">Hotel Search</a></li>
</ul>
</div>
</div>
|
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:
1
2
3
4
|
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:
5
6
7
8
9
10
11
|
#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:
12
13
14
15
16
17
18
19
|
#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:
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
#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:
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
#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
1
2
3
|
<div id="footerdown">
Copyright© 2011 <a href="#">YourSite.com</a> | <a href="#">Contact Us</a> | <a href="#">Privacy Policy</a> | <a href="#">Terms & Conditions</a></div>
|
And the CSS you can add on the header to change the style of the footer
74
75
76
77
78
79
80
81
82
83
84
|
#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.
Other Posts that may interest you
Tags:
Chameleon Integration,
Travel White Label Branding
