OceanWP Quick Notes, Access Common Settings

TOPBAR Top Bar, turn off top bar above Header = Top Bar/General Turning off Top Bar in OceanWP/Theme Panel/Customizer Sections will get rid of all colour and other settings for the top bar. Top Bar Dropdown Menu Colors For Topbar menus: links can ONLY be 1 color, including dropdowns Top Bar/General/Link Color Use Header/Menu/Dropdowns Styling for dropdown background colors Colour, Link Colours: Customize/Top Bar/General Background & border colours. Small social icons on Top Bar. Customize/Top Bar/Social OceanWP Customize/Top Bar code, adds icon and phone number <i class="icon-phone" style="margin: 0 7px 0 0; color: #0a3069;"></i> 1-555-645-324 <i class="icon-clock" style="margin: 0 7px; color: #0a3069;"></i>Monday - Sunday 10:00 - 22:00 HEADERS Site Name, Domain name URL link colours: Header/Logo  Color:Color: Hover Background Colour = Header/General Header Padding = Header/General Header Background Image = Header/Header Media Header Menu link colours, underline (can override general settings),effects = Header/Menu Header Search = Header/Menu To put menu in header. Customize/Menus/ Header Menu Font styles = Typography/Main Menu Header Menu dropdown menu height = Typography/Main Menu:Dropdowns Header Menu colour settings = Header/Menu The Main Styling section controls the colors for the very top of the menu buttons. The Dropdown Styling section controls colors for dropdowns only. Header Height/Menu Position…

Continue ReadingOceanWP Quick Notes, Access Common Settings

How To Turn Off Related Posts in OceanWP

There are 2 settings to check. First, if you have Jetpack installed, be sure to turn it off here.Jetpack/Settings/Traffic/Related posts PS. Jetpack Sitemaps are also here.Jetpack/Settings/Traffic/Sitemaps Second, to turn off Related Posts at the bottom of blog posts in OceanWP, go to Wordpress Customizer/Blog/Single PostElements Positioning/Related Posts To turn off the time stamps on these posts add this in CSS/JStime.published {display:none}

Continue ReadingHow To Turn Off Related Posts in OceanWP

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

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