Change arrows

Have at look at the following FAQS page:
https://edgewebpages.com/faqs/

Under ‘Useful CSS Style for Slide Anything‘ there is a section called ‘Customise the Slider Previous/Next Arrows‘.

Ok, below is the CSS I use for the pagination dots.
What you need to do is replace ‘.sa_owl_theme‘ with the CSS ID of your slider (e.g. ‘#slider_123’)
With CSS Specificity, CSS IDs take priority over CSS classes:
https://www.w3schools.com/css/css_specificity.asp

.sa_owl_theme .owl-dots {
    position:absolute;
    width:100%;
    padding:10px 0px 0px !important;
    bottom:-22px !important;
    text-align:center !important;
    font-size:12px !important;
    line-height:12px !important;
}
.sa_owl_theme .owl-dots .owl-dot {
    display: inline-block !important;
}
.sa_owl_theme .owl-dots .owl-dot span {
    display:inline-block !important;
    border-style:none !important;
    background-color:rgba(0,0,0,0.2) !important;
    width:10px !important;
    height:10px !important;
    border-radius:50% !important;
    margin:0px 3px !important;
    transition:all .3s ease-in-out !important;
    -webkit-transition:all .3s ease-in-out !important;
    -moz-transition:all .3s ease-in-out !important;
    -o-transition:all .3s ease-in-out !important;
}
.sa_owl_theme .owl-dots .active span {
    background-color:rgba(0,0,0,0.5) !important;
}
.sa_owl_theme .owl-dots .owl-dot span:hover {
    background-color:rgba(0,0,0,0.5) !important;
}

• This reply was modified 5 years, 3 months ago by simonpedge.