By Jean-BaptisteAlthough in the world of blogging, the phrase “content is king” rings true, your blog design is definitely something to consider very carefully as well. Through both Twitter and email, I have received many inquiries on how to style empty BSA slots. Styling empty slots isn’t hard to do at all, but there are a few things you should know. In this article, I’ll show you how you can use CSS to give your empty BSA ad slots the style you want.
1. Do you need to style your empty ad spots?
Before going into technical explanations on how to style your empty ad spots, there’s one question I’d like to ask : “Do you REALLY need to do it?”
Of course, giving a custom style to your empty ad spots can be great:
- It looks personal
- It can look pro (If your style is great)
- Ad spots’ colors match those of your theme
But there’s also a negative point to consider : As BSA is popular among advertisers, they easily recognize the gray “Advertise Here” square. Modifying BSA ads’ default style can, in rare cases, make the advertiser think you’re not using BuySellAds, which can lead to a loss of business for you.
2. Let’s style
So, you want to style your ad spots? No problem, let’s “dive” in the code, and make our spots fit your blog theme colors.
When loaded into your blog, BSA ad spots automatically add a CSS class to themselves. This class is called “.adhere.”
In order to modify the look and feel of your ad spots, you have to use CSS and interact on this .adhere class. If you’re blogging using WordPress, have a look at your theme directory:
wp-content/theme/yourthemename
You’ll find a file name “style.css”. This is the file where you’ll have to insert CSS codes.
If you’re using another CMS other than WordPress, you have to find the style.css file, and edit it.
A very important thing to remember, is that default ad spots’ look and feel is added using inline styling, which means that you’ll have to use the !important CSS declaration in your CSS properties, to make sure it will not be overwritten by the inline styles.
As an example, let’s change the gray background to a yellow one. Paste the following into your style.css file :
.adhere{
background:#FFFBCC !important;
border-color:#E6DB55 !important;
}
The result should look like this:
Not bad, huh?
Now, let’s give a special style to the spot on the hover state (when the mouse is over it) : To do so, you just have to add the :hover pseudo-class to .adhere, as shown in the following example :
.adhere:hover{
background:#FFFEEB !important;
}
That’s all. Once the style.css file is saved, the new look and feel will be defined to your empty ad spots.
