Nicely Format a JQFx Slide Pager

The Views jQFX module provides some interesting effects that can be applied to Views. Most notably is the Slider function – which acts just like the Views Slideshow, without causing IE 8 to crash.

Onto this you can add a pager – which is pretty boring by default. But here is some CSS that makes it a little prettier.

You can add a new css file into your themes .info file, or just append this to any style sheet included.

.views-jqfx-controls-bottom {
    position: absolute;
    z-index: 500;
    top: 270px;
    margin-left: 374px;
    background: url('../images/bg-nav.png') no-repeat 0 0;
    width: 149px;
    height: 34px;
    padding-left: 17px;
    padding-top: 7px;
}
.views-jqfx-controls-bottom .pager-item {
    padding: 0;
    overflow: hidden;
    float: left;
    width: 21px;
    height: 21px;
    margin-right: 6px;
}
.views-jqfx-controls-bottom .pager-item a {
    text-indent: -9999px;
    display: block;
    width: 21px;
    height: 21px;
    background: url('../images/bg-page.png') no-repeat 0 bottom;
    float: left;
}
.views-jqfx-controls-bottom .active-slide a, .views-jqfx-controls-bottom .pager-item a:hover {
    background: url('../images/bg-page.png') no-repeat 0 0;
}

and also add the attached images to the themes images folder.

The only thing you may have to change is the top value to position the pager correctly up/down the page.

Leave a comment

Your email address will not be published. Required fields are marked *