Have you ever downloaded an Oceanwp demo theme and for some reason it doesn’t look exactly like the demo? Next time you’re having trouble you can try editing the shortcode sections on the home page’s OceanWP settings. Make sure the slider shortcodes match the demo’s slider shortcodes or create ones that match your preference.
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;
}.elementor-accordion-item .elementor-accordion-icon {
font-size: 20px;
}Page ID is from WordPress. This only affects pages. The whole background will be set to this color so you may have to change the font color.
body.page-id-464
{ background-image: none; }
This will make the background black.
To change to another color, add background-color:#FF0000;
Oceanwp Page Title At Top Of Page Settingsfor Background Image etc.
Fonts
Page Title at top of page, font settings
Customizer/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 Title
Style:Background Image
Image: 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 Title
scroll down to Breadcrumbs
Add this piece of css in Custom CSS/JS to hide the clock icon and date stamp in the Related Posts block underneath single blog posts setting. Customizer/Blog/Single Post
/* hide date time in related posts on bottom of posts */
.related-post time.published {display:none;}
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. Find the shortcode and delete it.
That’s all!
/* Single Blog Post Metadata Font Size and Colors */
.single-post ul.meta {
font-size: 16px;
color: #F3EAC7;}
.single-post ul.meta li a {
color: #F3EAC7;
}
.single-post ul.meta li i {
color: #F3EAC7;
}
/* Blog Archive Page Metadata Font Colors */
.blog-entry.post ul.meta {color:#F3EAC7;}
.blog-entry.post ul.meta li a {color:#F3EAC7;}
.blog-entry.post ul.meta li i {color:#F3EAC7;}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.
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 Styling
Scroll to Product Entry: Add To Cart
Woocommerce Description Tab colors on Product Pages
Woocommerce/Advanced Styling
Scroll 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.