Title: Code to remove border/padding from lightbox? Last modified: August 31, 2016 --- # Code to remove border/padding from lightbox? * [NextGen_User_SH](https://wordpress.org/support/users/nextgen_user_sh/) * (@nextgen_user_sh) * [10 years, 5 months ago](https://wordpress.org/support/topic/plugin-nextgen-code-to-remove-borderpadding-from-lightbox/) * Re NextGen, how to remove border/padding from lightbox? I already removed from thumbnails with this: * .ngg-gallery-thumbnail img { background-color:transparent!important; border: none!important; padding: 0px; } * but once clicking on any image, the lightbox pops up and the white ugly padding surrounding the image is still there! Thanks for enlighting me. Rgds. Viewing 6 replies - 1 through 6 (of 6 total) * [Will Schmierer](https://wordpress.org/support/users/officialwill/) * (@officialwill) * [10 years, 5 months ago](https://wordpress.org/support/topic/plugin-nextgen-code-to-remove-borderpadding-from-lightbox/#post-6903246) * Do you have a link to your site, it would be helpful to see to troubleshoot the exact issue? * Thread Starter [NextGen_User_SH](https://wordpress.org/support/users/nextgen_user_sh/) * (@nextgen_user_sh) * [10 years, 5 months ago](https://wordpress.org/support/topic/plugin-nextgen-code-to-remove-borderpadding-from-lightbox/#post-6903248) * Yes of course Will. Thank you for replying. * //thparch.com * Pls go to menu ‘Media’ link. You’ll see thumbnails is resolved, but popping lightboxes still show white frames… * Rgds, * Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/) * (@bcworkz) * [10 years, 5 months ago](https://wordpress.org/support/topic/plugin-nextgen-code-to-remove-borderpadding-from-lightbox/#post-6903271) * Thanks for the link. Unfortunately, the “border” you see is not a border in the HTML sense, it is an oversized container div behind the image. We cannot use simple CSS rules to change how this looks because much of the styling is generated as inline styles by javascript. * I would expect there to be a setting somewhere in the plugin to change the lightbox appearance. If you cannot find such a setting I suggest you post your question in the dedicated plugin support forum to get an answer from people who really know this plugin. [https://wordpress.org/support/plugin/nextgen-gallery](https://wordpress.org/support/plugin/nextgen-gallery) * Thread Starter [NextGen_User_SH](https://wordpress.org/support/users/nextgen_user_sh/) * (@nextgen_user_sh) * [10 years, 5 months ago](https://wordpress.org/support/topic/plugin-nextgen-code-to-remove-borderpadding-from-lightbox/#post-6903311) * [@bcworkz](https://wordpress.org/support/users/bcworkz/): thank you. * In my webroot, there are 2 files: 1: plugins/nextgengallery/products/photocrati_nextgen/ modules/lightbox/static/shutter * 2: plugins/nextgengallery/products/photocrati_nextgen/modules/lightbox/static/ shutter_reloaded * When editing shutter_reloaded/shutter.css the only parameter with white color(# ffffff), as in my online lightbox frame, is this: * #shDisplay div#shTitle { font: normal 12px/17px ‘Lucida Grande’, Verdana, sans- serif; /* caption font */ color: #ffffff; /* caption colour */ text-align: center; margin: 0 auto; } * When changing ffffff to 000000, for ex, the lightbox is still white. * When editing shutter_reloaded/shutter.css and changing parameters in: * div#shDisplay img#shTopImg { margin: 0 auto; border: 1px solid #555; background: transparent; display: block; max-width: none; max-height: none; } * nothing changes either. * Am I at the right place?? * Rgds * Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/) * (@bcworkz) * [10 years, 5 months ago](https://wordpress.org/support/topic/plugin-nextgen-code-to-remove-borderpadding-from-lightbox/#post-6903330) * No, the styles are coming from the jquery lightbox plugin (fancybox actually). I initially thought we need to alter the javascript in order to make the borders 0 width, but then I realized we could just make the border color transparent. You don’t want to edit the jquery styles, but you should be able to override them by using the `!important` modifier or by enqueuing a separate stylesheet and hooking ‘wp_enqueue_scripts’ with a large priority parameter so that it loads after the jquery styles. * There’s a few layers to work through to fully eliminate the borders. * ``` #fancybox-content{ border-color: rgba(0,0,0,0);} #fancybox-outer{ background: rgba(0,0,0,0) none repeat scroll 0 0;} .fancybox-bg{ display: none;} .fancybox-title-inside{ background: rgba(0,0,0,0) none repeat scroll 0 0;} ``` * The first and third are new rules, the other two need to override. The last rule is what makes the bottom border thicker, but also displays any captions. If you use captions anywhere they could be difficult to read over the transparent background. * [houfton](https://wordpress.org/support/users/houfton/) * (@houfton) * [9 years, 5 months ago](https://wordpress.org/support/topic/plugin-nextgen-code-to-remove-borderpadding-from-lightbox/#post-8610272) * After looking for a long time I found a solution [here](http://stackoverflow.com/questions/17172584/overriding-div-inline-width-style-to-make-element-stretch-to-contents). The trick is to override the default inline width given to the fancybox-outer div (which is 20px wider than the image to accommodate a 10px border) using display: table-cell. With the border set to 0px there is now no 20px on the right. * ``` #fancybox-outer { display: table-cell; } #fancybox-outer #fancybox-content { border: 0px; } ``` * I have tested it a bit and it seems to be working! * This is with the built-in Fancybox Lightbox Effect in NextGEN Gallery 2.1.62. - This reply was modified 9 years, 5 months ago by [houfton](https://wordpress.org/support/users/houfton/). Reason: code block display - This reply was modified 9 years, 5 months ago by [houfton](https://wordpress.org/support/users/houfton/). Reason: small code simplification Viewing 6 replies - 1 through 6 (of 6 total) The topic ‘Code to remove border/padding from lightbox?’ is closed to new replies. ## Tags * [Borders](https://wordpress.org/support/topic-tag/borders/) * [padding](https://wordpress.org/support/topic-tag/padding/) * [remove](https://wordpress.org/support/topic-tag/remove/) * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/) * 6 replies * 4 participants * Last reply from: [houfton](https://wordpress.org/support/users/houfton/) * Last activity: [9 years, 5 months ago](https://wordpress.org/support/topic/plugin-nextgen-code-to-remove-borderpadding-from-lightbox/#post-8610272) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics