An issue with the way the page indicator on archive pages

  • Resolved green4547

    (@green4547)


    1 year, 8 months ago

    Hi there,

    I have an issue with the way the page indicator appears at the very bottom of the page: because boxes are all in dark blue, it makes it difficult to tell on what page you are.

    Would it be possible to provide me with a CSS code that does the followings?
    – it changes the color of the boxes from dark blue to dark green
    – hovering changes the color of the box to a lighter shade
    – the box of the page on which you are is colored in a different shade

    I hope the above explains clearly what I would like to do.
    Thank you in advance for your support.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi @green4547,

    Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .nav-links .page-numbers {
  background-color: #00542e;
}
.nav-links .page-numbers:hover {
  background-color: #0ac149;
}
.nav-links .page-numbers.current, .nav-links .page-numbers:not(.dots):hover {
  background-color: #0ac149;
}
    Thread Starter green4547

    (@green4547)

    Hi @kharisblank ,

    Thank you for the code. I guess the code may need a small change. I would appreciate your further assistance with this.

    The site has the code below, which is exactly what you gave me except the color code (rgba). Could you check how the page indicator works on the site, which I hope will show you what part of the code needs changing.

    In addition, the code worked less on smaller screens (iPhone and iPad). Can you check that as well?

    Thanks!

    .nav-links .page-numbers {
  background-color: #00542e;
}
.nav-links .page-numbers:hover {
  background-color: #0ac149;
}
.nav-links .page-numbers.current, .nav-links .page-numbers:not(.dots):hover {
  background-color: rgba(106, 168, 79,0.60);
}

    Hi @green4547,

    Your code worked well when I checked it with my desktop browser. Ref: https://s11.gifyu.com/images/SWEKC.gif

    Thread Starter green4547

    (@green4547)

    Hi @kharisblank,

    Thank you for getting me back with the link below. It helps me a lot to explain what I would like to have.

    https://s11.gifyu.com/images/SWEKC.gif

    When the pointer is on “18” and “>”, I would like them to be in color different from that of “1”.

    Also, when the pointer is on “dots”, it does not have to change its color. Currently, it changes the color to #0ac149.

    I hope the above clarifies my request.
    Best,

    Hi @green4547,

    Thank you for getting back along with extra details.

    Try adding this CSS code:

    .nav-links .page-numbers.dots:hover {
  background-color: #00542e;
}

.nav-links .page-numbers:not(.dots):not(.current):hover {
  background-color: #0ac149;
}
    Thread Starter green4547

    (@green4547)

    Hi @kharisblank ,

    Thank you for the code. It worked great!

    Best,

    Thread Starter green4547

    (@green4547)

    Hello again @kharisblank ,

    One more thing to ask. On smaller screens (iPhone and iPad), the code works only partially. It may be the code below that does not work on smaller screens.

    .nav-links .page-numbers:not(.dots):not(.current):hover {
  background-color: rgba(10, 193, 73,0.3);
}

    Can you help me with this?

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘An issue with the way the page indicator on archive pages’ is closed to new replies.