Custom CSS/JS

  • Resolved llamasquishy

    (@llamasquishy)


    6 years ago

    Hello,

    New to OceanWP and I’m running into a CSS issue. I have recently installed a child theme as per the instructions on the OceanWP site. I also have the Ocean Extra plugin installed.

    When I add custom CSS to the Custom CSS/JS section in the Theme Customizer, it seems to be overridden by another stylesheet. I think maybe the order of stylesheets is wrong, but I do not know how to fix that.

    #site-logo #site-logo-inner a:hover img {
    -moz-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
}

.page-header .page-header-title, .page-header.background-image-page-header .page-header-title {
	  color: #000000;
}

    The first part is my attempt to get the logo to stay at 100% opacity on hover. The second one is a test at changing the color of my page header from white to black. When I inspect the element in Chrome, it says that my #000000 is being overridden by #ffffff. It shows that “<!– OceanWP CSS –>” comes AFTER my “wp-custom-css” style.

    Any help is appreciated! I might be doing something wrong, but I just started building this site a couple days ago and I haven’t changed much, and I haven’t touched any PHP or CSS files. Thanks!

    Alex

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter llamasquishy

    (@llamasquishy)

    6 years ago

    I added some more custom CSS to the Custom CSS/JS section of the customizer, and it looks like some things are working. If I want to change the padding of the dropdown-menu in the header, I can do that just fine. I can also change the colour and background colours of the dropdown-menu. I guess the main issue I’m running into is that I can’t figure out how to make my logo NOT go to 60% opacity on :hover.

    The code available on
    https://docs.oceanwp.org/article/541-remove-logo-hover-effect
    seems to be overwritten by another stylesheet when I add that code to the Customizer.

    Alex

    Thread Starter llamasquishy

    (@llamasquishy)

    6 years ago

    Fixed with:

    #site-header.center-header #site-navigation-wrap .middle-site-logo:hover img {
  -moz-opacity: 1.0;
  -webkit-opacity: 1.0;
  opacity: 1.0;
}
Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Custom CSS/JS’ is closed to new replies.