Customization options for next and previous buttons? (Suburbia theme)

  • Unknown's avatar
    errorsinc · Member ·

    Hi again. I have a couple of questions regarding my .meta navigation:

    1. I was wondering if there are any options to modify (i.e. change the content of) the ‘next post’ and ‘previous post’ buttons? For example can I change these to ‘next’ and ‘previous’ or replace these with post titles? Or if at all these can be replaced by images of arrows etc?

    2. I don’t seem to be able to position the .meta on the page. I want to have the ‘next’ and ‘previous’ in line with the search form at the top/header-area such that they show next to each other, not top and bottom as at present. Adding ‘display: inline’ in the .meta properties doesn’t seem to do anything [see here for instance].

    What would probably be ideal: to have arrows next to the search-form on the top and post-names at the bottom [something like this].

    I’ll be grateful for any help. Many thanks!

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, this changes the text and puts the previous and next links on the same line to the left and right and moves them up above the post. CSS can be used to position and style elements already in the page, but cannot be used to add things that are not there, such as a second page navigation section. See what you think of the following. The text can be changed to include an arrow or have an arrow only, if that is your desire.

    .nav-next a, .nav-previous a {
    visibility: hidden;
}
.nav-next a:after {
    content: "Next";
    visibility: visible;
}
.nav-previous a:before {
    content: "Previous";
    visibility: visible;
}
.nav-next, .nav-previous {
    border: medium none;
    width: 150px;
}
.meta-navigation {
    display: inline-flex;
    width: 566px;
    position: absolute;
    top: 0;
}
.meta {
    max-width: 566px;
    min-width: 566px;
}
.nav-next {
    position: absolute;
    right: 0;
}
.single .middle {
    position: relative;
}
  • Unknown's avatar
    errorsinc · Member ·

    Thanks a lot! I’ve managed to position the navigation, but it doesn’t seem to work with the content replacement. Using this 

    .nav-next a, .nav-previous a {
    visibility: hidden;
}
.nav-next a:after {
    content: "Next";
    visibility: visible;
}
.nav-previous a:before {
    content: "Previous";
    visibility: visible;
}

    doesn’t seem to do the trick (text gets added as non-links). I would like to replace the next and previous with simple arrows on the top. Is there anything else I could try?

    Also, what would be the best way to insert text links on each post for a second pair of navigation buttons at the bottom?

    Thanks again.

  • Unknown's avatar
    errorsinc · Member ·

    P.S. The div.meta still seems to be stuck at the bottom. It’s the meta-navigation that is positioned as I want it. Any way to remove the bottom white space?

    Thank you.

  • Unknown's avatar
    errorsinc · Member ·

    Hi, I’ve managed to fix the position now, but still no luck with replacing the contents of next/previous buttons with ‘<‘ and ‘>’.

    Any help will be much appreciated. Thanks!

  • Unknown's avatar
    justpi · Member ·

    Try again please. Since the selectors are “.nav-next a:after” etc, TSP’s suggestion produces links, not plain text. You’d get plain text if the selectors were “.nav-next:after” etc.

    If you want standard arrows, use these as the content (and add a font-size to make them larger):
    ←
    →

    If you want images, you need to upload them to your blog then use CSS to insert them as background images to the nav links.

    A second pair of nav links would have to be created manually in the content of each post (then restyled via CSS editing).

  • Unknown's avatar
    errorsinc · Member ·

    Hi, thanks for your reply. I must be doing something wrong, maybe it is conflicting with some other specifications? This is the CSS I have at present:

    .meta-shortlink,
.meta-information,
.edit-link {
	display: none;
}

.meta-navigation {
	width: 80px;
	position: absolute;
	top: 25px;
	right: 0;
}

.meta {
	border: none;
	width: 80px;
	position: absolute;
	top: 25px;
	right: 250px;
}

.nav-previous {
	position: absolute;
	left: 0;
	top: -27px;
}

.nav-next {
	position: absolute;
	left: 0;
	top: -6px;
	background-image: url('http://contextualternate.files.wordpress.com/2014/01/a-01.png');

}

.nav-next a, .nav-previous a {
    visibility: hidden;
}

.nav-next a:before {
    content: "Next";
    visibility: visible;
		z-index: 999;
}

.nav-previous a:before {
    content: "Previous";
    visibility: visible;
		z-index: 999;

}

    This still leaves the [content: ‘Previous’] as well as the background image in ‘Next’ as non-linking [see here, for instance]. What could be the issue?

    Many thanks.

  • Unknown's avatar
    justpi · Member ·

    The arrow doesn’t work because you inserted it as a bg image to the section rather than the link.
    The other issue seems to be browser related: the substitute links work in my Firefox and Chrome, they work in my Opera but with no hover color, they don’t work at all in my Safari. I don’t know why.
    Try this variant of the same trick so we can see if it makes a difference: 

    .nav-next a, .nav-previous a {
font-size: 0;
}
.nav-next a:before {
content: "Next";
font-size: 12px;
}
.nav-previous a:before {
content: "Previous";
font-size: 12px;
}
  • Unknown's avatar
    errorsinc · Member ·

    Brilliant! That works!

    How can I remove the text content of the links so there’s only the background image. Turning font:0 or deleting content removes the whole thing.

    Presently I have this:

    .nav-next a:before {
	content: "Next"
	background-image: url('http://contextualternate.files.wordpress.com/2014/01/a-01.png');
	font-size: 12px;

}
.nav-previous a:before {
	background-image: url('http://contextualternate.files.wordpress.com/2014/01/b-01.png');
	font-size: 12px;
}

    Thanks a lot!

  • Unknown's avatar
    justpi · Member ·

    You’re welcome.

    Working over here too, in all my browsers.

    But if you want the arrows only (or any other image), you don’t need the before/after/content trick at all. Turn “.nav-next a, .nav-previous a” to this: 

    .nav-next a, .nav-previous a {
display: block;
font-size: 0;
height: 20px;
width: 80px;
}

    and turn the other two to just this: 

    .nav-next a {
background-image: url("URL HERE");
}
.nav-previous a {
background-image: url("URL HERE");
}
  • Unknown's avatar
    errorsinc · Member ·

    O great! That is incredibly helpful of you.
    Thanks a ton!

  • Unknown's avatar
    justpi · Member ·

    You’re welcome!

    (Opinion: previous/next is clearer than arrows! Users don’t all agree which should be left and which should be right.)

  • The topic ‘Customization options for next and previous buttons? (Suburbia theme)’ is closed to new replies.