CSS Explanation
blogads.com adstrips use a separate CSS namespace for formatting. By default, we provide a very simple CSS for our CSS driven adstrip. However, we encourage you to customize it to your needs. This document attempts to give hints on how to control different things in our CSS driven adstrip.
So how do I control the appearance of my adstrip with CSS?
| Let's start with the customization of the adstrip - the space in which the ads will reside. The CSS class "adstrip" applies for the ads' container. This example results in a white box with black borders. |
div.adspot {
border: thin solid black;
background: #ffffff;
width: 160px;
} |
|
| Ok, the previous example was too dull, so let's see a fancy one. |
div.adspot {
border: thin dotted green;
background-image: url(fall-tile.jpg);
width: 160px;
}
|
|
| Let's go ahead with the latter one. Now that we have the container, we'll format the things in it. First, there's a link "advertise here". It is controlled by the "adspot_link" CSS class. Let's make that bold, white, and appear on green background when hovered. |
.adspot_link {
font-face: Helvetica, Arial, sans-serif;
font-size: 9pt;
font-weight: bold;
text-decoration: none;
color: #ffffff;
}
a.adspot_link:hover {
background: green;
}
|
|
| Now the ads. First, the space that contains the ads within, controlled by the "div.adspot * ul" and "div.adspot * li" CSS selectors. |
div.adspot * ul {
list-style: none;
width: 150px;
margin: 0;
padding: 0;
}
div.adspot * li {
border: thin solid black;
background-image: url(semi.gif);
text-align: center;
width: 100%;
cursor: pointer;
overflow: hidden;
display: block;
}
|
|
| Then comes the ad headline, controlled by the "adspot_adhead" CSS class. |
.adspot_adhead {
text-align: center;
font-family: Times,serif;
font-size: 11pt;
font-weight: bold;
color: #000000;
}
|
|
| Now the ad image, controlled by the "a.adspot_adurl img" CSS selector. |
a.adspot_adurl img {
border: none;
margin: auto;
display: block;
}
|
|
| And the ad text, controlled by the "adspot_adtext" CSS class. |
.adspot_adtext {
font-family: Helvetica,Arial,sans-serif;
font-size: 10pt;
color: #303030;
}
|
|
| Finally the "read more" link of the ad is controlled by the "adspot_adurl" CSS class. |
a.adspot_adurl {
font-family: Helvetica,Arial,sans-serif;
font-size: 10pt;
text-decoration: none;
font-weight: bold;
color: green;
}
a.adspot_adurl:hover {
text-decoration: underline;
}
|
|
Now that I have my CSS, what should I do with it?
There are several ways how to put your CSS to work. Let's go through the most likely cases:- If you already have a CSS file for your site, you can append the adstrip related CSS code to that file, just make sure that every page - that displays the adstrip - is using this CSS file. In this case you don't need the <link rel="stylesheet" ... > line of the supplied include code.
- If you don't have a CSS file, or you can't edit that for some reasons, you can still put the adstrip related CSS code into a file, say
myadstrip.css, and upload that somewhere on the web. Then replace the first line of the include code provided, with
<link rel="stylesheet" type="text/css" href="the_url_where_you_uploaded_the_css">.
- Yet another way to place the CSS code is so called "inline CSS". This is a less efficient way to go, since the code will be the part of every page on which the adstrip is displayed, and will increase the size of each page. But you need not hassle with a separate CSS file. So, then, replace the <link rel="stylesheet" ... > line of the supplied include code with
<style type="text/css"> <!-- put the CSS code here --> </style>
That's ok, but I have two adstrips on my page, and I want to make them look different
Every adstrip has a unique identifier, which you can find out from the include code: it is that number in the url, right before "feed.js". Now, if you write "div#adspot_uniqueIdentifier " before the css selector that differs, the selector will only format that particular adstrip.
Let's see an example: you want to change the color of the ad text to orange in adspot #123456. The relevant code will look like this (in addition to the above css examples):
div#adspot_123456 .adspot_adtext { color: orange; }