How to add border to text in pop-up modual?

[ohiocannabis]

So I’m using the pop-up modual in Convert Plus and would like to add a border or stroke effect to the text, but there doesn’t seem to be a way to do that with any of the features.

You can see the current pop-up modual: www.ohiocannabis.com

What CSS could I add to the custom CSS convert Plus section to get this affect so my white font stands out better against the background image?

I would like to add a border to all of the white font to make it more legible.

Also the Close X doesn’t seem to stick to the top right like I have the setting set to, instead it seems to populate at the bottom of the pop-up, how do I fix this so it is in the top right like it’s supposed to be?

Thank you!

[rad]

Hi John,

Thanks for reaching out.

Border isn’t possible for the letters but text shadow should work. Please add this CSS to Theme Options > CSS

    .cp_font, .cp-description, .cp-info-container {
     text-shadow: -1px 1px 5px rgba(0, 0, 0, 1) !important;   
    }

Cheers!

[ohiocannabis]

@ohiocannabis

Also the Close X doesn’t seem to stick to the top right like I have the setting set to, instead it seems to populate at the bottom of the pop-up, how do I fix this so it is in the top right like it’s supposed to be?

That actually worked really good, thank you!

Also the Close X doesn’t seem to stick to the top right like I have the setting set to, instead it seems to populate at the bottom of the pop-up, how do I fix this so it is in the top right like it’s supposed to be?

I think I may have had to add some code before for an Age Gate because the “Accept” button kept populating in the top right, instead of the bottom middle.

Any idea what I can do to have multiple pieces of CSS for both modual popups?

If not I’d prefer to just have the current newsletter pop-up have the X in the top right hand corner.

Thanks.

[paul.r]

Hi John,

This css code is interfering with the close button settings.

.cp-overlay-close.cp-inside-close {
    top: auto !important;
    bottom: 15px;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
}

Instead of adding it in Theme Options > CSS you can try adding it in ConvertPlus > Custom CSS
That way, it will only take effect on the specific Modal.

Hope this helps

[ohiocannabis]

Ahh yes, worked perfect, thank you!

You guys are the best!

I’ve also created a modual popup for the sidebar, but it’s stationary and always there.

www.ohiocannabis.com/dispensaries

You can see the newsletter signup on the sidebar

But it seems a bit off; there is too much space at the top and the bottom of the modual and Newsletter is a bit too close to the Enter your email section

What can i do to fix these two problems?

Thank you!

[Prasant]

Hello John,

Thanks for updating the thread.

@ohiocannabis

I’ve also created a modual popup for the sidebar, but it’s stationary and always there.

Can you please share a screenshot of the issue you are facing?

@ohiocannabis

there is too much space at the top and the bottom of the modual and Newsletter is a bit too close to the Enter your email section

Please add following CSS under Pro > Theme Options > CSS:

.cp-modal-every-design .cp-text-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.cp-modal-body * {margin-bottom: 5px;}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.