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 ReadingEditing OceanWP Footer Widget Button Link Colors

Edit OceanWP Blog Grid Elementor Widget Buttons

Currently there is no setting to change the text and button size in the OceanWP Blog Grid Elementor Widget. However, you can make those changes by editing CSS in the Elementor widget’s Advanced > Custom CSS tab.

oceanwp blog posts widget

You can insert this css there.

selector .overlay-btn {position:absolute; left: 50%;min-width:200px;
padding:16px 12px; font-size: 18px; }
Continue ReadingEdit OceanWP Blog Grid Elementor Widget Buttons

Find Elementor Custom Fields In Elementor Kit Library Templates

Elementor’s Kit Library templates are well designed and can be a great way to jump start a new site. However, not all their editable components are explained from what I can find.

I will be using their Luxury Hotel kit for this example.

The Single Room templates are found in the Elementor Theme Builder. Click The All Parts filter in the top left column.

Elementor theme builder templates

From here click on the Single Project template. This will control the look of the individual room template.

You will notice the each room page have a different room size under the page title. There is a price field further down the page as well.

elementor edit post title 1

Those are custom fields Elementor inserts into WordPress. If you’re wondering where those fields are for each room, you can access WordPress’s custom fields for each post by turning on the section in Preferences.

elementor preferences show custom fields

After that you will see the custom fields in a panel at the bottom of the editor.

wordpress display custom fields Elementor 1
custom fields wordpress elementor 2
Continue ReadingFind Elementor Custom Fields In Elementor Kit Library Templates

Elementor Text Editor Widget Not Changing Font Settings

Have you ever run into problems with the Elementor Text Editor Widget not being able to change the font size, line spacing etc.? At first I investigated whether there was a conflict with the theme but that didn’t appear to be the case. Even setting all fonts back to default and disabling Elementor fonts in Elementor settings didn’t work.

fix Elementor Text Widget not being able to change font size and font settings

This tiny piece of css added to WordPress/Customizer/Custom CSS did the trick.

.elementor-text-editor p{ font-size: inherit; line-height: inherit; letter-spacing: inherit; }
Continue ReadingElementor Text Editor Widget Not Changing Font Settings

Force Elementor Pro Button Colors

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}


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 ReadingForce Elementor Pro Button Colors