Page Builder 
Widgets Bundle 
SiteOrigin CSS 
Installer SiteOrigin Hero: Pagination dots always visible
Hi,
I would like the 3 pagination dots that represent more than one slide to always be visible on mobile and desktop.
I have used the following css and it works fine, other than single dots now appear on all slides even if there is only one.
.sow-slide-nav, .sow-slider-pagination {
opacity: 1 !important;
display: block !important;
}
Is there any custom css that will ensure the pagination dots only appear if there is more than one slide?
Hope that makes sense.
Many thanks!
This is our free support forum. Replies can take several days.
Need fast email support? Get SiteOrigin Premium
Replies
5Hi Aidan,
To ensure the provided CSS only applies when you want it to apply, you should a Widget Class to your Hero widget and prepend the provided CSS selector with that widget Class. This will ensure your CSS will only apply when you want it to appear. To apply a Widget Class, please open the SiteOrigin Hero widget. Head over to the widget styles sidebar and open the Attributes settings group and set the Widget Class as desired.
Hi Alex,
Thanks for getting back to me.
So if I applied ‘morethanone’ for example as the widget class, would the custom css then need to look like following?
#morethanone .sow-slide-nav, .sow-slider-pagination {
opacity: 1 !important;
display: block !important;
}
Kind regards
Hi Aidan.
You’ll need to change #morethanone to .morethanone. . will tell the browser to look for a class while # will tell the browser to look for an id.
Perfect! Thanks for your help!
Bets wishes
Hi Aidan,
Great to hear that helped! :)
Please be sure to post another thread if you have any other questions.
Replies on this thread are closed.
Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.