Changing OceanWP Header Social Icon Colors

OceanWP's header gives you the option to enable the social menu in the Customizer. Customizer > Header > Social Menu There are 4 styles under Social Link Style. Simple Colored Minimal Dark Unfortunately, the Colored option are preset and you cannot change it in the interface. BEFORE AFTER That's where a bit of CSS can change the colors to your preference. Go to Customizer > Custom CSS/JS and add this bit of CSS. The outer circle color and the inner icon can have separate colors. Instagram is used as an example here. To change the circle color. .oceanwp-social-menu .colored ul li.oceanwp-instagram a {background-color:#ef00ff !important;} To change center icon color use this bit of CSS. .oceanwp-social-menu .social-menu-inner li a[href*="instagram.com"] ::before {color:#008000 !important;}

Continue ReadingChanging OceanWP Header Social Icon Colors

Force OceanWP To Display Mobile Menu At All Screen Sizes

Do you like the hamburger menu style and want to override the default header menu styles in the Customizer? Customizer > Header > General You can override the display style to always be the 3 vertical bars mobile hamburger icon even on wide desktop screen resolutions. Go to Customizer > Header > Mobile Menu Change the Breakpoints to a 1080p or even 4K screen width if you want.

Continue ReadingForce OceanWP To Display Mobile Menu At All Screen Sizes

OceanWP Woocommerce Color Settings

Some common OceanWP settings for Woocommerce buttons for product and archive pages. OceanWP Woocommerce general button colors.Go to General Options/Theme Buttons To Change Colors of Related Products :Add to Cart button; at bottom of indiv. products pages Woocommerce/Advanced StylingScroll to Product Entry: Add To Cart Woocommerce Description Tab colors on Product Pages Woocommerce/Advanced StylingScroll to Single Product: Tabs (last 1/3 of scroll) Elementor Error when Editing Make sure to try turning shop page to draft, or change shop page temporarily to another page in Woocommerce. Edit in Elementor, then change page back to main store page or even try leaving that setting blank. Woocommerce/Products/Shop page.

Continue ReadingOceanWP Woocommerce Color Settings

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

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