The Next Page tag
-
I recently read this short page on creating next pages…
https://en.support.wordpress.com/nextpage/
This has some potential, but I was disappointed that it can’t be configured in the same way as the more tag. In other words, I tried changing the name of the pages from 1, 2, 3, to something else using
<!–nextpage xxxxxxxxxxx –>
but this does not work like it does with the more tag.
QUESTION: Are there any CSS customization that be used with this tag? or creative ways of using it?
The blog I need help with is: (visible only to logged in users)
-
Could you please provide a link to the page where you’re using the Next tag? You can certainly target it with some CSS. What kind of change would you like to make to the page numbers?
-
Hi, for long pages that you wish to break up, you place a next page tag at each location you wish to create a new page. When someone goes to that page, they should see a list of page numbers at the bottom of each page where they can navigation to the next page, or any page.
The next page tag is not customizable.
-
right now there is simple numbers; when you say it is not customizable, does that mean that one can’t increase the font size, padding, and change the background color? If I were ever to use this, I would atleast want the page numbers to stand out more.
-
I am doing a little experimenting, and I am getting REAL interested in this feature. It is very solid. Just for testing purposes I created eight pages, all with the same material on them, except I changed EPISODE GUIDE, to PAGE 2, PAGE 3, etc. to see how things work.
https://game-of-thrones-episodes.com
It has a real nice effect on the academica theme which has middle column widgets (which of course appear static, in place, as one moves through the pages.
I imagine one could create a menu map at the top of the four images with links (corresponding to the page number links.)
any comments or suggestions?
-
-
does that mean that one can’t increase the font size, padding, and change the background color?
Yes, you can definitely change the way the page numbers look with CSS. The page links are in a div with the class
page-links– you can target their look and feel that way.I imagine one could create a menu map at the top of the four images with links (corresponding to the page number links.)
Sure you could.
-
Thanks. I will work on that project later in the week after I finish putting up all the scenes to the season 7 final.
-
@kathrynwp and @thesacred path,
I will have something for you to look at shortly, but I have a simple question right now. How does the next page feature work when comments are enabled? Right now I have comments disabled, but in the future I may enable them. Do the comment appear on the last page, or what?
-
-
okay, so if I understand you right, they appear on all pages.
Another quick question.
Do all contents load up at the same time, but only appear during pagination? These days I guess it really doesn’t matter with high speed internet like it may have once mattered, but just curious.
-
FYI – contents on page (i.e. photos, videos, etc.), no longer talking about the comments
-
okay, so if I understand you right, they appear on all pages.
Are you referring to comments? You can turn comments on/off per page or post. Comments default to off on pages.
Do all contents load up at the same time, but only appear during pagination?
No. Each paginated section is output in the HTML when you click the pagination link.
-
AMAZING!!! Thanks to you Kathyrn for letting me know about this tag. (actually you told someone else, and I read the thread). Previously, I had struggled on expanding content because that meant (I incorrectly assumed) creating more standalone pages (which would require manually putting in widgets and visibility tags, etc. –a lot of work).
Now, thanks to you, that is all done automatically.
Here is what I came up with.
https://game-of-thrones-episodes.com/2017/07/19/the-end-of-house-frey/
It’s a simple map image on top of the page using the
url tags. That’s the best I can do. It’s beyond my abilities to do it using html and css. So unfortunately, I can’t make the images hover on mouse over. (ie. using a #wrap a:hover selector). If you have a template that I can play around with for tabs which are similar to the ones I creates with .png, I would really appreciate it.
What do you think? I would also be interested in hearing from Richard.
Thanks again.
-
Hi there – Try first adding a div with a unique class, wrapped around some plain links.
You can then style the links in them to look like buttons, instead of using an image map. You can use properties like background-color, color, and border to style your links.
Example:
<div class="mypagenav"> <a href="https://game-of-thrones-episodes.com/2017/07/19/the-end-of-house-frey/">First Page</a> <!-- add your other links --> </div>There are some examples of link button styling in this guide.
-
Thank you for helping me. Go back to the page and view the progress I am making…
I still have two issues:
1. How to get hover text white?
2. Unable to manipulate text-weight, how can i do that?
4. I did what I did without using <div class=”mypagenav”> so what’s up with that?Here is my CSS:
.button-s {
display: inline-block;
width: 92px;
text-align: center;
padding: 4px 12px;
border: 1px solid black;
font-size: 18px;
font-weight: 900;
letter-spacing: 0;
text-transform: initial;
background: #E0E0E0;
color: #000;
}
/* Add a rollover background colour but keep the text white */
.button-s:hover,
.button-s:focus,
.button-s:active {
background: #9c1202;
color: #fff;
}Here is the html I used:
-
-
Here is a 4th issue I am having (see issues 1,2,3 above):
4. vertical alignment of text (its not in the center)
Thanks
-
I fixed issue 4 by going with all four paddings
padding: 4px 12px 1px 12px;
if there is a better solution let me know, please. As far as solving the other issues, I am going to leave that up to you…I have tried and tried and tried!
- The topic ‘The Next Page tag’ is closed to new replies.
WordPress.com Forums 