Setting OceanWP Full Screen Blog Layout Margins

I discovered a problem when setting up a new site with OceanWP when setting pages to full screen layout via Customizer > Blog > Single Post. The sides, top and bottom had margin of 0 by default. The Customizer settings don't allow you to set margins. I had to insert this piece of css in Customizer > Custom CSS/JS. .single-post.content-full-screen .content-area { max-width: 90% !important; margin: 35px auto !important; } The margin: 35px sets the top and bottom margins.

Continue ReadingSetting OceanWP Full Screen Blog Layout Margins

OceanWP Tips:Quick Reference Guide

Demo Templates | Headers | Styling & Colors | Layout & Design | OceanWP Widgets | Woocommerce Settings | Misc. OceanWP Settings OceanWP is robust theme with plenty of options and customizability but it's settings in the Customizer aren't always the easiest or most intuitve to find. Occasionally, a bit of custom CSS is needed nudge OceanWP to do what you want. I have been using the theme for several years and created this cheat sheet of notes and CSS examples as a handy reference to help make the changes I want quickly. Oceanwp Website Demo Themes Tips First Customizations To A New OceanWP Demo Site Here are the exact places to edit changes to the default settings immediately after installing a new OceanWP demo Template. MENU COLORS Edit Menu colours first when customizing a theme via the Wordpress Customizer. Header > Logo Header > Menu (main colour changes are here) Typography > Main Menu BODY COLOURS & FONT STYLES General Options > General Styling Typography > Body (OceanWP default font is Open Sans) Typography > Main Menu MENU POSITIONHeader > Menu HIDE THE OCEANWP PAGE TITLE ON TOPAppearance > Customize > General Options > Page Title and set the…

Continue ReadingOceanWP Tips:Quick Reference Guide

Set Number Of Words In OceanWP Category Or Other Archive Pages

In WordPress, the number of words displayed on category or other archive pages can be set in a few different ways. If there is content in the Wordpress Excerpt field, that content will be used. In OceanWP, the number of words displayed can be set using the Excerpt Length slider in the OceanWP Customizer > Blog > Blog Entries section. This allows you to control the length of the excerpt displayed on archive pages, giving you the ability to customize the amount of content shown to your users. Wordpress' default is 55 words for archive pages.

Continue ReadingSet Number Of Words In OceanWP Category Or Other Archive Pages

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*=""] ::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