Application Support:Customize CSS
From HasOffers
Contents |
Customize CSS
Company tab > Customize Application > Design: Customize CSS
For more advanced theme customization, you can input custom CSS script. Custom CSS will overwrite colors, fonts, and the position of layout elements. To remove custom CSS, simply remove all CSS in the CSS Script text box.
How to Customize HasOffers with CSS - Tutorial
We really pride ourselves on the flexibility of HasOffers. We have to be flexible. You would be amazed at how many completely different business models we support. As a senior designer at HasOffers, obviously the customization I’m going to be most excited about is the look and feel. Of course, at the Dedicated Solutions level, clients get access to the source code and can completely rewrite anything they want, but today I want to point out how creative you can get by just using CSS on the Enterprise and lower levels.
You probably already know that you can quickly edit your theme and colors by selecting a theme and applying the easy to use color selector tool in the Customize Application section of the app. If you find a theme you like, just click “Save Changes” and you’re ready to go, but if you want to take it to the next level, custom CSS will overwrite colors, fonts, and the position of layout elements. In this post I want to focus on doing exactly that. Below you will learn how to use Custom CSS and Javascript to completely change the appearance of your network, limiting you only by your own creativity.
The Basics of CSS
In this post I’m going to assume that you have a very basic knowledge of CSS and how to apply it. If you’re not sure how to change anchor colors, or you think CSS stands for Counter Strike Source, then you’ll want to stop reading and head over here for some basic instruction from Google before we begin. I highly recommend using Firebug with Firefox and familiarizing yourself with the Inspect feature of that addon; it’s extremely useful for figuring out how base CSS and theme CSS are applied to your network and which elements to target to modify CSS.
From Start to Finish, Skinning Offermobi’s Network
A few weeks ago Offermobi became a new customer of HasOffers and we decided to whip up a custom interface design for them. They graciously agreed to let us blog about it as a case study so all of you could learn how to do it yourself. So I’ll be taking you through the process of customizing the look of their network (what I refer to as “skinning”) from start to finish.
The first step is to make sure the theme you want to work with is selected and all of your footer links are in place. We’ll be using Theme #5, if you use another theme some of these steps will be slightly different.
Ideally, your HasOffers network should match the branding of your company website. Offermobi has a great style for their site, www.OfferMobi.com. We’ll be pulling a lot of resources from their site to make their network resemble their website as closely as possible. Offermobi has Facebook and Twitter buttons in the header of their site. To have the header of their network match their site we’ll be adding these via the DOM with Javascript.
Using Custom Javascript to Add HTML Elements to Your Network
Most of you won’t require custom HTML elements for your networks, so we’ll briefly go over how to add these and then move on to the CSS. Navigate to Company > Customize Application, then click on “Footer Links” in the Content section.
Below Footer Links is a section to add Custom Javascript to the bottom of each page. This is primarily used to add analytics to your network, but can also be useful for a myriad of other things.
You will need to encompass any Javascript you enter with a script tag.
<script type="text/javascript">
Next we’ll add in an event listener to make sure to page is ready.
//create onDomReady Event
window.onDomReady = DomReady;
//Setup the event
function DomReady(fn) {
//W3C
if(document.addEventListener) {
document.addEventListener("DOMContentLoaded", fn, false);
}
//IE
else {
document.onreadystatechange = function(){readyState(fn)}
}
}
//IE execute function
function readyState(fn) {
//dom is ready for interaction
if(document.readyState == "interactive") {
fn();
}
}
After that we’ll create a function to add in our Twitter and Facebook anchor tags:
//execute as soon as DOM is loaded
window.onDomReady(onReady); // < This is the event we created above
//do on ready
function onReady() {
// Add Facebook link
var fblink = document.createElement('a');
fblink.setAttribute('href', 'http://www.facebook.com/Offermobi');
fblink.setAttribute('id', 'fb-link');
fblink.innerHTML = "Become a fan";
document.getElementById('header').appendChild(fblink);
// Add Twitter link
var twlink = document.createElement('a');
twlink.setAttribute('href', 'http://www.twitter.com/offermobi');
twlink.setAttribute('id', 'tw-link');
twlink.innerHTML = "Become a fan";
document.getElementById('header').appendChild(twlink);
}
Remember to close your script tag.
</script>
Lets break down the “Add Facebook link” section for those of you who are not familiar with Javascript:
var fblink = document.createElement('a');
First we’re creating a variable “fblink” and defining it as an anchor (‘a’) element.
fblink.setAttribute('href', 'http://www.facebook.com/Offermobi');
Next we set the ‘href’ attribute of our anchor to Offermobi’s Facebook page.
fblink.setAttribute('id', 'fb-link');
We need some way to style the link with CSS, so here we’ve set the ID of the anchor to ‘fb-link’. This will allow us to specifically target the link in CSS with #fb-link.
fblink.innerHTML = "Become a fan";
Add some text inside of the link.
document.getElementById('header').appendChild(fblink);
Finally, add the fblink element we just created to the #header using appendChild.<p/> <p>Click “Save” and then check the results. It should look something like this:
Of course, we don’t want the links there, we need them next to our logout/search area. So lets add some quick CSS to get it positioned correctly before we move on. Navigate to Company > Customize Application, then click on “Customize CSS”. Remember the Id’s we assigned to our links? #fb-link for our Facebook button and #tw-link for Twitter. <p/><p> First we need to grab the url for image Offermobi uses for their links. We’ll apply this sprite to the ‘background’ of our links. Then align our links to the right side of the header with ‘float:left’, add some margins and padding to separate them from the other elements, and add a quick 1 pixel red border so we can see what we’re working with. Here’s the code for that:
#fb-link, #tw-link {
background:transparent url(http://www.offermobi.com/templates/css/frontend/images/social_set.png) top left no-repeat;
color:#fff;
margin:20px 5px 5px 5px;
padding:5px 0 5px 27px;
float:right;
border:1px solid red;
}
CSS Sprites are a great way to decrease load times for your site. Offermobi uses a single sprite image for their Facebook & Twitter buttons. Lets position the sprite correctly for our two links before moving forward.
#fb-link {
background-position:0 5px;
}
#tw-link {
background-position:0 -21px;
}
Offermobi’s background to the network.</p>
#everything {
background: url(http://www.offermobi.com/templates/css/frontend/images/body_bg.jpg</p><br/>) repeat scroll center top transparent;
padding:0;
}
#header, #main {
background:transparent;
}
As well as changing out the logo for theirs (Company > Customize Application, click “Company Logo”). Here’s a look at those changes:
Customizing the Navigation
Alright, lets change gears and tackle the navigation. Offermobi uses Cufon for their nav, which is a way of displaying custom fonts on web pages, see Cufon & sIFR for more info. We’re going to achieve the same effect with just CSS.
First we need to strip the network nav of the default CSS. Did you remember to get Firebug? Good, inspect the navigation. You’ll see that the ID for the navigation is “nav-col” and that its being given a repeating background via CSS. Lets remove that by setting our background color to transparent and our background-image to none.
#nav-col {
background:transparent none;
}
Next, inspect one of the nav links. We need to remove the separator image, increase the font-size, capitalize our links, and change their color. We’ll add a small amount of letter spacing too.
#nav > ul li a {
background:none transparent;
font-size:16px;
text-transform:uppercase;
color:#068FCC;
letter-spacing:0.05em;
}
Our font size is a little too big, so drop it down to 14px. Here we’ll apply a text-shadow of 0px -1px which gives us a 1 pixel shadow above our text, we’ll set that shadow’s color to #eee, then add a 1 pixel shadow below the text and assign it a color of #555. Finally adjust the margins and padding to position the links closer together.
#nav > ul li a {
background:none transparent;
font-size:14px;
text-transform:uppercase;
color:#068FCC;
letter-spacing:0.05em;
margin:0 0 0 0;
padding:0 15px;
text-shadow:0px -1px #eee, 0px 1px #555;
}
We need the navigation to be positioned directly to the right of the logo. This is a little tricky since the logo and navigation are in separate container divs (#header and #main respectively). To start lets bump the nav over with a left margin.
#nav ul.first {
margin-left:280px;
}
Then we’ll apply a negative bottom margin to the logo which will pull our navigation up.
#header #logo img {
margin-bottom:-36px;
}
We’re getting there; next we’ll remove the background from the hover state of our menu link and drop down links. Change the color of the drop down. As well as update the drop down links with a simpler text style.
#nav > ul li:hover > a, #nav > ul li ul li:hover a {
background:none transparent;
color:#ff8611;
}
#nav-col ul li ul {
background:#f5f5f5;
}
#nav-col li ul li a {
font-size:12px;
letter-spacing:0;
text-transform:none;
color:#068FCC;
margin:0;
padding:2px 2px 2px 20px;
text-shadow:1px 1px #ccc;
width:200px;
border-bottom:1px solid #e3e3e3 !important;
}
The bottom link of the drop down nav has that 1 pixel border we added to separate the links. We can remove this utilizing the :last-child css selector. At the same time, we’ll apply a background color and corner radius to the drop down’s parent link.
#nav-col li ul li:last-child a {
border-bottom:none !important;
}
#nav > ul li:hover > a {
background:#f5f5f5;
-moz-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}
We know that the “Snapshot” link doesn’t have a drop down menu, so it will look weird with only the top corners rounded. We can fix this again utilizing the :first-child css selector. At the same time we’ll modify the border radius of the drop down menu.
#nav > ul li:first-child:hover > a {
-moz-border-radius:5px;
border-radius:5px;
}
#nav > ul > li > ul {
-moz-border-radius:0 9px 9px 9px;
border-radius:0 9px 9px 9px;
}
Buttons
We’ll take a second to tackle the buttons and clean up our header links. Offermobi has really nice buttons on their site. They use full images overlayed with links, we’ll be achieving similar results with CSS:
#main input[type="submit"], #main input[type="button"] {
background:#fff; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee'); /* for IE */
background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee)); /* for webkit browsers */
background:-moz-linear-gradient(top, #fff, #eee); /* for firefox 3.6+ */
-moz-border-radius:15px;
border-radius:15px;
color:#068FCC;
border-top:1px solid #e3e3e3;
border-left:1px solid #e3e3e3;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
padding:3px 12px;
text-shadow:1px 1px #ccc;
}
Next, remove the red border we put around our Facebook & Twitter links and update the user status and search area. We’ll also swap out the default breadcrumb image for something darker, the list image Offermobi uses is perfect for that.
#auth-status {
float:right;
margin:20px 10px 0 0;
padding:5px 0 5px 20px;
width:auto;
font-size:12px;
}
#header #search .av-submit {
background:url(http://media.go2app.org/assets/images/search-icon.png) no-repeat left top #ccc;
border:1px solid #ccc;
border-left:none;
padding:3px 5px;
}
#search {
margin:22px 30px 0 0;
}
#breadcrumbs li a {
background:url(http://www.offermobi.com/templates/css/frontend/images/small_arrow.png) no-repeat right center;
}
</pre>
Adding Your Logo to the Footer
I’ve created an all white version of Offermobi’s logo to place in the footer. We’ll add this to the background of the ‘p’ tag which houses the footer links and update the height of the footer itself.
#footer {
height:100px;
background-color:#2d2d2d;
}
#footer p {
font-size:13px;
margin:0 20px;
padding:40px 20px 0;
text-align:left;
color:#adadad;
background: url(http://www.hasoffers.com/2011/images/uploads/brands/OfferMobi-Footer-Logo.png) no-repeat right 20px transparent;
width:auto;
height:60px;
}
#footer p a {
color:#adadad;
}
A Facelift for Your Login Page
The
<p>default login page is functionally solid but lacking visually. A visitor who clicks through to your network from your homepage should have no question as to where they are. To make the transition as seamless as possible we’ll be borrowing some imagery from Offermobi’s homepage and applying it to the login page.
First we’ll remove the “Login to Networkname” from the login form, its redundant.
#login-form .head {
display:none;
}
#login {
margin-top:0;
}
Next we’ll style the Affiliate and Advertiser signup links to look like CTA buttons. We’ll recycle the code we’ve used for the Submit buttons.
#login-promo h2 {
background: background:#fff; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee'); /* for IE */
background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee)); /* for webkit browsers */
background:-moz-linear-gradient(top, #fff, #eee); /* for firefox 3.6+ */
-moz-border-radius:15px;
border-radius:15px;
color:#fff;
border-top:1px solid #e3e3e3;
border-left:1px solid #e3e3e3;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
padding:3px 12px;
text-shadow:none;
text-align:center;
}
Finally, we’ll take that nice big
iPhone feature image Offermobi has and use it on the login page. We’ll apply it to the background of the login container, and expand the container so it shows the image correctly.</p>
#login {
background: url(http://www.offermobi.com/templates/css/frontend/images/home_bg.jpg</p><br/>) no-repeat right bottom transparent;
border-bottom: 2px ridge #eee;
float: left;
height: 450px;
margin-top: 1em;
width: 99%;
}
We’ll add in some code to make our login button links change colors on hover. This will also affect all other anchor links for the network.
a, a:link, a:visited, a:active, a:hover {
color:#068FCC;
text-decoration:none;
}
a:hover {
color:#ff8611;
}
Full Size Screenshot
[File:
Taking it Further with Google Web Fonts
At this point we could call it a day; the look and feel of the network matches that of Offermobi’s site, but we can do better. Lets utilize Google Web Fonts to add a unique look to the network. The Google Font API helps you add web fonts to any web page. We’ll use Droid Sans for body text, and Terminal Dosis Light for headlines. Click on “Use this font” for whichever font you decide to use. Grab the two javascript links provided and add then to the network’s Custom Javascript below our Twitter & Facebook code.
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis+Light' rel='stylesheet' type='text/css'>
Next apply these fonts to the body and headline tags with CSS:
body {
font-family:'Droid Sans','Verdana',sans-serif;
font-size:12.5px;
}
h1, .form .head h3, h2 {
font-family: 'Terminal Dosis Light', ‘Verdana’, serif;
}
Finally, lets update the favicon (Company > Customize Application, click “Custom Favicon”) and modify the forms slightly.
.form {
background-color:#fff;
border-color:#eee;
}
.form > .body > p {
padding-left:20px;
}
We’ll end here, but feel free to continue to modify your own network. Remember that almost anything and everything in your network is customizable with CSS. If you run into problems or have any questions, feel free to contact me or get in touch with one of our Support Specialists.
Support Questions
Email this page to a friend or co-worker
