Many problems of prettyPhoto with Templatic’s Directory theme


Unfortunately this theme has several CSS rules that severely affect JIG's customized prettyPhoto. They don't allow nice counter-rules so you'll need to edit the style sheet directly. A child theme works but a copy of their style sheet is still necessary. So, the solution is ugly and will impair your ability to update the theme.  Otherwise, you'll experience these symptoms:

  • Navigation bar including title, description and social sharing buttons will fall out of the prettyPhoto frame.
  • Your image will be limited in size.
  • Large navigation arrows on the lightbox image will be off-positioned.
  • Counter text will be off-positioned.
  • Twitter button will often fail to work, because a CSS rule impairs JIG's Twitter button load detection.

The obvious solution would be to use another lightbox. If you prefer to stick with prettyPhoto though, here is what you need to do.

Edit /wp-content/themes/Directory/css/style.css file of the Directory theme. Remove or comment out the following four lines, which are scattered across the file:

This troubleshooting fix was posted in Theme and plugin conflicts on October 8, 2015