OceanWP Top Menu Color Settings
Header menu colour settings. Header/MenuThe Main Styling section controls the colors for the very top of the menu buttons. The Dropdown Styling section controls colors for dropdowns only.
How Center Or Style Ninja Forms Required Fields Message
There is no setting for aligning Ninja Forms' required fields message in Wordpress or Elementor. You can change the style or alignment with a bit of CSS. Or, if you want to hide it use the same code but use "display:none" instead of text-align. CHANGE THIS: TO THIS: In your theme's Customizer > Custom CSS add this. .nf-form-fields-required {text-align:center;} Or if you are using Elementor, you can put this in the Ninjaform widget's Advanced > Custom CSS section. selector .nf-form-fields-required {text-align:center;}
Hiding Woocommerce Description Tabs In OceanWP
Are you building a simple Woocommerce store using OceanWP? I have a simple store where I just want the short description area on top without the Description, Additional Information and Reviews tabs. The easiest way to do that is to hide those sections using a bit of css. In Wordpress go to Appearance/Customize/Custom CSS/JS and add this piece of css. .woocommerce div.product .woocommerce-tabs { display: none; }
Centering An OceanWP Footer Widget Examples
CENTERING OCEANWP FOOTER WIDGETS Icons may not align. Centering Social Icons #footer { text-align: center; } #footer .owp-social-share li { float: none; display: inline-block; } #footer-widgets .footer-box .widget-title { border: 0; padding: 0; } Centering Contact Info Widget #footer { text-align: center; } #footer .widget-oceanwp-contact-info li { float: none; display: inline-block; } #footer-widgets .footer-box .widget-title { border: 0; padding: 0; } Change border color of contact icons. #footer-widgets .contact-info-widget i {border-color:#000}
How To Add Google Analytics or Google Tag Manager In Your OceanWP Site
While there are numerous Google Analytics and Google Tag Manager plugins for Wordpress, there is a simple way to add the Google analytics or tag manager code right within OceanWP with Ocean Hooks. This example is for Google Tag Manager but Analytics first code segment goes in WP Head and because the segment should be at the top of <body> Before Top Bar is where the second code piece goes. You can use the same method for other themes that support hooks like Genesis, Astra, Generatepress and others.
Customizing The Header Background Image in Astra Theme For WordPress
Astra theme for Wordpress, at least the free version does not allow background images in the header through the customizer. In order to add a background image to the header you will need to add some css. Go to Appearance/Customize/Additional CSS. .main-header-bar {background-image: url("http://yoursite.com/wp-content/uploads/2017/10/your-header-logo.png");background-repeat: no-repeat; } Here's a bit of CSS that addds a drop shadow and background color to the header..main-header-bar {background: #FFBC00;box-shadow: 0px 3px 3px #b8b8b8;background-image: url("http://yoursite.com/wp-content/uploads/2017/10/your-header-logo.png");background-repeat: no-repeat; }
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}
Adding Underline Links When Hover in OceanWP
Looking to add underline when hovering over a link the body of a post? After trying a bunch of css variations this is the one that works. Go to Appearance/Customize/Custom CSS/JS and add this piece of css. body.single-post .entry-content a:hover { text-decoration: underline; } For pages including home page:.single-page-article a {text-decoration:underline;} Set majority of site link colors in OceanWP Customizer/General Options/General Stylingexample Elementor link customization in CSS/JS.h3.elementor-image-box-title a {text-decoration:none} For underline links on your blog posts listing page and archives use this..blog-entry-summary a:link {text-decoration:underline}