How to change "newer/older entries" text

• 

  thesmartcookiecook · Member · Sep 14, 2011 at 10:54 pm

  • Copy link
  • Add topic to favorites

  I would like to know how to change the newer entries link to say “Next” and the older entries link to say “Previous.” Is this possible? If so, let me know how. Thank you :)

  Here’s a link to my site if necessary: The Smart Cookie Cook

  The blog I need help with is: (visible only to logged in users)

• 

  devblog · Member · Sep 14, 2011 at 11:47 pm

  • Copy link

  To make that change, you would need to have access to the source code and modify the text of the links… you cannot do that on a wordpress.com hosted blog. That said, and seeing that you have the CSS upgrade, this kludge might be helpful. Add this to your CSS:

  .nav-above {overflow: hidden;}
  
  .nav-above .alignleft a, .nav-above .alignright a {text-indent: -9999px; display: inline-block; width: 100px; position: relative; z-index: 10;}
  
  .nav-above .alignleft:after{content: "Previous"; position: relative; left: -100px; z-index: 1;}
  .nav-above .alignright:before{content: "Next"; position: relative; right: -100px; z-index: 1;}

• 

  thesmartcookiecook · Member · Sep 14, 2011 at 11:53 pm

  • Copy link

  I don’t think that did anything :( Thanks for trying though.

• 

  devblog · Member · Sep 14, 2011 at 11:56 pm

  • Copy link

  Did you save the changes or did you just preview them? If you just preview them, try saving them, in my experience you sometimes have to save the changes for them to really take effect. Also, try adding those changes at the bottom of your CSS.

• 

  thesmartcookiecook · Member · Sep 15, 2011 at 12:16 am

  • Copy link

  Nope, it still didn’t work :/

• 

  devblog · Member · Sep 15, 2011 at 12:21 am

  • Copy link

  You did not copy the entire code… you’re missing the last to selectors:

  .nav-above .alignleft:after{content: "Previous"; position: relative; left: -100px; z-index: 1;}
  .nav-above .alignright:before{content: "Next"; position: relative; right: -100px; z-index: 1;}

• 

  thesmartcookiecook · Member · Sep 15, 2011 at 1:15 am

  • Copy link

  I did copy the whole thing. I did so again just now. It doesn’t seem to have any effect.

• 

  devblog · Member · Sep 15, 2011 at 1:25 am

  • Copy link

  what browser are you using? I’m using Firefox and now it looks fine.

• 

  thesmartcookiecook · Member · Sep 15, 2011 at 1:28 am

  • Copy link

  I’m using firefox too. I don’t see any change to my site at all.

• 

  devblog · Member · Sep 15, 2011 at 1:35 am

  • Copy link

  Below is a screenshot of what I see. Maybe you’re seeing cached pages. If you are using Windows, force reload by pressing Ctrl+F5 or Ctrl+R, if you’re usinga a Mac, do it by pressing Command + R

  

• 

  thesmartcookiecook · Member · Sep 15, 2011 at 1:41 am

  • Copy link

  Oh okay, so it changed the links when you click on an entry I wanted to change the links at the bottom of the site, but you’re saying that’s not possible right?

• 

  devblog · Member · Sep 15, 2011 at 1:52 am

  • Copy link

  I’m sorry, I misunderstood you… It should be possible to use the same technique with those links… give me a few minutes and I’ll get back to you with an answer.

  You can delete the code I previously gave you then.

• 

  devblog · Member · Sep 15, 2011 at 2:03 am

  • Copy link

  Okay, try this:

  .navigation {overflow: hidden;}
  
  .navigation .alignleft a, .navigation .alignright a {text-indent: -9999px; display: inline-block; width: 100px; position: relative; z-index: 10;}
  
  .navigation .alignleft:after{content: "← Previous"; position: relative; left: -90px; z-index: 1;}
  .navigation .alignright:before{content: "Next →"; position: relative; right: -90px; z-index: 1;}

• 

  devblog · Member · Sep 15, 2011 at 2:09 am

  • Copy link

  Forgot to mention that to preserve the same link color, you add the color attribute to both selectors so they read like this:

  .navigation .alignleft:after{color: #0ae; content: "← Previous"; position: relative; left: -90px; z-index: 1;}
  .navigation .alignright:before{color: #0ae; content: "Next →"; position: relative; right: -90px; z-index: 1;}

• 

  thesmartcookiecook · Member · Sep 15, 2011 at 2:09 am

  • Copy link

  Yay it worked! Thank you so much for your help :)

• 

  devblog · Member · Sep 15, 2011 at 2:12 am

  • Copy link

  Guess I typed too slow…

  No problem, glad it worked.

• 

  thesmartcookiecook · Member · Sep 15, 2011 at 2:14 am

  • Copy link

  Haha it’s okay. Luckily, I can actually handle figuring out font colors.