By default, YUI 2 Paginator renders the control elements as shown below -
You may want to use images for the control elements instead of the text like "first", "last".
This can be achieved in the following way.
While creating the paginator, provide some additional parameters (shown in red font below).
var paginator = new YAHOO.widget.Paginator({ rowsPerPage:ROWS_PER_PAGE,
firstPageLinkLabel: " ",
nextPageLinkLabel: " ",
lastPageLinkLabel: " ",
previousPageLinkLabel: " ",
template : "{FirstPageLink} {PreviousPageLink} Page {CurrentPageReport} {NextPageLink} {LastPageLink}",
containers : ['pagingDiv', 'pagingDiv2'] })
You should have image icons for First, Previous, Next and Last. You need to have one set of icons for Active controls and another set for Disabled controls.
Then you need to use the following CSS styles -
.yui-pg-first{background: transparent url(first_ico.gif) no-repeat; width:19px}
.yui-pg-last{background: transparent url(last_ico.gif) no-repeat; width:19px}
.yui-pg-next{background: transparent url(next.gif) no-repeat; width:19px}
.yui-pg-previous{background: transparent url(prev.gif) no-repeat; width:19px}
.yui-skin-sam span.yui-pg-first {background: transparent url(firstfade_ico.gif) no-repeat; width:19px}
.yui-skin-sam span.yui-pg-last {background: transparent url(lastfade_ico.gif) no-repeat; width:19px}
.yui-skin-sam span.yui-pg-next {background: transparent url(nextfade.gif) no-repeat; width:19px}
.yui-skin-sam span.yui-pg-previous {background: transparent url(prevfade_ico.gif) no-repeat; width:19px}
.yui-skin-sam a.yui-pg-first:link, .yui-skin-sam a.yui-pg-first:visited, .yui-skin-sam a.yui-pg-first:active, .yui-skin-sam a.yui-pg-first:hover, .yui-skin-sam a.yui-pg-previous:link, .yui-skin-sam a.yui-pg-previous:visited, .yui-skin-sam a.yui-pg-previous:active, .yui-skin-sam a.yui-pg-previous:hover, .yui-skin-sam a.yui-pg-next:link, .yui-skin-sam a.yui-pg-next:visited, .yui-skin-sam a.yui-pg-next:active, .yui-skin-sam a.yui-pg-next:hover, .yui-skin-sam a.yui-pg-last:link, .yui-skin-sam a.yui-pg-last:visited, .yui-skin-sam a.yui-pg-last:active, .yui-skin-sam a.yui-pg-last:hover, .yui-skin-sam a.yui-pg-page:link, .yui-skin-sam a.yui-pg-page:visited, .yui-skin-sam a.yui-pg-page:active, .yui-skin-sam a.yui-pg-page:hover
{text-decoration: none}
Make sure that you give the correct image name for each element.