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?

div.adspot {
   border: thin solid black;
   background: #ffffff;
   width: 160px;
}

div.adspot {
   border: thin dotted green;
   background-image: url(fall-tile.jpg);
   width: 160px;
}

.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;
}

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;
}

.adspot_adhead {
    text-align: center;
    font-family: Times,serif; 
    font-size: 11pt; 
    font-weight: bold;
    color: #000000;
}

a.adspot_adurl img {
    border: none;
    margin: auto;
    display: block;
}

.adspot_adtext {
    font-family: Helvetica,Arial,sans-serif; 
    font-size: 10pt; 
    color: #303030; 
}

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?

• 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; }

I want to know everything about CSS! Where should I go?

Yes, this is fine, but...