oceanwp css

Setting OceanWP Full Screen Blog Layout Margins

Read more about the article 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

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}

Continue ReadingCentering An OceanWP Footer Widget Examples

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}

Continue ReadingEditing OceanWP Footer Widget Button Link Colors

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}

Continue ReadingAdding Underline Links When Hover in OceanWP

Force Elementor Pro Button Colors

Using OceanWP and Elementor Pro I added a popup button in the footer widget area. Even after turning off theme control over Elementor colors in Elementor>Settings>Disable Default Colors, the text colours were not correct. Here is what I did to over ride any color settings other plugins may be inserting. This may be a bit sloppy but put this in the OceanWP Custom CSS/JS section. /* Footer Link Colours */ a.elementor-button-link.elementor-button.elementor-size-sm {color:#ffffff !important} a.elementor-button-link.elementor-button.elementor-size-sm:hover {color:#282828 !important} UPDATE Well, it looks like I found the problem. Uploading some of the OceanWP Pro templates inserts CSS into the Customizer. Found this when I scrolled up the Custom CSS/JS section so look in the CSS section if you're experiencing color wonkiness. /* Footer */ #footer-widgets .footer-box { text-align: center; } #footer-widgets .social-widget .style-light li a, #footer-widgets .social-widget .style-dark li a, #footer-widgets .social-widget .style-colored li a { background-color: #263036; color: #708e9f; border-color: #263036; width: 40px; height: 40px; line-height: 40px; } #footer-widgets .social-widget .style-light li a:hover, #footer-widgets .social-widget .style-dark li a:hover, #footer-widgets .social-widget .style-colored li a:hover { background-color: #0eb290; color: #fff !important; border-color: #0eb290 !important; }

Continue ReadingForce Elementor Pro Button Colors
Older Posts