Using OceanWP With Elementor – Tips

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 Wordpress 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} Elementor Text Editor Widget Not Changing Font Settings Have you ever run into problems with the Elementor Text Editor Widget not being able to change the font size, line spacing etc.? At first I investigated whether there was a conflict with the theme but that didn't appear to be the case. Even setting all fonts back to default and disabling Elementor fonts in Elementor settings didn't work. This tiny piece of css added to Wordpress/Customizer/Custom CSS did the trick. .elementor-text-editor p{ font-size: inherit; line-height: inherit; letter-spacing: inherit; } Force Elementor Pro Button Colors Using OceanWP…

Continue ReadingUsing OceanWP With Elementor – Tips

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

Change Icon Size In Elementor Toggle

How To increase the icon size within the Elementor toggle widget Cut and paste this into the Wordpress Customizer/Custom CSS. Change the icon size by adjust the font size. This will be global changes and affect all elementor toggles on the site. To change it for just one toggle widget, go to the widget's Advanced tab and paste into Custom CSS field. .elementor-toggle .elementor-tab-title.elementor-active .elementor-toggle-icon-opened { display: block; font-size: 20px; } .elementor-toggle .elementor-tab-title .elementor-toggle-icon .elementor-toggle-icon-closed { display: block; font-size: 20px; } How To increase the icon size within the Elementor accordion widget .elementor-accordion-item .elementor-accordion-icon { font-size: 20px; }

Continue ReadingChange Icon Size In Elementor Toggle

OceanWp Title Settings

Oceanwp Page Title At Top Of Page Settingsfor Background Image etc. Fonts Page Title at top of page, font settingsCustomizer/Typography/Page Title Using the Customizer/Typography/H1 does not affect font family on page title. Page Title Background Image and Background banner HEIGHT General Options/Page TitleStyle:Background ImageImage: position, repeat, size, height, overlay opacity and colour, (this only seems to work for new pages from a fresh install, doesn't work for imported sites from old Oceanwp sites) To adjust height of the title background; go to Padding and change the padding top and bottom. Can be adjustable for desktop and mobile. Show or hide on Devices Hide Breadcrumbs or Title Customizer/General Options/Page Titlescroll down to Breadcrumbs

Continue ReadingOceanWp Title Settings

How To Get Rid Of OceanWP Home Page Slider

Have you ever tried to get rid of or just temporarily disable the home page slider on certain Oceanwp demo themes like the "Personal" theme template? Ocean WP uses a slider shortcode to embed on the home page. You can find the sliders in the Wordpress Dashboard column button called Posts Slider. You will see one called "Home Slider" Just go to the home page and the OceanWP Settings. Click Shortcodes in the left sidebar or the <> icon in Gutenberg Page settings. Find the shortcode and delete it.That's all!

Continue ReadingHow To Get Rid Of OceanWP Home Page Slider