Previous/Next buttons in mobile theme

jennyludmer · Member · Oct 8, 2015 at 2:28 am
Copy link

Add topic to favorites
I’d like to change the color of the Previous/Next buttons that show up at the bottom of each post in the mobile theme. Can you suggest code?

The blog I need help with is: (visible only to logged in users)
shawnajroberts · Member · Oct 8, 2015 at 7:31 pm
Copy link
Hi there!

You should be able to use this code to modify the color of those buttons on the mobile device:
```
.nav-previous a, .nav-next a {
    background: #278dbc;
    color: #fff;
}
```
Just change the two colors there to the background and text color that you want!
jennyludmer · Member · Oct 9, 2015 at 12:26 am
Copy link
Thanks – that did it. There is also a button labeled “older posts.” Do you know the code for that one too?
thesacredpath · Member · Oct 9, 2015 at 4:34 pm
Copy link
@jennyludmer, I’m not seeing an “older posts” button on your site. I see that you have Infinite Scroll activated at Settings > Reading in your dashboard right now, which means the Older Posts button does not show up.

Are you wanting to not use Infinite Scroll?
jennyludmer · Member · Oct 9, 2015 at 5:13 pm
Copy link
When I open roostersreport.com on my iPhone and scroll down past the blurbs for 5 posts, there’s a blue button “Older posts” right before the sidebar widgets start. That’s the one I’m talking about. Thanks!
thesacredpath · Member · Oct 9, 2015 at 6:41 pm
Copy link
Ah thanks, I see it now. Add the following to change the background and text color.
```
#infinite-handle span
    background: #278dbc;
    color: #fff;
}
```
jennyludmer · Member · Oct 9, 2015 at 10:26 pm
Copy link
That worked (with the addition of a “{“) – thanks!
thesacredpath · Member · Oct 9, 2015 at 11:02 pm
Copy link
Oops, sorry about forgetting the { . You are welcome and let us know if you have additional questions.
jennyludmer · Member · Oct 10, 2015 at 6:08 pm
Copy link
Yes, I do have one more question. On the bottom of my homescreen there are two links: one to the previous article and one to the next. I used CSS to specify that all links are orange, and these are. However, these links have my other color, which is dark green, as the background of the links, which makes them very hard to read. I tried setting the background for links white, but that made all of my buttons white too.

Is there a work around, or can I just remove these links? Thanks in advance.
thesacredpath · Member · Oct 10, 2015 at 7:29 pm
Copy link
Hi, at the bottom of your homepage, I’m seeing an “Older Posts” button with a green background, but no Next/Previous buttons. If I go to one of your posts, then I do see a next and previous button.

For the Older Posts button that shows on the main page, this CSS would allow you to change the background and text color, and the button hover color.
```
#infinite-handle span {
background: #02A04C;
color: #fff;
}
#infinite-handle span:hover {
background: #7dcae7;
color: #fff;
}
```
And this will allow you to change the background and text color on the next/previous buttons on the single post pages.
```
.nav-previous a, .nav-next a {
background: #02A04C;
color: #fff;
}
```
jennyludmer · Member · Oct 10, 2015 at 10:36 pm
Copy link
OK, I think I’ve figured it out. For an individual post, the nav-previous and nav-next appear to control both the Previous and Next buttons in mobile mode as well as the Previous and Next text on the desk top.

For now, I’ve set them both to green background/white text and I can live with that. If there is a way to differentiate them, just let me know. Thanks again!
thesacredpath · Member · Oct 13, 2015 at 5:04 pm
Copy link
Hmmm, the #infinite-handle span CSS should only affect the Older Posts button on the main page. The .nav-previous a, .nav-next a should only affect the Next/Previous buttons on the single post pages. You may wish to proceed the selectors with the .mobile-theme class so that it applies only when the mobile theme activates.
```
.mobile-theme #infinite-handle span {
background: #02A04C;
color: #fff;
}
.mobile-theme #infinite-handle span:hover {
background: #7dcae7;
color: #fff;
}
.mobile-theme .nav-previous a, .mobile-theme .nav-next a {
background: #02A04C;
color: #fff;
}
```
jennyludmer · Member · Oct 13, 2015 at 6:13 pm
Copy link
Thanks once again! I was missing the .mobile-theme declaration and that took care of it.
thesacredpath · Member · Oct 13, 2015 at 6:15 pm
Copy link
Super, and you are welcome.

No items found.