Changing the look of ads:

Basic changes such as the size and number of ads, as well as the default text / image, can all be made from the ad settings page - click here to see the tutorial on configuring an ad zone.

Sometimes however, you might want to make a more advanced change. There are 2 files that control the look of the ads, which you can customise if needed.

CSS Styling:

The images/style/output.css file contains the css styling used to position an ad zone. You will require at least a basic understanding of css in order to make any changes or additions to this file.

Banner zones, text zones, and inline zones are all controlled by different sections of the css file, as shown below:

>> View output.css file

Each ad zone also has a unique ID generated for it. This allows 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

PHP Code:

The include/output.php file contains the php code used to generate an ad zone. You will need at least a basic understanding of php in order to edit this file.

Editing this file will allow you to change the html used to position ads, or add extra text above / beneath a zone.

Hacks.php File:

Making changes to core files is not advised unless absolutely necessary, as it makes upgrading a lot less easy. A way to avoid making changes to the output.php file has therefore been included in the script.

Create a new blank file in the OIO script root directory called hacks.php. Copy and paste the output functions that you want to modify from output.php into this file. You can then make the changes you need without modifying output.php, as they will be over-ridden by the functions defined in hacks.php.

Last updated: 5th March, 2009

Wordpress Theme Integration:

Starting with v2.21, 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.) At this point, you should now be looking at the "main.tpl" textbox. Look for a line of code in that textbox that contains have_posts() - it will be useful in completing the final step.

6.) Finally, download the attachment below (called content.txt) and open the file. Copy and paste the code from that file just above the line containing have_posts() that you identified in step #5.

If you are unsure where to paste the code mentioned in step #6, 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