Purchase OIOpublisher now for just $47.

Take control of your ad space.

Click here to purchase

  1.  
  2.  

    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

  3.  

    Customising purchase templates:

    The templates used to display the purchase screens to advertisers are split into 2 sections (both can be found in the "templates" directory of the OIO script).

    (1) Core Templates

    The templates/core directory contains the files that display the unique content on each page (eg. the banner ad purchase form).

    If you want to edit any of these core files, you should first copy it from the "core" folder to the "core_custom" folder, which will stop your changes from being over-written during an upgrade.

    (2) Theme Directories

    When you open the OIO templates directory (either on your hard drive, or using FTP), you will see the "core" folder and at least one other folder, called "default". These other folders contain theme files (header, footer, css) that define the look of the purchase pages.

    If you would like to integrate OIO with your current Wordpress theme, click here. If you would like to modify an existing OIO theme, here is a suggested method:

    1.) Copy and rename the theme you wish to modify (eg. default becomes mytheme). Then select this theme from the admin area, in the Settings -> Themes area.

    2.) You will then be able to edit the header, footer, and css files directly from the admin area, to suit the look you want. You can therefore easily integrate OIO with your site's current theme, by adding the html to the header and footer areas, and replacing the css code.

    Last updated: 13th September, 2009

  4.  

    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

  5.  

    Ad zone custom parameters:

    Ever wanted to 'tweak' how an ad zone is displayed on your site? You can now use custom options in your ad code to change various things about how the ad zone looks.

    (1) Javascript ad code example

    This example will display banner ad zone 1 (zone = 1), aligned to the left (align = left), with all empty ad slots shown (empty = -1).

    <script type="text/javascript" src="http://mysite.com/oiopub-direct/js.php?type=banner&zone=1&align=left&empty=-1"></script>

    (2) PHP ad code example

    This example will display the same ad zone as above, but using php code.

    <?php
    if(function_exists('oiopub_banner_zone')) {
    $zone_id = 1;
    $options = array( 'align' => "left", 'empty' => "-1" );
    oiopub_banner_zone($zone_id, $options);
    }
    ?>

    (3) Full list of cusomisation options

    Below is a list of all the options you can use with your ad code (both php and javascript).

    * title (of the ad zone)
    * rows (number of rows in the zone)
    * cols (number of columns in the zone)
    * width (of an individual ad)
    * height (of an individual ad)
    * fluid (sets ad zone width to 100%, only works for zones displaying one ad)
    * align (left, right, center or none)
    * position (same as align)
    * border (sets width of border, text ads only)
    * spacing (between ads, banners only)
    * show (all, purchases, defaults)
    * shuffle (if set to false, ads will not rotate)
    * empty (number of empty slots to display, use -1 to show ALL empty slots)
    * wrap (true of false, allows text to wrap round the ad zone)
    * repeats (true or false, whether ads can repeat if showing the same ad zone multiple times on a page)
    * echo (true or false, php only)
    * refresh (number of seconds before ad zone auto-refreshsed, javascript only)
    * category (limits ads shown to the category ID(s) used)
    * purchase (limits ads shown to the purchase ID(s) used)
    * subid (lets you filter ads shown by the data passed in, more info)
    * zones (pull in ads from multiple zones - e.g. 1,3,5)
    * raw_data (return raw data as array, php only)
    * log_impressions (execute logging directly from the ad zone call, php only)
    * markup_allow_style (set to false to remove all inline styling)

    Last updated: 28th March, 2010

  6.  

    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" (120x600).

    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