News Pro – How to Styling wp_link_page() ?

[davidroccato]

Hi,

I'd like to split some posts with the classic <!--nextpage-->

The problem is that, after I do it, the written "Page 1 2 3" appears to be too small at the bottom of the post, after the sharing buttons and I would like to change it. What I would like is to make the written "Page" bigger and show the numbers inside a box, to make them more visible.

Do you know how to do that? Is it easy?

I tried to see if there was the function <?php wp_link_pages(); ?> somewhere but I didn't find it.

I was reading to create something like that:
<div class="pagelink"><?php wp_link_pages('pagelink=Page %'); ?></div>

and then set the class pagelink in some way and somewhere.

but I don't really have a clue, actually. Could you help me? Thanks.

http://italianeography.com

[nutsandbolts]

Can you link to one of the posts with the page numbers so I can take a look?

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[davidroccato]

Hi,

Sure, I created an example post here: http://italianeography.com/incredibooth-e-wow-camera-pro-gratis-ora/

And I'd like to create something bigger like in the example, more or less, not with the same colours.

[nutsandbolts]

It looks like it has a class of .entry-pagination applied to it, and I don't see any CSS rules in the News Pro stylesheet for that class. So you can use that class to add CSS rules to your stylesheet. Your example image is broken so I'm not sure how you want it to look, but you can use a tool like Firebug to inspect the CSS on the example site and see what rules they have in place, then apply something similar in your own stylesheet. Hope that helps!

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[davidroccato]

Hi,

I tried to change the example and you should see it now but in any case, this is the link: http://list25.com/25-epic-fail-gifs/

I understand more or less what you're saying and I tried to inspect the element but it's not so easy for a newbie.

So, I should go to they style.css, and at the bottom add something like that?

.entry-pagination {
code
} 

I'd like to have the written PAGE at the beginning, at then all the boxes 1 2 3...

[nutsandbolts]

Right, you'll just want to add some rules to tell that class how it should look.

One thing you might do instead is add .entry-pagination to the existing rules for .archive-pagination (which is the way the blog page numbers look at the bottom of this page: http://demo.studiopress.com/news/templates/blog/). So if you find the section called Entry Navigation in your stylesheet, you can mimic that look by replacing that section with the following:

/* Entry Navigation
--------------------------------------------- */

.archive-pagination,
.entry-pagination {
	clear: both;
	font-size: 14px;
	font-size: 1.4rem;
	margin: 40px;
	margin: 4rem;
}

.archive-pagination li,
.entry-pagination li {
	display: inline;
}

.archive-pagination li a,
.entry-pagination li a {
	background-color: #000;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	margin-bottom: 4px;
	margin-bottom: 0.4rem;
	padding: 8px 12px;
	padding: 0.8rem 1.2rem;
}

.archive-pagination li a:hover,
.archive-pagination li.active a,
.entry-pagination li a:hover,
.entry-pagination li.active a {
	background-color: #ff0000;
	color: #fff;
}

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[davidroccato]

That's a very nice idea. I did it but it doesn't work. It doesn't change the style 🙁

[nutsandbolts]

Are you running a caching plugin? I'm trying to look at your stylesheet but it looks like it's minified.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[davidroccato]

Yep, w3 total cache,

I've emptied the cache and the written "Pagine 1 2" look the same, but there is more space at the top and at the bottom of them.

[nutsandbolts]

Look for the part that says .entry-pagination li a and change it to .entry-pagination a - that should put the black background on the links, though they'll need some margin/padding to make them look better. The link color of the .entry-pagination a may need to be changed as well.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[davidroccato]

Yep, it works a bit better now but it shows only 1 box, maybe because of the short distance between the numbers.

I'm trying different solutions...

Should I change only the rem values?

[nutsandbolts]

Both rem and px values need to be equivalent - 10px = 1rem.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[davidroccato]

Ok. Thank you very much. It looks better now and more comprehensible but it doesn't display all the boxes and the "naked" number looks ugly. I tried to match the code on the other example but it doesn't work. In the demo all the page numbers have a box and the page views is highlighted with a red box, that would be perfect.

Do you know how to do that?

Thanks,
David

[nutsandbolts]

You can style the current page number (since it's not a link) by using .entry-pagination pagination as the target.

So your CSS would look like this:

.entry-pagination pagination {
rules go here
}

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[davidroccato]

mmmhh. The problem is I don't know what to write inside. 🙂 I tried to replace with the example, or something else but nothing shows up. I'm more as an artist and a writer than a developer.

And also, I don't even know how I should separate the written "page" from the static number, and surround it by a red box. Probably, the only thing I know is the red color #FF370F, not so much indeed 😛

Could you help with the last thing, please? When you have time, it's ok.

Thanks 🙂

[Author]

Posts