azurecurve

I’ve been hosting adverts from Google Adsense for a while and, after my last site redesign, I started using responsive adverts which scale according to the size of the browser window (or device size).

Since then, I’ve had yellow background showing either side of the adverts:

The other day, I finally had time to track down and fix the issue. The html code for the adverts, which is supplied by Google, places the adverts within an ins tag and a class of adsbygoogle (see two highlighted sections):

...<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
				<!-- azurecurve Responsive Leaderboard -->>
				<ins class="adsbygoogle"
					 style="display:block"
					 data-ad-client="{adsense publisher id}"
					 data-ad-slot="5299901990"
					 data-ad-format="auto"></ins>
				<script>
				(adsbygoogle = window.adsbygoogle || []).push({});
				</script>...

The yellow background is the default colour used by WordPress for ins tags; so to remove it, all you need is a snippet of css in your stylesheet:

ins.adsbygoogle {
	background: transparent;
}

With the css saved, the yellow background disappears:

PrintFriendly Email Linkedin Twitter Facebook

As well as a strong interest in Dynamics GP, I tend to have an interest in most things computer related. As such I have a few years experience with HTML+CSS and have created a few sites in the past, in addition to this blog on which I have done some customisations and enhancements of the code and theme.

I do find some of CSS a bit of a hassle when it comes to changing common elements such as colour so I was interested when I heard about the concept of SASS or Syntactically Awesome Style Sheets (I’ll admit to being happier with the acronym than the full name).

Packt Publishing, who are publishing my Microsoft Dynamics GP 2013 Cookbook, have published a SASS CSS How-to book by Alex Libby. This book takes a look at how to write more efficient CSS using the SASS CSS library through practical hands-on recipes;