Styling the mojoPortal HTML SlideShow Pager

Back in March of 2011 we added the "Pager" option to the Slide Show feature of the mojoPortal HTML Module. Since that time, we've seen some requests for styling the pager links so here's a simple style we use on this site. It can be adapted to any design and doesn't use any images. To use this CSS, just copy it to one of your skin's .css files and then apply the "prettycyclenav" class to the "Custom CSS Class" option in the HTML module settings. If you want the slide number to be shown within the navigation, add the "withnumbers" class to the "Custom CSS Class" option.

.prettycyclenav .cyclenav {
	margin: 5px 0;
	text-align: center;
.prettycyclenav .cyclenav a {
	text-indent: -9999px;
	line-height: 40px;
	background-color: #A5A5A5;
	width: 14px;
	height: 14px;
	overflow: hidden;
	display: inline-block;
	margin: 0 5px;
	text-decoration: none;
.prettycyclenav.withnumbers .cyclenav a {
	padding: 3px;
	font: 14px/1 'Rationale', Charcoal, serif;
	text-indent: 0;
	color: #fff;
.prettycyclenav .cyclenav a:focus,
.prettycyclenav .cyclenav a.activeSlide {
	background-color: #e26917;

.prettycyclenav .cyclenav a:hover {
	background: #636363;
View User Profile for Joe Davis Joe is the Founder and Managing Director of i7MEDIA. His passion is finding creative solutions to complex problems. He is married to Devyn and has three kids; Elijah, Ruth and Hannah. He is a Christian and life-long Boy Scout. When he is not at work, he's working his small homestead farm, or volunteering with the Boy Scouts or his church.