On March 6, 2012 In User interface with , tags

Styling Influads with CSS

By this time we all noticed, that we switched from google adsense to influads. We are not saying google ads aren’t good, but they were not working for us for now.

Styling Influads with CSS - 1 image

What we had the problem with influads during the early days was it comes center aligned. Even though we can grab unstyled snippet, it took some lot of time to make it look perfect.

So, We thought to share this simple css code to style Influads.Before going deep we need to start with baby steps

Styling Influads with CSS - 2 image

At first we need to grab a Influads code without css. Start the process by Selecting ad setup then select for websites

Styling Influads with CSS - 3 image

After that select your domain name, select orientation (in our case 130×100), select without css style and finally click get the code. Then grab the code from textarea and paste into our html page any place where we want

Then simply add following CSS in our stylesheet. In this case we are fixing the influads layout to 300px

.influads_block{
	width:300px;
	clear:both;
}
.influads_link_img{
	display:inline-block;
	width:130px;
	max-width:100%;
	float:left;
	padding:0 10px 0 0;
}
.influads_text{
	padding-bottom:5px;
}
.influads_text,
.influads_powered_div{
	float:left;
	width:150px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:1.5em;
}
.influads_text_a,
.influads_powered_link{
	text-decoration:none;
}
.influads_text_a{
	color:#767676;
}
.influads_powered_link{
	font-size:10px;
	color:#aaa;
}
  • .influads_block – Total wrapper for the add
  • .influads_link_img – Add banner
  • .influads_text – Descriptive text for the banner
  • .influads_text_a – Link for Descriptive text for the banner
  • .influads_powered_div – Powered by text
  • .influads_powered_link – Powered by link

Those are the classes which were automatically generated from the snippet. Feel free to play with the CSS code, we are done with the influads

Styling Influads with css

Whats your choice the Before one(default Influads ads with css) or the after one(Custom Influads)

One response to “Styling Influads with CSS”

  1. gridassault says:

    we had your same problem! this is a good explanation and i think that influads should add it to their documentation. cheers

Leave a Reply

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