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;
}