Minimal CSS Styles for prettyPhoto RTL Lightbox inside Visual Composer Page Builder for WordPress

prettyPhoto is one of most loved lightboxes and it is integrated into Visual Composer single image widgets and galleries. For RTL website I had to make it compatible, because all its hidden texts became visible for Right-to-Left version. Another problem was that when lightbox was active, there was a long horizontal scrollbar at the bottom, that allowed to scroll left to about 6000px width. This was fixed too.

Here’s the minimal CSS to make it look good again and to align texts to the right, for normal RTL display. It is also hiding the long horizontal scroll bar. Put it into rtl.css of your theme or child-theme.

/* prettyphoto rtl */

.rtl div.pp_pic_holder {
overflow: hidden;
}
.rtl .pp_nav .pp_pause, .rtl .pp_nav .pp_play, .rtl a.pp_arrow_next, .rtl a.pp_arrow_previous, .rtl a.pp_next, .rtl a.pp_previous, .rtl a.pp_contract, .rtl a.pp_expand, .rtl a.pp_close {
text-indent: 1000em;
}
.rtl .pp_content_container .pp_details {
float: right;
}
.rtl div.ppt {
margin: 0 15px 5px 0;
}
.rtl div.pp_default .pp_content_container .pp_right {
padding-right: 20px;
}
.rtl div.pp_default .pp_description {
font-size: 13px;
text-align: right;
}
.rtl .pp_gallery li {
float: right;
margin: 0 0 0 5px;
}

Cheers!