Infogami How To

Infogami tips and hacks

Changing ads background color

The infogami google ads are in an iframe element (probably to save bandwidth) This makes it hard to change the ads background color to match the rest your sites [sexy cornsilk] color scheme.

The official fix from Aaron Swartz

If you have your background as AACCFF FFFFF1, then add this bit of JS above $ads in your site template:

<script type="text/javascript"><!--
site_background_color = 'FFFFF1';
//--></script>

This works because of the below bit of JavaScript code Aaron added to the iframe source.

sbc = window.parent.site_background_color;
if (sbc == undefined) {
sbc = "E3E3E3";
}
stc = window.parent.site_text_color;
if (stc == undefined) {
stc = "000000";
}

Notice that you can redefine the text color of the google ads as well. So if you want ugly-green (99CC33) ad text go for it.

My hack using the include feature - deprecated

Using the include feature take the source of the ads iframe here and paste it into a new page modAdsExample

After tweaking the ads color settings:

  • google_color_border = "E3E3E3";
  • google_color_bg = "E3E3E3";
  • google_color_link = "0000FF";
  • google_color_url = "008000";
  • google_color_text = "000000";

include the modded ad page in your sidebar.

For the final touch hide the "internal" link in the sidebar that infogami creates for all included pages. Do this by adding the following style to your site template:

<style>
#sidebar .internal {visibility : hidden}
<style>

By hiding the "edit page link" on the sidebar you can make your site editable to everyone and most will be none the wiser that you hacked how your ads are displayed.

More on google ads

ad include example