customizing Slider buttons

Hi, regarding your first request, there is unfortunately not a way to achieve this easily – the options you have the slider arrows are either hidden or visible. I’m not saying that it’s not possible, but would take some time and effort (and some clever JavaScript/jQuery coding) to work it out.

You can customise the pagination dots using the following CSS:
#slider_id .owl-pagination .owl-page span {
background-color:#ff0000 !important;
}
#slider_id .owl-pagination .active span {
background-color:#0000ff !important;
}
Replace “#slider_id” with the CSS ID of your slider.
This will display red dots, with the active dot being blue.

You can customise the slider arrows using the following CSS selectors:
#slider_id .owl-buttons > div {
/* CSS HERE */
}
#slider_id .owl-buttons .owl-prev {
/* CSS HERE */
}
#slider_id .owl-buttons .owl-next {
/* CSS HERE */
}
Replace “#slider_id” with the CSS ID of your slider.

As for additional styling you can completely change arrow icons with FontAwesome library.
E.g. my CSS:

#slider_1068 .owl-nav .owl-prev {
    background: none !important;
}
#slider_1068 .owl-nav .owl-next {
    background: none !important;
}
#slider_1068 .owl-nav .owl-prev:after {
    color: #747474 !important;
    content: "\f053";
    font-family: FontAwesome;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}
#slider_1068 .owl-nav .owl-prev:hover:after {
    color: #ccc5bf !important;
}
slider_1068 .owl-nav .owl-next:after {
    color: #747474 !important;
    content: "\f054";
    font-family: FontAwesome;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}
#slider_1068 .owl-nav .owl-next:hover:after {
    color: #ccc5bf !important;
}

Hi simonpedge & antkh,

I am a total amateur so please forgive me the trivial question – where exactly put this code? Where is the file that needs to be modified?

Thank You in advance. Great plugin!

If you click on “Appearance -> Editor” within the WordPress Dashboard you will be able to edit your them’s “style.css”. You really want to create a child theme before you do this though, and there is plenty of documentation on the web on how to do this (and why you should always use a child theme).

Alternatively, you can install the “Simple Custom CSS” plugin:
https://www.ads-software.com/plugins/simple-custom-css/
This will allow you to enter new CSS code.

Hi simonpedge
sorry, I had to leave for a few days.
Thank You for the answer. I installed “Simple Custom CSS”. For some reazon this does not work:

#slider_2118 .owl-pagination .owl-page span {
background-color:#ff0000 !important;
}
#slider_2118 .owl-pagination .active span {
background-color:#0000ff !important;
}

the pagination is still black
…but for example the code of the antkh works. Maybe this is because of my theme, page builder, or… any my mistake. I will be very grateful for any hint. Anyway, I’ll buy Slide Anything. Best regards.

Hi, following this because it’s not working for me either. I took the exact CSS, added the !important code into my Child CSS and it’s not overriding your CSS. Thoughts? I used your code above as well and it’s not even triggering it.

the css for the arrows work, but not for the page dots. any idea why? thanks!