Customize colors of the page links

Hello @sankalan

Unfortunately, the Customiser doesn’t have options for this at the moment, but you can easily change these with a little bit of CSS. It goes something like this —

// modify current page

.page-links .current {
  color: #fff;
  --border-color: #fff;
  background: #fff;
}

// modify hover state

.page-links a:hover {
  --border-color: #fff;
  color: #fff;
}

Let me know if this works :). Of course, replace the #fff values with the colours you wish.

Thank you!

The hover state’s “border-color” change is not working properly. I’m doing this:

`.page-links .current {
color: #000;
–border-color: #b1c0d0;
background: #b1c0d0;
}
.page-links a:hover {
–border-color: #b1c0d0;
color: #718595;
}

The default color (from the color scheme) seems to overlay with the border color.

Hi @sankalan

Oops, totally didn’t see the shadow there as well.

Try adding a box-shadow attribute to the hover modifier —

.page-links a:hover {
  box-shadow: 0px 0px 0px 1px #fff;
}

Let me know if this works things out.

Thanks!

That worked! Awesome!! Thank you so much.

You’re very welcome, @sankalan! 🙂

I will keep testing the free theme, and if it works great for my sites, I will upgrade. It is one of the finest themes I have used so far.

Very happy to hear that, @sankalan! 🙂 You’ll see that we’ve gone quite the length to make sure that the experience is as smooth and lean as possible.
We’ll be ready for you when you upgrade! 🙌

Have a happy week!