Change "older posts" link wording

  • Author
    Posts
  • #1207875

    tiagodovale
    Member

    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.

    #1207962

    tiagodovale
    Member

    Actually, just the “older posts” one: I never see a “newer posts” link :)
    Cheers!

    #1208020

    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;
    }
    #1208028

    tiagodovale
    Member

    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!!

    #1208035

    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.

    #1208040

    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.

    #1208066

    tiagodovale
    Member

    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

    #1208067

    tiagodovale
    Member

    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

    #1208074

    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;
    }
    #1208079

    tiagodovale
    Member

    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 :)

    #1208136

    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;
    }
    #1208139

    tiagodovale
    Member

    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 {
    background: #333;
    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!

    #1208140

    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;
    }

    #1208141

    tiagodovale
    Member

    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

    #1208142

    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.

    #1208143

    tiagodovale
    Member

    Thanks again :)

The topic ‘Change "older posts" link wording’ is closed to new replies.