Alto Focus, change Older Posts text & delete Posts Navigation at bottom of page

• 

  wagnermary · Member · Oct 17, 2017 at 5:34 pm

  • Copy link
  • Add topic to favorites

  I’m using Altofocus theme on the Blog scroll page, at the bottom, after the grid of blog images:

  – change “Older Posts” text to “More”
  – remove the “Posts Navigation” wording

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

• 

  jessestu · Member · Oct 17, 2017 at 6:06 pm

  • Copy link

  Hi @parametricmary,

  Try this code in your custom CSS. I also put the code in for “Newer posts”. That’s what it already says, but you can customize it however you want by changing the text in the quotes after “content: “. Let us know how else we can help!

  .navigation > .screen-reader-text {
    display: none; /* Removes "post navigation" */
  }
  .nav-previous, .nav-next {
    position: relative;
  }
  .nav-previous a:after {
    content: "More";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
  }
  .nav-next a:after {
    content: "Newer posts";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
  }

  Happy blogging!
  Jesse

• 

  wagnermary · Member · Oct 17, 2017 at 6:41 pm

  • Copy link

  I’m not looking to change individual blog pages—I’m specifically referring to only the page titled Blog with the grid of all my blog posts that has a link at the bottom to load more.

  At the bottom of that page only I want to change the “Older Posts” text to “More” and remove the “Posts Navigation” wording.

• 

  jessestu · Member · Oct 17, 2017 at 7:02 pm

  • Copy link

  Try this edit to the code. Check back in if it has problems:

  .blog .navigation > .screen-reader-text {
    display: none; /* Removes "post navigation" */
  }
  .blog .nav-previous, .nav-next {
    position: relative;
  }
  .blog .nav-previous a:after {
    content: "More";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
  }
  .blog .nav-next a:after {
    content: "Newer posts";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
  }

• 

  wagnermary · Member · Oct 17, 2017 at 8:35 pm

  • Copy link

  The following CSS got rid of the “Post Navigation” at the bottom of the Blog page showing a grid of all my blog posts. Thanks.

  .blog .navigation > .screen-reader-text {
  display: none; /* Removes “post navigation” */
  }

  None of the other css did anything.

  I only want it to change at the bottom of my gridded Blog page showing all my posts in one long scrolling page. It is the “Older Posts” at the bottom of that specific page I want to change.

• 

  jessestu · Member · Oct 17, 2017 at 11:43 pm

  • Copy link

  Hi @parametricmary,

  I’m glad at least part of the code worked.

  In my Firefox and Chrome browsers, this hack is actively replacing those words. It is a hack, though. I’ve changed the way it works a little bit in this code, just to test it a different way. Please make sure, as you test this, to save both style commands at once and test the site to make sure it’s working. If only one is there, it won’t work.

  Also, if it fails for you, let me know what browser you’ve tested it on. I want this to work but I’m stumped on where the breakdown is happening at this point.

  .blog .nav-previous {
    visibility: hidden;
    position: relative;
  }
  .blog .nav-previous a:after {
    visibility: visible;
    content: "More";
    position: absolute;
    top: 0;
    left: 0;
  }

  Let me know what happens!

• 

  wagnermary · Member · Oct 18, 2017 at 9:12 pm

  • Copy link

  After looking at page source, doing a bit more forum searching for css and testing — the following worked to change the navigation copy:

  .nav-next a, .nav-previous a {
  visibility: hidden;
  }
  .nav-next a:after {
  content: “Back”;
  visibility: visible;
  }
  .nav-previous a:before {
  content: “More”;
  visibility: visible;
  }

  Thanks for the help, it got me moving in the right direction, what I used is a much leaner version of your suggestions.

• 

  jessestu · Member · Oct 18, 2017 at 9:34 pm

  • Copy link

  I’m glad you got it worked out! Happy blogging!

  Best,
  Jesse

• 

  jessestu · Member · Oct 18, 2017 at 9:42 pm

  • Copy link

  One more suggestion: if you don’t like the way that makes the individual page navigation look, add “.blog” in front of “.nav-…”. That keeps it only on your main blog page and not the individual pages.