Styling "Popop" shortcake

BennyPi · December 2017

Hello,

Is there a way to style the popup short code beyond the means of "button" vs. "link"?

- I would like to add an icon as part of the text

- I would like to change the background color when active / hovered. I know I can change the global button colors in the theme configuration. What I am looking for is a way to change just a few buttons - potentially via CSS. I would like to invert the colors in case of the popup "button".

Thanks a lot!

Bryan · December 2017

Hi,
Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.
It is always a good idea to also attach a screenshot, for that use services like snag.gy or pasteboard.co
thanks

BennyPi · December 2017

Hi,

Here is the link. The side is still in draft but you can access it http://v2.growsailing.com/#Support

Its about the last 4 buttons all the way at the end (PayPal / Bitcoin etc.)

Thanks a lot!

Bryan · December 2017

Use this css to change the color

body .button-stroke a:hover.button, .button-stroke a:hover.tp-button {
	background-color: #fff !important;
}

If you want to add an icon then simply add and it will add a home icon into the button name. All icons here:
http://themes.muffingroup.com/be/theme/shortcodes/typography/#icons

BennyPi · December 2017

Awesome, the CSS was helpful!

I do not get your suggestion about the icon though. Were would I add this as part of the shortcode.

[popup title="Bitcoin" padding="20" button="1"]

Thanks!

Bryan · December 2017

Oh, sorry but the icon will not work in the shortcode. You could use this:

[button title="Button" link="#you-custom-id" target="_blank" class="" download="" rel="lightbox" onclick=""]
<div id="you-custom-id" style="display:none">CONTENT HERE</div>

Long live bitcoin.

CONTENT HERE

Styling "Popop" shortcake

Comments