I have noticed that the back color of current page button is same as back color of first and last buttons. This is very confusing when end user tries to know the current page number. You can see this in following screen shot:
https://goo.gl/xXHgJD For the theme being used on YAF website, I noticed the following CSS. It contains two specifications for back color, and the first one is the correct back color. So, removing the second back color specification will fix this issue.
.yafnet a.pagelinkfirst,
.yafnet a.pagelinklast {
text-decoration: none;
background: #f5f5f5;
background: #e0e0e0;/*this is NOT NEEDED*/
border: 1px solid #444444;
padding: 1px 3px 1px 3px;
margin-right: 2px;
color: #000090;
}
.yafnet a.pagelink {
text-decoration: none;
background: #f5f5f5;
border: 1px solid #444444;
padding: 1px 3px 1px 3px;
margin-right: 2px;
color: #000090;
}
NOTE: Other themes will need to changed so the first and last links have same back color as the number pager buttons.
Also, another simpler solution is to remove the CSS for
.yafnet a.pagelinkfirst,.yafnet a.pagelinklast and instead add these classes to
.yafnet a.pagelink as shown below, since all pager buttons should be identically styled.
/*.yafnet a.pagelinkfirst,
.yafnet a.pagelinklast {
text-decoration: none;
background: #f5f5f5;
background: #e0e0e0;
border: 1px solid #444444;
padding: 1px 3px 1px 3px;
margin-right: 2px;
color: #000090;
}*/
.yafnet a.pagelink, .yafnet a.pagelinkfirst,
.yafnet a.pagelinklast {
text-decoration: none;
background: #f5f5f5;
border: 1px solid #444444;
padding: 1px 3px 1px 3px;
margin-right: 2px;
color: #000090;
}