Popup Template

The popup window used in the “Open post in popup” feature of Portfolio Posts Pro is controlled by the dp-popup-template.php file located in the /templates/ folder of the plugin. By default, this file will display the content of the post exactly as it appears when viewing the post directly – only without the site header and footer. If you have created a custom template to display posts using the Divi Theme Builder, the content from this custom template will be displayed in the popup.

To change this behavior or if you need more control over how the content is displayed in the popup, you can copy this file and save it in your child theme’s root folder:

/wp-content/themes/your-child-theme-folder/dp-popup-template.php

You can also get the contents of this file here:

Portfolio Posts Pro Popup Template File

Once copied, the plugin will use your version of the popup template to display content in the popup. There are a few reasons you may want to do this:

Modify the Popup CSS

Since the popup content is loaded via an iframe, it’s not possible to specifically target the content with CSS added to your child theme’s style.css file or Custom CSS box in the Divi Options page. Adding CSS to those locations would affect the posts when viewed directly. To change how the post content is displayed within the popup window without changing how it’s displayed when the post is viewed directly, you’ll need to add your CSS directly to the custom popup template.

You’ll want to add your CSS just before the closing </head> statement in the popup template file like this:

<style>
.et_pb_section {padding: 30px 0;}
.et_pb_row {padding: 20px 0;}
</style>
</head>

The CSS added to this file will only apply to the popup content.

If you want to change the appearance of the popup overlay or popup window, you can use the following classes in your child theme’s style.css file or the Custom CSS box in the Divi Options page:

Overlay

.dp_ppp_modal_overlay {
background: #fff; 
}

Popup Window

.dp_ppp_modal {
max-width: 1080px;
}

Modify the Popup Content

Again, the content displayed in the Portfolio Posts Pro popup will be the same as the content displayed when viewing the post directly. There are many reasons you might not want this. Rather than try to create a single solution that would apply to every situation, we’ve made it easy to modify how the content is displayed in the popup.

For example, you may want to display the post content using a Divi Theme Builder template when the post is viewed directly but display the post content when viewed from within the popup. To do this, follow the steps above to copy the dp-popup-template.php template to your child theme. Then replace the content of this file with the following content:

Portfolio Posts Pro Popup Template File – Ignore Divi Theme Builder Template

Here we are simply bypassing the Divi Theme Builder template and reverting to a modified version of the single.php template. You can modify this file however you like to output any content you want: static HTML, custom fields, etc.