Docs

[wnhorne246]

Hello all,

I’m trying to figure out how to change the color of some navigation controls on my page at http://emilycolin.com/in-the-works/. About halfway down the page I have set up a slider of sorts that has 2 navigation buttons on it (prev and next). I tried to use the Chrome detection tools to find the right CSS to change and it, and this is what I found.

.owl-theme .owl-controls .owl-nav [class*=owl-] {
    color: #fff;
    font-size: 14px;
    margin: 5px;
    padding: 4px 7px;
    background: rgb(0, 69, 100);
    display: inline-block;
    cursor: pointer;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

Now, I was able to change the buttons background color with this, but not the hover over color.

My question is, did I use the right code to modify the primary color or was it overkill, and two, how do I change the background color on hover?

Thanks for your skill and knowledge!

[Christopher]

Hi there,

Your code is correct and it works fine. To change hover state color, add this :

.owl-theme .owl-controls .owl-nav [class*=owl-]:hover {
    background-color: red;
    color: #000;
}

Hope it helps.

[wnhorne246]

Yep, that worked.

[Christopher]

Glad we could help you with this.

[Thai]

If you need anything else please let us know.

[wnhorne246]

There is one more small thing you might be able to help with concerning these buttons. How would I put a small whith border around the buttons.

Here is the CSS markup I found in the plugin’s files.

/*Owl Carousel - Default theme*/
.owl-theme .owl-controls {
    margin-top: 10px;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}
.owl-theme .owl-controls .owl-nav [class*=owl-] {
    color: #fff;
    font-size: 14px;
    margin: 5px;
    padding: 4px 7px;
    background: rgb(0, 69, 100);
    display: inline-block;
    cursor: pointer;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 3px #fff;
}
.owl-theme .owl-controls .owl-nav [class*=owl-]:hover {
    background: rgb(84, 165, 222);
    color: #fff;
    text-decoration: none;
}
.owl-theme .owl-controls .owl-nav .disabled {
    opacity: .5;
    cursor: default;
}
.owl-theme .owl-dots .owl-dot {
    display: inline-block;
    zoom: 1;
    *display: inline;
}
.owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    background: rgb(0, 69, 100);
    display: block;
    -webkit-backface-visibility: visible;
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    -ms-transition: opacity 200ms ease;
    -o-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #666;
}

Thanks

[Rupok]

Hi there,

Thanks for updating. You can try adding this :

.owl-controls .owl-nav .owl-prev, .owl-controls .owl-nav .owl-next {
  border: 1px solid #fff !important;
}

Hope this helps.

Cheers!

[wnhorne246]

Perfect. Thanks.

[Rahul]

You are welcome!

[Author]

Posts