Need help? Check out our Support site, then


Change "older posts" link wording

  1. Hi Guys!

    I wonder if it's possible to change the wording on the "older posts" "newer posts" links though CSS?
    I'd like to make them read something else, like "older features"/"newer features", for instance

    Any ideas?
    Cheers and thanks again!! :)

    The blog I need help with is tiagodovale.com.

  2. Actually, just the "older posts" one: I never see a "newer posts" link :)
    Cheers!

  3. thesacredpath
    Staff

    You can use the following to do that:

    #primary .nav-previous {
        visibility: hidden;
    }
    
    #primary .nav-previous a:before {
        content: "← Some Text";
        visibility: visible;
    }

    This works for the next/newer posts link.

    #primary .nav-next {
        visibility: hidden;
    }
    
    #primary .nav-next a:after {
        content: "Some Text →";
        visibility: visible;
    }
  4. Hi!
    Thank you so much for your attention!

    This solves the navigation when I'm at a Post page.
    What I'm trying to fix, though, aren't those navigation links:

    It's the "Older Posts" link at the home page/blogroll, which remains unchanged with this code..

    Any ideas?

    Thanks you so much, again!
    Cheers!!

  5. thesacredpath
    Staff

    Ah,that is the RSS widget in the footer widget area. If you do not want that there, then remove it from that footer area at appearance > widgets.

  6. thesacredpath
    Staff

    Changing the working on the links in the RSS widget would be difficult since each time you made a new post, you would have to edit the CSS. My suggestion would be to get rid of the RSS widget and then use the recent posts widget instead.

  7. Hehehehe no, it's not the widget :) it's the link that appears at the end of the displayed post in the blog roll, so that you can "uncolapse" a few more.

    blog.tiagodovale.com displays 10 posts on the blog roll, for instance, and under those 10 there's a link to show the next, hidden, older, posts.

    tiagodovale.com is configured to show a single post, but the link still is there, just under it: that's the link I'd like to rename

  8. I don't know if it is responsive to the language detected by your browser: I think it displays "older posts" in English: for me it displays "Artigos Mais Antigos" in portuguese. It's located right between the end of the post and the top of the widgets footer, centered

  9. thesacredpath
    Staff

    Ah, yes (I need to speak and read all languages, I think. :) )

    Give this a try. It will be a little out of alignment to the right.

    #infinite-handle span {
    visibility: hidden;
    }
    #infinite-handle span:after {
    content: "Text here";
    visibility: visible;
    }
  10. heheh I'm so sorry to make you go through that!... :)

    The code works, but the box where it was displayed is gone, and the new text shows naked, and a mostly hidden under the footer widget area..

    Any ideas?

    Thank you so much for your patience :)

  11. thesacredpath
    Staff

    There are some limits to what you can do with CSS and using the before or after attributes can require some "hacky" CSS. That is the case here. :)

    Try this, and depending on the length of your text string you may have to adjust the width in the first rule, and the right in the second rule.

    #infinite-handle span {
        visibility: hidden;
        width: 150px;
    }
    
    #infinite-handle span:after {
        content: "Text goes here";
        visibility: visible;
        position: relative;
        right: 18px;
        top: -10px;
        display: inline-block;
    }
    
    #infinite-handle {
        background: #222;
    }
    
    #infinite-handle:hover {
        background: #333;
    }
  12. That is brilliant!! :) Thank you so much for your help, time and patience!! :)
    Can I ask you a final bit of help?

    I'm trying to make the box around the link to change color on hover, as the original one does with this code:

    #infinite-handle span:hover {<br /> background: #333;<br /> color: #fff;

    This doesn't work anymore, of course, because of the "visibility: hidden;" I suppose:

    Is there any workaround you can think of?

    Thank you so much again :)
    Cheers!

  13. thesacredpath
    Staff

    Add the following at the very bottom of your CSS. The first part of this was in my code above and was working fine for me with Firebug directly on your site, but the infinite scrolling stuff is overwriting some of the stuff. The "!important" attribute on the second rule will force things.

    #infinite-handle:hover {
    background: #333333;
    }

    #infinite-handle {
    height: 90px !important;
    }

  14. I'm sorry I missed that bit :)
    Thank you so much! It's working flawlessly and it's indistinguishable from the native one!!

    I'm having a few problems with the rendering of my blog's custom fonts for the last hour or so: there's no way it can be related to these edits, I believe?

    Thank you so much again!!
    Yours:
    Tiago

  15. thesacredpath
    Staff

    You are welcome, and not it shouldn't have anything to do with your CSS changes. At times Typekit just seems to get a little sluggish. Most likely in an hour or so it will sort it self out.

  16. Thanks again :)

Topic Closed

This topic has been closed to new replies.

About this Topic