Purchase OIOpublisher now for just $47.

Take control of your ad space.

Click here to purchase

    • CommentAuthorRaintrader
    • CommentTimeDec 2nd 2014 edited
     

    Hi Simon,

    i got an Responsive Theme working on my blog. All images ar getting scaled accordingly to the screen size of the device. So far so good.
    Now i want to do this with the adzones as well.
    At the moment the Situation is this:

    Some ads do scale (mostly simple Images like .gif/.jpeg) and some don´t (mostly ads wich are delivererd by an javascript Ad Code).

    Here are my questions:

    What do i need to do in order to make my ad zones responsive ??
    Im using mostly single Ad slots and Inline Ads.

    What is preferd in order to get responsive ads?? Javascript oder php Ad codes ??

    What is the best way to get Inline Ads Responsive ??
    The Inline Ad Feature or a extra Ad Zone ??

    It would be great if you could shine a little light on this and explain the steps i need to do.
    My Blog is: sugartweaks.de

    Thanks in advance and for the great work so far :-)

    Sascha

    Need help?  Quick start guide | Troubleshooting | All help topics
  1.  

    Here's the solution I'm using on a responsive site:

    Set the inline style parameter to false to strip inline styling. Add the following to your css stylesheet:


    .oio-banner-zone {
    max-width: 100% !important;
    }

    I'm not great at code, so there may be somebody here that will tell me this isn't correct, but it's working for me.

    Need help?  Quick start guide | Troubleshooting | All help topics
    • CommentAuthorT3DMNet
    • CommentTimeJan 22nd 2015
     

    Is there an official fix for a multiple ad space to be responsive? I'm not good at code, so any detailed instructions in how to get a 4 column, 2 row ad space with 150x150px ads to render responsively would be a huge weight off my shoulders!

    Thanks in advance!

    Need help?  Quick start guide | Troubleshooting | All help topics
    • CommentAuthorSimon
    • CommentTimeJan 24th 2015
     
    Project Admin

    I'm afraid I don't currently have a reliable solution for multi-ad grid situations. It is something I need to re-visit though, since I'd gotten quite close.

    Need help?  Quick start guide | Troubleshooting | All help topics
  2.  

    Hi Simon,

    We have the same issue on www.vapeonwattreviews.com We want to add an additional adzone with an ad size of 250 x 150 (example http://vapeonwattreviews.com/advertising-2/ ) So that the ads resize with the theme. Could we use the code listed above, and if so where does it need to be added,

    Thanks

    Need help?  Quick start guide | Troubleshooting | All help topics
    • CommentAuthorSimon
    • CommentTimeJan 31st 2015
     
    Project Admin

    Is it an ad zone with a single ad showing at any one time? Or another configuration?

    Need help?  Quick start guide | Troubleshooting | All help topics
    • CommentAuthorflavourik
    • CommentTimeFeb 13th 2015
     

    Just asking, is oio responsive out-of-the-box?

    Need help?  Quick start guide | Troubleshooting | All help topics
    • CommentAuthorSimon
    • CommentTimeFeb 14th 2015
     
    Project Admin

    For ads displaying one zone, yes. For multi-ad zones it's still a work in progress (as it's quite difficult to make work reliably in all possible circumstances).

    Need help?  Quick start guide | Troubleshooting | All help topics
    • CommentAuthorsheikoio
    • CommentTimeMar 6th 2015
     

    Hi Simon,
    If you could just remove the !important directive from the width property in .oio-slot class you would allow each developer to make the slots responsive. You don't need to (and must not try to) take care of all possible situations, as you said.

    Also, generating inline style tags might not be the best approach in my opiniob.

    BTW, are you not abusing the use of the !important directive? Almost all .oio-xxxxx css properties are using it. That's extremely annoying çause it prevents us from making ANY customizations. I wonder why you chose to follow that path... Can't you just remove them?

    Regards,

    Adrián

    Need help?  Quick start guide | Troubleshooting | All help topics
    • CommentAuthorSimon
    • CommentTimeMar 8th 2015 edited
     
    Project Admin

    Ah, that's the age old problem though. Most users aren't developers, which means the default implementation needs to be robust enough to handle most situations, even if that means not following best practice. :)

    Without using !important, many themes will overwrite styles and cause quite a few issues with displaying ads. For the user who isn't interested in customisation (the vast majority), it's one of the few ways to ensure ads display as expected.

    That's not to say the current implementation is an ideal one (it isn't), but the priority is getting a robust default behaviour working. What most people want is for the ads to "just fit" wherever they place them, hence the focus on a fluid style and the use of !important to enforce it. Once the 80% are happy, I can then look at ways to do the same for the remaining 20%.

    You can of course customise the markup used, to control whatever you want:

    <?php
    oiopub_banner_zone(1, array(
    'markup_zone_id' => 'oio-banner-1', //overwrites the zone ID
    'markup_zone_class' => 'oio-banner-zone', //overwrites the zone class
    'markup_allow_style' => false, //stops inline styles being generated
    ));
    ?>

    Need help?  Quick start guide | Troubleshooting | All help topics
    • CommentAuthorsheikoio
    • CommentTimeMar 10th 2015
     

    Hi Simon,
    Thanks for you response, and for the code snippet :)

    I understand what you say about themes overriding your style rules.

    Maybe you can add a boolean option in the admin area along the lines of "Force OIO Styles" () that would send to the browser the css file with all the !important directives, and another with the "clean" css, depending on what the user chose. The default should be "true" to mantain historical OIO behaviour.

    I think that would take you no more than 10 minutes... ok, I give you 20 :)

    What do you think about that?

    Need help?  Quick start guide | Troubleshooting | All help topics
    • CommentAuthorsheikoio
    • CommentTimeMar 11th 2015
     

    Oh! BTW, markup_allow_style=false doesn't seem to be working from javascript. And changing the zone id with markup_zone_id, doesn't change the zone id in the inline styles... that's weird...

    Need help?  Quick start guide | Troubleshooting | All help topics