HOW TO: change default 20px border - CSS hack
  • Just spend an hour or so digging into PP for a border hack..
    Just add to your page after:


    /* PrettyPhoto CSS hack
    ** example: change 20px default border to 10px
    */
    .pp_top { height: 10px; }
    * html .pp_top { padding: 0 10px; }
    .pp_top .pp_left { height: 10px; width: 10px; }
    .pp_top .pp_middle { height: 10px; left: 10px; right: 10px; }
    .pp_top .pp_right { height: 10px; width: 10px; }
    .pp_bottom { height: 10px; }
    * html .pp_bottom { padding: 0 10px; }
    .pp_bottom .pp_left { height: 10px; width: 10px; }
    .pp_bottom .pp_middle { height: 10px; left: 10px; right: 10px; }
    .pp_bottom .pp_right { height: 10px; width: 10px; }
    .pp_content_container .pp_left { padding-left: 10px; }
    .pp_content_container .pp_right { padding-right: 10px; }

    /* change 40 to (2 x your border width)
    ** search in jquery.prettyPhoto.js: line 497:
    ** containerWidth:Math.floor(pp_containerWidth) + 20, // was 40
    */


    Edit the JS and you should be fine.
    Thanks Stephane, for this great plugin.
  • Wonderful! Thank you so much for your work on this, I also played around for a good while before finding your work :)

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!