How do I change the color of (page number) buttons

[jimmyboy]

Anyone have an idea? I want to change the background color too. Any way to do without messing up the entire scheme?

[Chris]

Open up the Advanced Styles & CSS in admin panel


then expand the Body(Content) branch on the Visual Editor tab then open the Action
bars and in there you'll see a Pagination branch. Pop that open and you'll see settings to change forecolor, background color and hover

[jimmyboy]

Thank you, I appreciate that. Now the only problem I have is the border color of those particular buttons. Where can change it? I see the text color, the background color and the hover color, but an option to change the border color seems to be missing.

[Chris]

The border-color can be changed on the much more advanced Stylesheet Tab next to that Visual Tab, the problem is that it can be different for every theme so there is no way for me to tell you what it looks like and where to exactly locate it so this easiest way would be to just add a new styling rule at the bottom of it all which will override the styling rule further up.

.ui-pagination li>a {border-color:hotpink;} /* normal state */
.ui-pagination li>a:hover {border-color: transparent;} /* hover state */
.ui-pagination li.state-selected>a {border-color: limegreen;} /* selected state */
.ui-pagination li.state-disabled>a {border-color: #f00;} /* disabled state */


change colors to ones that work for you

SPOILER: Click to show

for reference here are the rules for the "Version 4 Colors" theme here on support that starts at line 214 :

.ui-pagination{display:inline-block;overflow:hidden;}
.ui-pagination li{cursor:pointer;list-style:none;float:left;margin-right:2px;}
.ui-pagination li:last-child{margin-right:0px;}
.ui-pagination li>a,.ui-pagination li>div{border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;font-weight:bold;text-decoration:none;background-color:#efefef;border:1px solid #a4a4a4;color:#000000;display:inline-block;padding:4px 5px;}
.ui-pagination li>a:hover,.ui-pagination li>div:hover{border-style:solid;text-decoration:none;background-color:#efefef;color:#000000;border-color:#484848;}
.ui-pagination li.state-selected>a{border:0px solid transparent;background-color:#000000;color:#efefef;padding:5px 6px;cursor:default;}
.ui-pagination li.state-disabled>a{cursor:default;padding:4px 5px;border-width:1px;border-style:solid;opacity:.5;filter:alpha(opacity=50);}
.ui-pagination li.state-disabled>a:hover{background-color:#efefef;border-color:#8f8f8f;}

[jimmyboy]

Thank you..I'm gonna override it. I'm using the default them by the way.