Vanilla open source was terminated 1 January 2025 by Higher Logic. See this announcement for more information.

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.