[Drobb]

Bonjour!

I’m able to style the pagination buttons a little bit with this:

.pagination span.current {
border-radius: 5px;
}

.pagination a.inactive {
border-radius: 5px;
}

And if I want to I can even customize the color like so:

.pagination span.current {
background-color: blue;
border-radius: 5px;
}

Or the color of the text like so:
.pagination span.current {
color: blue;
border-radius: 5px;
}

But if I want to give the button a more complex color, like this:

.pagination span.current {
background-color: #eedddd;
border-radius: 5px;
}

The color is processed/filtered somehow, perhaps with opacity, and I can’t figure out how to clear that. Also I’m guessing that the inactive-button image is based on the current-button color. Basically I’m just over my head and I have no idea what I’m doing. ; )

Can someone please help me to customize the color(s) of the pagination buttons?

Website: davidweiss.net/blog

[Zed]

Hi,

Try making your CSS more specific, for example by adding body in front of the rules that don’t apply.

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[Drobb]

Hi Zed — Sorry, just to close the loop on this one, I visited that page several times and I just couldn’t follow it. Then I returned some bare-bones troubleshooting and realized that everything I posted above is working just fine. That color I used, #eedddd, looks “processed/filtered” just because that’s the way this color looks. I tried with many other colors and everything works as expected. So, others may be able to use the code above to customize their pagination buttons as they see fit.

[Drobb]

Ok I’m psyched. Just sharing the css I’m going to go with:

.pagination span.current {
border-radius: 5px;
font-family: Littlebit-Dotty2;
color: black;
background-color: #eedddd;
border: 1px solid #CCC;
font-size: 1.5em;
line-height: 1.8em;
height: 1.9em;
width: 1.9em;
}

.pagination a.inactive {
border-radius: 5px;
font-family: Littlebit-Dotty2;
color: #0d85cc;
background-color: #e1e5e4;
font-size: 1.5em;
line-height: 1.8em;
height: 1.9em;
width: 1.9em;
}

.pagination a.inactive:hover {
border-radius: 5px;
font-family: Littlebit-Dotty2;
color: black;
background-color: #ec9929;
font-size: 1.5em;
line-height: 1.8em;
height: 1.9em;
width: 1.9em;
}

A few notes:

The first block is the current active page, the second targets the inactive pages, and the third is the hover state. line-height, height, and width are only necessary if you want to tweak the font-size; if you tweak the font-size without setting these other parameters, the box size will change as well.

Thanks again for a great theme!

Website: davidweiss.net/blog

[Author]

Posts