Heading and Title Cheat Sheet For Oceanwp

Top Menu Menu HeightCustomizer > Header > General > Menu > Height Sticky Header HeightSticky Header > Sticky Height Header Menu Font SizeTypography > Main Menu > Font Size Headers Header Border BottomHeader > General > Style > turn off Header Border Bottom Sticky Header Drop ShadowSticky Header > Sticky > no shadow when scrolling Sticky header height: Sticky Header Header Post Title NameBlog > Single Post > Page Header Title (blog or Post Title) BreadcrumbsTypography > Breadcrumbs General Options > Page Title > Breadcrumbs Page Title= the place where "Blog" and breadcrumbs are. Align Breadcrumbs with this css. .site-breadcrumbs {text-align:left;font-weight:bold;} .page-header-title {color:#001ef2; } Underneath post photo: blog post title .single-post-title entry-title {display:none;}

Continue ReadingHeading and Title Cheat Sheet For Oceanwp

Header Search Icon Colors and Size

Ever have problems setting the color for the header search icons? Normally, search box setting are in Customizer > Header > Menu > Search Icon. However, the icon colors need a little bit of css. Try the following and change the colors to your preference. You can change the size as well but going too large may break your menu height adjustments. #site-header i.icon-magnifier { color: #fff; font-size:120%; font-weight:bold; } #site-header i.icon-magnifier:hover { color: #ffff19; } Source: Auto Draft

Continue ReadingHeader Search Icon Colors and Size

Change OceanWP Color and Fonts In Blog Post Metas

.single-post ul.meta { font-size: 16px; color: #808080;} .single-post ul.meta li a { color: #808080; } .single-post ul.meta li i { color: #808080; } / Blog Archive Page Metadata Font Colors */ .blog-entry.post ul.meta {color:#808080;} .blog-entry.post ul.meta li a {color:#808080;} .blog-entry.post ul.meta li {color:#808080;} .blog-entry.post ul.meta li i {color:#808080;} Edit and add this piece of CSS to OceanWP's Custom CSS/JS section in the Wordpress Customizer. Edit the color in this code. You can also add font family here as well.

Continue ReadingChange OceanWP Color and Fonts In Blog Post Metas

How To Display Tags on WordPress Pages With OceanWP Hooks For SEO

OceanWP allows you to position a post's tags in different places in the Customizer's Single Post section by dragging the Tags Element position. For SEO purposes I usually put it near the end of the post. Google recognizes tags as keywords on a page and for articles where it's difficult to fit the keyword in the content but still want to include a valuable keyword, tags are a great way to do it. You can see a page using this technique on an automatic pool cover cost page I created. It's the code at the very bottom of the page with TAGS in caps. Also, for less competitive keywords tag and category pages can show up in the serps. Make sure there are text excerpts included in these archive pages so Google can recognize there is some content. Here is a quick step-by-step guide will walk you through the process of installing and configuring OceanWP with a simple Wordpress tags plugins and a php code snippet to display tag links on your WordPress pages for SEO. Step 1: Install the "Pages with Category and Tag" Plugin Log in to your WordPress dashboard. Go to "Plugins" > "Add New". Search for…

Continue ReadingHow To Display Tags on WordPress Pages With OceanWP Hooks For SEO

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