White Label

From Adzerk Knowledge Base

Jump to: navigation, search

With the White Label app from Adzerk, you can customize the look and feel of your own version of adOS. This gives your version of adOS a branding feel that is unique to you. Your users will see your individual logo and custom layout, images, and text styles. Create a user environment that says "you" by using White Label.


Contents

Installing the White Label App

To install the White Label app:

  1. Click the Marketplace tab.

    White Label 01.png

  2. Scroll down the list of apps until you see White Label, then click Apply.
  3. In the pop-up box that appears, read the Terms and Conditions , then click Accept Terms and Install to finish. Note that the Terms and Conditions contain basic app information plus pricing and billing information.

    White Label 04.JPG

Setting up CNAMEs (Custom URLs) for Your Account

By default your Adzerk account will use the following URLs:

  • Ad requests: engine.adzerk.net
  • Creative/image hosting: static.adzerk.net
  • Account login: http://youraccountname.adzerk.net

With the White Label app, however, you can use your own URLs for ad serving and accessing your adOS user interface.

To set up these custom URLs (or CNAMEs), use the following procedure (or have your domain administrator configure this for you):

  1. If a CNAME record for a URL prefix already exists, then delete it. For example, if you're creating a CNAME record for engine, delete any existing CNAME records for engine.
  2. Create your new CNAME record by entering the following Host Name/Alias and Value/Destinations:
Host Name/Alias Value/Destination
engine engine.adzerk.net
static static.adzerk.net
manage youraccountname.adzerk.net
Important:Keep in mind it can take up to 24 hours for this information to propagate.
  1. Contact support@adzerk.com once you've made these changes because Adzerk will need to enable the new CNAMEs on your account for them to work.
  2. Once your CNAME is complete, make sure you update your ad code to reflect the new domains. Otherwise, your viewers will still see ads served by engine.adzerk.net and not your domain.

Skinning/Customization

Once you've installed the White Label app from the market place you'll be able to update your account's CSS file, JavaScript, and Footer HTML file. You'll need to understand CSS, HTML, and JavaScript if you choose to make changes that way. You can download an example theme to get started with here. Also, you will need a tool to inspect the page elements in your browser. Three common choices are:

  • Firefox - Use the Firebug plugin.
  • Chrome - Use inspect element.
  • Safari - Use inspect element. (This is not on by default, but can be set up that way. For more information, see this web page.)

CSS

To change the styling of the adOS app, you can start by creating a standard CSS file, and then adding styles for particular elements. Inspect the elements of the page to figure out what styles to change. We recommend that you change only the background colors, because we might make a change that might break the look of the site.

Here are a few suggestions:

To change the header color:

#headerWrapper {
background-color: #YourDesiredColor; background-image: none;
}



To change the tabs color:

.navtabsWrapper {
background-color: #YourDesiredColor; background-image: none;
}



To swap out the logo:

Hide the Adzerk logo with CSS and then use JavaScript to display a copy of your own logo.

To hide the existing logo with CSS:

#networkname h1 a img, #networkname h1 a, #networkname h1 a:hover {
opacity:0; display:none;
}

JavaScript

You can change words, swap out elements, or manipulate the application interface in a variety of ways with JavaScript. To add Javascript, create a .js file, and place any functionality that you'd like to use inside of it.

To swap out your logo in the adOS theme, make sure you have a web accessible logo, otherwise no logo will appear, and then use the following JavaScript.

$(document).ready(function() {
$('#networkname h1').append('<img id="logo" src=" your logo url here "/>');
}); 

You can also change your favicon by adding the line of JavaScript below. Make sure to replace URL_TO_FAVICON with a link to your favicon file. (For more information on favicons, see Favicon.)

$('#favicon').attr("href","URL_TO_FAVICON");

Footer

To modify the footer HTML file you'll simply need to write the HTML code that you would like to appear in the footer. The footer is added to the page via an iFrame, so you will need to include any styling you would like it to have in the .html file. For example, here is a basic footer that adds a simple copyright statement to the bottom of the page:

<head> 
<style type="text/css">
body { color: #000000; font-family: Tahoma,Arial,Helvetica,sans-serif; font-size: 11px; } 
span {width:100%; display:block; text-align:center;}
</style>
</head> 
<body> 
<span>Copyright © 2012, My Company Name Inc.</span> 
</body>
</html>

Uploading Customization Files

Once you have your files ready, you will need to upload them to your account. Follow the steps below to upload them.

  1. In the top right corner of your Adzerk domain, click Settings then Themes.

    White Label 05.JPG



  2. Select Choose File for the type of file you want to upload: CSS, Javascript, or Footer HTML.

    White Label 06.JPG

  3. Click Save.

Deleting the CSS, JavaScript file, or Footer

Tired of your theme? You can delete it!

Use one of the following methods to delete your theme:

  • CSS: Upload a blank .css file that has only a single comment in it. Example: /** example **/
  • JavaScript: Upload a blank .js file that has a js comment in it. Example: // comment example.
  • Footer: Upload a blank .html file with an HTML comment in it. Example: <!-- example -->