Add Text to Monarch Popup
This is from my #diviquicktip CSS snippet series in which I post different quick CSS fixes on my Facebook page whenever I come across some of the most common pesky Divi quirks.
Example:
Problem:
Are you a Monarch user like me? I love it and it’s my go-to sharing plugin *but* I’ve never liked how when you click on the ‘all networks’ symbol there’s no text saying to share or anything. We can add that pretty easily with some CSS!
Fix:
The code below goes in your child stylesheet or in Divi theme options > general > Custom CSS box. You can adjust the size and color and add a font-family and other font-related styles; Note the code comments.
{;} css code
.et_monarch .et_social_popup_content:before {
content: "Thx for sharing!";
font-size: 34px;
color: #000;
}
/*** If you need to make your entire popup box taller add this and adjust the number if needed ***/
.et_monarch .et_social_popup_content {
height: 450px !important;
}
Great Article! Looking forward to using your tips. We have a similar question about customizing the Monarch flyin title font. We have tried adapting your code above to the flyin and adding:
font-family: ‘Poiret One’
but cannot get the font to change. We have been successful in changing the background color by adding CSS to Divi theme options > general > Custom CSS box using:
/* Monarch Flyin background color */
.et_social_flyin {
background: #00c6b6 !important;
}
Do you have any suggestions with how to successfully change the font? Any help would be greatly appreciated. Thanks! 🙂
P.S. We are still in the process of building our website. If you visit there is only a construction page publically published at this point.
Hi Gina! Sorry for the delayed response, not sure how I missed this notification.
Do you happen to have Poiret One font selected in your customizer as your heading or body font, or are you using different fonts for those? You should only need to add it to my selector for it to work as that’s what I did in my example, like this:
.et_monarch .et_social_popup_content:before {
font-family: ‘Poiret One’, cursive;
}
but the font needs to be “called” first, this is normally automatically done if you’re setting either your header or body font as Poiret One. Hope that makes sense.
If it’s not set in your customizer you can still use it, I’m just trying to get more info 🙂