Need help? Check out our Support site, then


Changing "Older and Newer Posts" to "Older and Newer Stories"

  1. Hello,

    I'm building an archival site with Quintus as my theme, and I've purchased the Custom CSS upgrade.

    Here's the site in question:

    http://www.intimatejournalism.com

    I'm interested in changing "Older Posts" and "Newer Posts" on the site to "Older Stories" and "Newer Stories" (both at the top and bottom of the page).

    Let me know what CSS changes are necessary. I'm willing to use a plugin and/or a child theme to make this work, although I'm new to this and might need some guidance.

    Thanks!!

    -Ramzi Dreessen
    Research Assistant, UIUC College of Media

    The blog I need help with is intimatejournalism.com.

  2. OK. Additionally, I have a sticky post on the first page, which also shows up on the last page, and I'd like to hide it. I don't know if that's possible but it would be a nice touch.

    Again, the site is:

    http://www.intimatejournalism.com

  3. Add this to your Appearance → Custom Design → CSS to change the "Older posts" and "Newer posts" text to say "Older stories" and "Newer stories":

    .nav-previous a,
    .nav-next a {
    	visibility: hidden;
    }
    .nav-previous a span:after,
    .nav-next a span:after {
    	visibility: visible;
    	background: #EEE;
    	border: 1px solid #DDD;
    	border-radius: 3px;
    	color: #666;
    	display: inline-block;
    	overflow: hidden;
    	padding: 4px 8px;
    }
    .nav-previous a span:after {
    	content: " \2190  Older stories";
    }
    .nav-next a span:after {
    	content: " Newer stories  \2192";
    }
  4. Hold on. I didn't account for the older/newer links in the nav bar below the header in that first example. This should cover those in addition to the ones at the bottom of the page. You should be able to see how to make adjustments from here if you want to make any additional changes:

    #content nav div a {
    	visibility: hidden;
    }
    #content nav div a:after {
    	visibility: visible;
    	background: #eee;
    	border: 1px solid #ddd;
    	border-radius: 3px;
    	color: #666;
    	display: inline-block;
    	font-size: 13px;
    	max-width: 85%;
    	overflow: hidden;
    	padding: 4px 8px;
    	text-overflow: ellipsis;
    	white-space: nowrap;
    }
    .nav-previous a:after {
    	float: left;
    	content: " \2190  Older stories";
    }
    .nav-next a:after {
    	float: right;
    	content: " Newer stories  \2192";
    }
    #content nav div a:hover:after {
    	background: #ddd;
    	border-color: #bbb;
    	text-decoration: none;
    }
    #nav-above {
    	margin-top: -1.4em;
    }
  5. I have a sticky post on the first page, which also shows up on the last page, and I'd like to hide it.

    This is the normal functional behavior of sticky posts. There isn't a way to change behavior like that using CSS only.

  6. designsimply:

    Thank you so much!!! I only have one more question:

    As you can see on the site (www.intimatejournalism.com), the "Older Stories" button seems to be cut off a little bit. Any way to fix this?

  7. Try adding this:

    #content nav div a:after {
    	max-width: 90%;
    }
    #content #nav-above {
    	right: 45px;
    	width: 250px;
    }

    Adjust the numbers to your liking.

  8. Thanks!!

  9. Cheers :)

  10. Hi,

    Sorry to inquire again about the same thing, but there seems to be an issue.

    Apparently on Internet Explorer the "Older stories" button is not visible. I am working on obtaining the version of Explorer that has this issue. I'm guessing it's going to be Version 8 or earlier.

    The site works fine in the latest versions of Chrome, Firefox, and Safari.

    What might be some causes for this? Thanks.

    -Ramzi

  11. That's because this theme uses HTML5 and older versions of Internet Explorer don't recognize newer HTML5 elements such as "nav". The common practice is to make the changes that work for newer browsers and allow the older browsers (which should hopefully have a considerably smaller number of users) to display without some of the updates.
    http://dowebsitesneedtolookexactlythesameineverybrowser.com/

    If you want to make all of your CSS work for all older browsers, including older versions of Internet Explorer, you'll have to do some extra work to test all your changes as well as use a theme that doesn't use "nav" (or other HTML5) elements.

  12. OK. But according to my research, IE9 and IE10 are supposed to support the "nav" element.

    It is suggested online that a "shiv" might be necessary:

    <!--[if lt IE 9]>
    <script src="dist/html5shiv.js"></script>
    <![endif]-->

    ...a piece of code (inserted ideally before the CSS) that uses javascript to replicate HTML5 effects.

    However, I can only edit the CSS of my site (since it's a WordPress.com site). Any more suggestions..? Or do I have to choose between having this minor change to my site and having it be compatible with IE9?

    Thanks again.

  13. What if I export from WordPress.com to WordPress.org? That seems like a huge amount of work just so one button can be functional.

    I suppose I can just show all the posts on one page, and avoid the issue completely. However, clicking on one post will still bring up the "Older/Newer" buttons.

  14. ONE last thought: perhaps there is a code change that will allow me to display all the posts on the main page in IE, but only 8, say, in other browsers. This would circumvent the possibility of making larger changes to the theme or the site.

  15. The nav element issue only applies to IE8, which is the browser you mentioned before. However, I think the visibility trick I tried also gives IE9 trouble. Grr.

    In any case, I should have mentioned before that what you are asking isn't really a typical CSS change, but I kind of wanted to see if I could solve it anyway. :) CSS can change display but normally it isn't used to adjust function or content. In this case, I think it can and I worked on it a little more and came up with something different that you can try if you'd like or not:

    #content #nav-above {
    	width:280px;
    	right:20px;
    }
    
    #content nav .nav-previous {
    	float:left;
    	width:50%;
    }
    
    #content nav .nav-next {
    	float:right;
    	width:50%;
    }
    
    #content nav .nav-previous a,#content nav .nav-next a {
    	color:#eee;
    	width:100px;
    	max-width:none;
    }
    
    #content nav div a:hover {
    	color:#ddd;
    }
    
    #content nav .nav-previous a:before {
    	float:left;
    	color:#666;
    	content:" \2190  Older stories";
    }
    
    #content nav .nav-next a:before {
    	float:left;
    	color:#666;
    	content:" Newer stories  \2192";
    }

    Now, note that this latest example probably won't work in IE8, but I did test IE9, Chrome 19, Safari 5.1.6, and Firefox 13.0.

    In addition, as soon as Quintus is converted to infinite scrolling, the buttons will need to be changed so the theme can be moved forward and be updated with the latest features.

  16. What if I export from WordPress.com to WordPress.org? That seems like a huge amount of work just so one button can be functional.

    You could do that. Exports should go pretty smoothly in most cases, and if you switched to WordPress.org then you could simply edit the theme HTML or create a child theme with the adjustment because having WordPress.org means having full access to edit all of the code.

  17. ONE last thought: perhaps there is a code change that will allow me to display all the posts on the main page in IE, but only 8, say, in other browsers. This would circumvent the possibility of making larger changes to the theme or the site.

    That's not an option on WordPress.com, because WordPress.com doesn't offer you the option to edit the theme's HTML or PHP code. See http://support.wordpress.com/com-vs-org/ to learn more about the differences.

Topic Closed

This topic has been closed to new replies.

About this Topic