Change color of border & font in pop-up title

pks875 · March 2017

Hi there,

I am currently using this shortcode on my page (localhost right now):

[popup title="Title" padding="0" button="0"]Insert your popup content here[/popup]

This creates a button with the background color I like (same as the background it's placed on, or maybe it's transparent) but with dark grey text and dark grey button outline. I would like to change the text and button outline to white, to match the other buttons on the page. Is there any css or other method for achieving this? I searched the forum here, but was only able to find css that would change the background color of the button, which I do not want to do.

Thanks for any assistance!

Bryan · March 2017

Hi,

You can set the styles of the popup in theme options>addons&plugins>addons pretty photo section.

IF this is not enough you will have to use custom css.

We can write you custom CSS but we have to see your site so please write to us when it is online. thanks

pks875 · March 2017

Thanks for your response, I appreciate it. Unfortunately changing the pretty photo styles does not seem to affect how my button appears.

To be clear, I have two buttons on the page, and I want them both to look like the white one in the image below:

Here is the current shortcode for the grey one:

[popup title="Do you have money?" padding="0" button="1" ][contact-form-7 id="6" title="Contact form 1"][/popup]

Can you advise how to alter the shortcode or offer some CSS to change the font and border to white?

If you are wondering, the white button is a different type of button, using this shortcode:

[button title="Do you have money?"  link="#" color="#fff" font_color="#fff" large="1"]

Bryan · March 2017

Hi,

We will need a link to your page. Also, send us a screenshot describing exactly what you want to change.

thanks

pks875 · March 2017

Hi there, my page is now live: http://seriouslyunprepared.com/

You can find the button at the very bottom of the page. Right now, the button outline and text are grey. I would like them to be white.

Thanks for any assistance you can provide.

Bryan · March 2017

You would have to add a custom class in edit option for this section so I can target this specific button. If I would write css now all of the buttons will change.

pks875 · March 2017

Thanks for your reply. I am new to this--can you help me understand how and what to add for the custom class?

Bryan · March 2017

Yes just edit the section in the muffin builder, you will find a field there called custom class. Just type something like my-class and save.

It will be visible in the HTML code and I will use it to target the button.

pks875 · March 2017

Thanks! I have added the custom class "button-class" to that section.

Bryan · March 2017

Use this css

.button-class  a.button {
	border-color:white !important;
	color:white !important;
}

pks875 · March 2017

This worked great. Thank you for the help, I truly appreciate it!

Change color of border & font in pop-up title

Comments