Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

where is iframe code defined in wordpress plugin integration?

rw1rw1 New
edited March 2013 in Vanilla 2.0 - 2.8

hello,

i'm wanting to add rounded corners to the iframe that contains the embedded vanilla forum in a wordpress integration scenario (using the embeddable theme as well).

in firebug i can see that the iframe has what appears to be hardocded styles in it ie:

<iframe width="100%" scrolling="no" height="1000" frameborder="0" style="width: 100%; height: 600px; border: 0px none; display: block;" border="0" src="***" name="vanillaxxxxx" id="vanillaxxxxx"></iframe>

can anyone please tell me where i can hardcode the additional style of border-radius: 10px?

thanks very much!

Comments

  • 422422 MVP
    edited March 2013

    if you wrap the iframe in a div, set a border radius to the div, and overflow hidden on the iframe

    http://stackoverflow.com/questions/6535217/css-adding-border-radius-to-an-iframe

    There was an error rendering this rich post.

  • edited March 2013

    It is a Plugin so it would be in the embedvanilla plugin remote.js
    almost at the end of the code you will find:

       document.write('< iframe id="vanilla'+id+'" name="vanilla'+id+'" src="'+vanillaUrl(currentPath)+'"'+optStr('height', ' scrolling="no"', '')+' frameborder="0" border="0" width="'+optStr('width', '100%')+'" height="'+optStr('height', 1000)+'" style="width: '+optStr('width', '100%', '%spx')+'; height: '+optStr('height', 1000)+'px; border: 0; display: block;border-radius: 10px;" >< /iframe >');
    
    

    just add the border radius in there like I did here.

  • since it is created dynamically anyway you can do this try this trick

    jQuery(document).ready(function($){
        $('iframe').livequery(function(){
            var roundedBox = $('<div class="roundedContainer"/>').css({
                'webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                'border-radius': '10px',
                'width': $(this).width()+'px',
                'height': $(this).height()+'px',
                'overflow': 'hidden'
            });
           $(this).wrap(roundedBox);
        });
    });
    

    You will obviously need livequery loaded for it to work. You can substitute iframe#vanilla for iframe if you wan to be specific.

    grep is your friend.

Sign In or Register to comment.