Customising the Ad Manager

Changing the look of ads:

Basic changes – such as ad size and number – can be made in the “Ad zones” section of the admin area. Furthermore, if you want to display the same ad zone slightly differently, you can use custom parameters to tweak it.

However, sometimes you might wish to make more advanced changes…

1.) Styling ads using css

OIO’s images/style/output.css file contains the css used to position an ad zone. Banner ads, text ads and inline ads are all controlled by different sections of this css file (view example).

Each ad zone also has a unique css ID, allowing you to style individual ad zones without affecting others:

#oio-{adtype}-{adzone}

eg. banner ad zone 1 would have a css ID of #oio-banner-1

2.) Creating “google ads” with OIO (an example)

Click here for an example of how to use a text ad zone to create “google adsense” style ads.

3.) Creating a ‘hacks.php’ file

Making changes to core files is not advised unless absolutely necessary, as it makes upgrading a lot less easy. If you wish to change the core php code used to display ads (in OIO’s include/output.php file), one option is to over-ride it using a ‘hacks’ file. It will be used in place of the orginal output code.

Create a new blank file in the OIO’s main folder, called “hacks.php”. Copy and paste the code from the output.php file into it, and save. You can then make the changes you need without modifying the original code.

Last updated: 5th March, 2009

WordPress Theme Integration:

Starting with v2.2, you can integrate OIO with your current WordPress theme with a single click by following the steps below:

1.) Login to your WordPress admin area and navigate to OIOpublisher -> Settings -> Themes

2.) Select “wordpress” from the theme selection dropdown menu. Done!

Not looking quite right?

Sometimes a WordPress theme may look out of sync when used to theme OIO pages (eg. sidebar missing or in the wrong place). To rectify this problem, try following the steps below:

1.) Login to your WordPress admin area and navigate to OIOpublisher -> Settings -> Themes

2.) Click on the “main.tpl” link in the Theme Editing section of the page and delete all the content from the textbox on the right hand side.

3.) In a separate browser tab / window, navigate to the WordPress theme editor (which will be called something such as Appearence -> Editor in the WordPress admin menu).

4.) From the WordPress theme editor, select either the “page” or “index” template from the list on the right. Copy and paste the contents of that template (which will appear in a textbox on the left hand side) into the “main.tpl” textbox you opened in step #2, then save your changes.

5.) Now download the attachment below (called content.txt) and open the file. Copy and paste all the code from that file into the “main.tpl” textbox from step #2. The place to paste it is just above the line of code which contains have_posts().

If you are unsure where to paste the code mentioned in step #5, download the attachment below (called example.txt) and open the file. It is an example template from the default WordPress theme, and highlights where the OIO content code should be placed.

Still not looking right?

If you can’t complete the steps above to your liking, you’ll need to revert back to the “default” OIO theme. This also means reverting the “main.tpl” textbox back to it’s original state.

The attachment below (called main.txt) contains the default template code. Simply delete everything from the “main.tpl” textbox, then copy and paste all the code from the main.txt file into that textbox and save your changes.

Last updated: 3rd December, 2009

Creating “google ads” with OIO (an example):

In this example, we’ll be looking at creating a “google adsense” style ad, using a text ad zone and some basic css. The ad created in this example will be a “skyscraper” (120×600).

Please note that the aim is to show you how to make the ad zone look different, not to make it look like google adsense.

1.) Creating the basic zone

First off, login to the OIO admin area and click on “Ad zones”. Create a new text ad zone and setup the options below to create our skyscraper format.

* Show ads in a list: no (this is the setting that unlocks the ability to create text ads with width / height)
* Zone width: 120
* Zone height: 600
* Zone rows: 3
* Zone columns: 1
* Ad decription length: 80 (the length itself can be whatever you want)

Once you’ve saved those options, setup 3 default ads at the bottom of the page, so that you’ll be able to see what your ads will look like. Place the ad zone on a page on your site, and you’ll see a basic layout, similar to this one.

2.) Styling the ads

The next step is to add some style to the ad zone, and this is where we can use the power of css to transform how the ads look on a page.

To do this, we’ll need the css ID for it (this is what will allow us to target our styling just ad this zone). The css ID comes in the format #oio-link-{id} – where {id} is the ID of the ad zone. In this example, we’ll be using ad zone 1.

Below is some sample css code, including comments, that changes a few things about the zone. This includes the background colour, the text colour, text size & bold, plus spacing around the ads. Here’s what it looks like.

/* Controls: the container for the entire ad zone */
#oio-link-1 {
background: blue !important; /* sets ad zone background colour */
}
/* Controls: the container for a single ad */
#oio-link-1 li .cell {
padding: 5px !important; /* sets amount of space around the ad */
}
/* Controls: the ad link */
#oio-link-1 li a {
color: orange !important; /* sets colour of the ad link */
font-weight: bold !important; /* sets ad link font as bold */
font-size: 15px !important; /* sets ad link font size */
}
/* Controls: the ad link, when hovering over it with your mouse */
#oio-link-1 li a:hover {
color: red !important; /* sets colour of the ad link to red, on hover */
text-decoration: underline !important; /* underlines the ad link, on hover */
}
/* Controls: the ad description text */
#oio-link-1 li .desc {
color: white !important; /* sets colour of the ad description */
}

3.) Finishing off (additional questions)

Where should I put the css code?

You can either put it in an external css file (e.g. your theme’s main stylesheet), or you can also put it at the bottom of OIO’s own “images/style/output.css” file. If you go for the latter option, remember to save a backup copy (when upgrading).

What should I do if I want my styling to apply to all my zones?

Instead of using #oio-link-{id}, replace it with .oio-link-zone – this will ensure that every text ad zone will use the same style.

Where can I find out more about css options?

There’s a whole host of css options you can use. Click here to find out more about them.

Why does each line of css end with !important?

This is to ensure that the css being used is the one that’s applied, and over-rides everything else.

Last updated: 5th August, 2012