Force Elementor Pro Button Colours

Using OceanWP and Elementor Pro I added a popup button in the footer widget area. Even after turning off theme control over Elementor colors in Elementor>Settings>Disable Default Colors, the text colours were not correct.

Here is what I did to over ride any color settings other plugins may be inserting.

This may be a bit sloppy but put this in the OceanWP Custom CSS/JS section.
/* Footer Link Colours */
a.elementor-button-link.elementor-button.elementor-size-sm {color:#ffffff !important}
a.elementor-button-link.elementor-button.elementor-size-sm:hover {color:#282828 !important}

UPDATE

Well, it looks like I found the problem. Uploading some of the OceanWP Pro templates inserts CSS into the Customizer.

Found this when I scrolled up the Custom CSS/JS section so look in the CSS section if you’re experiencing color wonkiness.

/* Footer */
#footer-widgets .footer-box { text-align: center; }
#footer-widgets .social-widget .style-light li a, #footer-widgets .social-widget .style-dark li a,
#footer-widgets .social-widget .style-colored li a { background-color: #263036; color: #708e9f; border-color: #263036; width: 40px; height: 40px; line-height: 40px; }
#footer-widgets .social-widget .style-light li a:hover, #footer-widgets .social-widget .style-dark li a:hover,
#footer-widgets .social-widget .style-colored li a:hover { background-color: #0eb290; color: #fff !important; border-color: #0eb290 !important; }

Continue Reading Force Elementor Pro Button Colours

Editing OceanWP Footer Widget Button Link Colors

I created a custom footer template in OceanWP using Elementor. I ran into this problem when Elementor Pro was not able to over ride some of the link colors in OceanWP’s footer widgets.

PS. You can disable your theme’s ability to override Elementor Pro’s colors by going to Elementor/Settings. Disable Default Colors, Disable Default Fonts.

Adding to the problem was a button created in Elementor Pro that had a hover color.

To lock in the colors add this to the Customizer’s Custom CSS/JS.

/* Footer Link Colors */
#footer-widgets a {color:#FA9100}
#footer-widgets a.button {color:#282828}
#footer-widgets a.button:hover {color:#282828}

Continue Reading Editing OceanWP Footer Widget Button Link Colors

Site Wide Link Colors In OceanWP

To set a global site link color across both Elementor and OceanWP. This will change every link color on the site.
In WordPress Customizer/Custom CSS/JS

a { color: #00EEEE; } a:visited { color: #551A8B; }

Continue Reading Site Wide Link Colors In OceanWP