I have a website https://www.mtelogistix.com with Pro. I’ve created a ConvertPlus modal popup with an exit-intent trigger and I’ve added some custom css to the form. The form loads first with the default styling and then adds the custom styling after a delay.
I’ve tried adding the styling into the convertplus custom CSS area and into the Theme. I’ve also tried timed triggers all with the same result. Any idea what’s going on?
Hello Spencer,
Thanks for posting in!
The white background should cover the whole form. I could not find any code that is applying the blue background. Would you mind providing us access to your site so that we can check your settings? Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288
Regards.
Hi RueNel,
Just sorting out getting you access.
Hi Spencer,
Thanks, while you’re at it, try clearing all your caching features (plugin, server-side, CDN, and browser’s cache) to avoid a potential issue that causes by the cache.
Cheers!
Sent you the login credentials.
Hello @Spencer,
This is your custom css:
div#cp_id_5a9d3-1 div.cp-modal-content div.cp-modal-body {
padding:25px;
}
div#cp_id_5a9d3-1 div.cp-modal-content div.cp-modal-body div.cp-short-desc-container {
border-top:2px solid #D37647;
border-left:2px solid #D37647;
border-right:2px solid #D37647;
padding-top:25px;
padding-left:25px;
padding-right:25px;
}
div#cp_id_5a9d3-1 div.cp-modal-content div.cp-modal-body div.cp-title-container, div#cp_id_6fbe0-1 div.cp-modal-content div.cp-modal-body div.cp-desc-container, div#cp_id_6fbe0-1 div.cp-modal-content div.cp-modal-body div.cp-form-container{
border-left:2px solid #D37647;
border-right:2px solid #D37647;
padding-left:25px;
padding-right:25px;
margin-top:0;
margin-bottom:0;
}
div#cp_id_5a9d3-1 div.cp-modal-content div.cp-modal-body div.cp-form-container{
padding-bottom:10px;
}
/* bottom styling */
div#cp_id_5a9d3-1 div.cp-modal-content div.cp-modal-body div.cp-info-container {
border-bottom:2px solid #fff;
border-left:2px solid #fff;
border-right:2px solid #fff;
padding-bottom:25px;
padding-left:25px;
padding-right:25px;
position:relative;
overflow: show;
z-index:999;
color:white;
}
div#cp_id_5a9d3-1 div.cp-modal-content div.cp-modal-body div.cp-info-container:after {
content: "";
display:block;
background-image: url(https://www.mtelogistix.com/wp-content/uploads/2019/09/mte-modal-bg-updates.jpg);
width:calc(100% + 64px);
height:117px;
position:absolute;
bottom:-47px;
left:-32px;
z-index:-100;
}
div#cp_id_5a9d3-1 div.cp-modal-content div.cp-modal-body div.cp-info-container:before {
content:'';
display:block;
width:calc(100% + 4px);
height:100%;
border-bottom:2px solid #fff;
border-left:2px solid #fff;
border-right:2px solid #fff;
position:absolute;
top:0;
left:-2px;
}
Your custom css created a conflict and breaks off the design styling of your modal popup. I would recommend that you do the styling in the Design tab. Only add custom css when it is deemed necessary.
Hope this helps.
Hi RueNel,
For that particular design I had to add the custom styling. I’ll look into making one from scratch.
Thank you @spencer. Hope you can manage to customize the pop-up with minimal custom code which you need to add to the Custom CSS option of the ConvertPlus itself.
Thank you.
It turns out I couldn’t get the look the client wants without the custom css. Is there any other work around? I’ve cleaned up the css quite a bit but am still having the delayed loading effect.
Hey @spencer,
I’ve discovered the cause but couldn’t recommend an exact solution because I couldn’t log in to your site to check the setup. The credentials don’t work.
Anyway, the cause is ConvertPlus dynamically adds the ID to the modal container and that takes a while. There’s no way to speed that up but if you just omit the ID in your CSS (refer to the screenshots below), I believe it would work.
CSS is already loaded in the header so this should already work if written correctly.
First few seconds. The Modal Container doesn’t have the ID yet.
ID was added after a few seconds of loading. The CSS applies at this moment because it targets the ID.
Again, try removing the ID. If it doesn’t work, replace it with #x-root which is the main ID of the theme’s root container.
Hope that helps.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.