Support » Plugin: wp-greet » Terms of Service thickbox styling & responsive

  • Resolved yezzz

    (@yezzz)


    Recently I noticed my TOS box stays “dark” after popping up, and the problem is that #TB_window has a z-index lower than the z-index of #TB_window. Both have a value 0f 100050, but old NGG1.9.6 that I’m still using adds #TB_window{z-index:9999 !important}. This CSS issue wasn’t here before, so I suspect the thickbox used to have much lower z-index values and the WP dev team raised them.

    I guess the best way to fix it is by modifying NGG’s css with an equal or higher z-index. For now I just add this to wp-greet.css:

    #TB_window {z-index:100050 !important;}

    Making TOS popup responsive:

    The link to display the thickbox has a fixed width and height, and won’t fit on smartphone screens. It cannot be given a percentual size and styling the thickbox based on screen size is very hard if not impossible.

    Easiest solution is to use jquery to change the width/height values in the link, then let thickbox handle everything else. The script below gets browser window dimensions on pageload and after resizing browser window. It deducts 50px needed for the thickbox window border/controls/etc, then writes the proper link to .thickbox

    It has been set up to make the box no larger than the original link, but you can change the 2 variables to whatever you like.

    Also make sure you replace example.com with your own url.

    <script>
    var tosmaxwidth=400
    var tosmaxheight=600
    jQuery(window).on('resize',function() {
    var toswidth = window.innerWidth-50;
    if (toswidth > tosmaxwidth) {
    toswidth=tosmaxwidth;
    }
    var tosheight = window.innerHeight-50;
    if (tosheight > tosmaxheight) {
    tosheight=tosmaxheight;
    }
    var toslink = "http://example.com/wp-content/plugins/wp-greet/wpg_service.php?height=" + tosheight + "&width=" + toswidth;
    jQuery(".thickbox").attr("href",toslink);
    });
    jQuery(document).ready(function() {
        jQuery(window).trigger('resize');
    });
    </script>

    https://wordpress.org/plugins/wp-greet/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Edit typo: problem with thickbox was #TB_window has a z-index lower than the z-index of #TB_overlay

    Plugin Author tuxlog

    (@tuxlog)

    Thanks, for this tutorial.

    Turns out that the z-index styling above was only working in firebug, but not when added to the stylesheet.

    Needs a little more specificity to fix it:

    div#TB_window {z-index:100050 !important;}
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Terms of Service thickbox styling & responsive’ is closed to new replies.