The Next Page tag

• 

  gotmaester · Member · Aug 29, 2017 at 10:26 pm

  • Copy link

  I fixed issue 1 above by using the !important tag under hover, focus, active CSS

  color: #ffffff !important;

  if there is a better solution let me know, please.

  Still trying to figure out what the <div class=”mypagenav”> is for, which I ended up not using.

• 

  kathrynwp · Staff · Aug 30, 2017 at 5:08 pm

  • Copy link

  Still trying to figure out what the <div class=”mypagenav”> is for, which I ended up not using.

  Ah, I was suggesting using a container div instead of adding a class to each button, which is the route you took. Both ways are valid. If you’d added the div, you could then target the links within, with selectors like:

  .mypagenav a {
  
  }
  
  .mypagenav a:hover {
  
  }

  The pagination buttons look good to me at the moment. I don’t see a way to remove the !important the way it’s coded now. While it’s something we generally try to avoid in CSS, as long as you don’t need to alter this button class again, it should be OK.

  2. Unable to manipulate text-weight, how can i do that?

  There is a specific weight added to this element in the theme’s original CSS:

  .entry-content a

  That means that to override it, you’d need to target the element with this:

  .entry-content .button-s

  Instead of just

  .button-s

  i can’t put html on the page

  You should be able to post most code in the forums if you use the backticks or code formatting buttons around it.

• 

  gotmaester · Member · Aug 30, 2017 at 5:16 pm

  • Copy link

  thanks, I will try these things out.
  One other questions:

  How do I get a button to stay red when it is on its page? Is this something that would only possible using the div or can it be done with the class?

• 

  kathrynwp · Staff · Aug 30, 2017 at 5:21 pm

  • Copy link

  You could create a separate class for your “current” page’s button (like “button-current”) and target that element along with your hover and other pseudo-classes. Example:

  .button-current,
  .button-s:hover,
  .button-s:focus,
  .button-s:active {
  background: #9c1202;
  color: #fff;
  }

• 

  gotmaester · Member · Aug 30, 2017 at 7:07 pm

  • Copy link

  you are terrific, everything went according to plan. i was able to read between the lines, and make the appropriate addition for font-weight selector (in case anyone is trying to follow this thread).

  .entry-content .button-s, .entry-content .button-current {
  font-weight: 600;
  }

  so i think rather than continue this thread I believe the original issue has been resolved, I am going to start a new thread with a similar issue. So stay tuned, it would be great to have your help on that, too.

  Thanks again :)

• 

  kathrynwp · Staff · Aug 30, 2017 at 7:26 pm

  • Copy link

  A new thread sounds good, this one’s getting pretty long!