Need Quick CSS Help!

[JuicyBlack]

Hi There,

I am trying to customize a theme's "nextpage" function so that pagination doesn't look unappealing.

Basically this is what my nextpage page navigation looks like:

As you see the #2 doesn't have any style and it looks squeezed in there. That is what I see when I click on the second page. That third page is has a green background because its css a hover effect (I had my mouse over that link when I took the screenshot)

My goal is to make the active page (which in this case is #2) look like the #3 page which has that green background.

Another example would be this one:

If you see the image above, you can quickly see that you are on page 1. Thats exactly what I want to achieve but with the green background color.

This is my current CSS Code:

.my-paginated-posts {
font-size:1em; font-weight:700; font-family:arial; padding:0.4em 0.8em; text-align:center; }

.my-paginated-posts p { font-size:1.4em; }

.my-paginated-posts p a {
background:#3C3C3C; color:#FFFFFF; margin-left:0.1em; margin-right:0.1em;
padding:0.4em 1em; text-decoration:none; }

.my-paginated-posts a:hover { color:#fff; background:#A6D501; }

What can I add to my CSS Code to make that "#2 current page link" look like the #1 link in the second image which has a background color different from the other links?

Thank you in advance!

 

[Vanrithy]

According to your style, it seems you don't have or remove the active state of current item. It's easier to see the real site.
Anyways, if you don't want to reveal your site, just do this to find the active item style:

-Click on #2, right click and choose "Inspect Element (Q)" in Mozilla Firefox to check what styles it's having.

and lets me know to post that style again!

 

[JuicyBlack]

According to your style, it seems you don't have or remove the active state of current item. It's easier to see the real site.
Anyways, if you don't want to reveal your site, just do this to find the active item style:

-Click on #2, right click and choose "Inspect Element (Q)" in Mozilla Firefox to check what styles it's having.

and lets me know to post that style again!

This is what I see in the html code when click on the #2 page and then right click to inspect the element (I replaced my actual domain with a placeholder):

<div class="my-paginated-posts">
<p>
PAGES —
<a href="http://mydomain.com/?p=746">1</a>
2
<a href="http://mydomain.com/?p=746&page=3">3</a>
<a href="http://mydomain.com/?p=746&page=4">4</a>
</p>
</div>

The custom function which generates this nextpage navigation looks like this:

function custom_nextpage_links($defaults) {
$args = array(
'before' => '<div class="my-paginated-posts"><p>' . __('PAGES &#151;'),
'after' => '</p></div>',
);
$r = wp_parse_args($args, $defaults);
return $r;
}
add_filter('wp_link_pages_args','custom_nextpage_links');

 

[Vanrithy]

That function produced a worst structure which didn't include the wrapper around the current item.

If we add the style to current item, it will also affect the word "pages", too. Use PageNavi Plugin, it's better than that function.

 

[JuicyBlack]

That function produced a worst structure which didn't include the wrapper around the current item.

If we add the style to current item, it will also affect the word "pages", too. Use PageNavi Plugin, it's better than that function.

I installed WP-PageNavi a couple of days ago, however; I had to remove it since the instructions said it would replace the "previous and next links"

Want to replace the old ← Older posts | Newer posts → links with some page links?

^ Thats nice but its not what I was shooting for

What I am trying to achieve is to break "long posts" into a manageable list of pages using the <!--nextpage--> tag in my post. Sort of like what list25.com does here > http://list25.com/25-fantasy-worlds-defy-imagination/2/

BTW.. I agree .. the function doesn't include the wrapper and thus any change I make will indeed affect the "Pages" word as well

 

[deiwman]

What is the active item style?

 

[JuicyBlack]

What is the active item style?

There is none. This is what the pagination section in the CSS file looks like:

.my-paginated-posts {
font-size:1em; font-weight:700; font-family:arial; padding:0.4em 0.8em; text-align:center; }

.my-paginated-posts p { font-size:1.4em; }

.my-paginated-posts p a {
background:#3C3C3C; color:#FFFFFF; margin-left:0.1em; margin-right:0.1em;
padding:0.4em 1em; text-decoration:none; }

.my-paginated-posts a:hover { color:#fff; background:#A6D501; }

The rest of the sections in that css file don't deal with pagination so I think this is the only relevant snippet..

I'll PM you guys the URL of the site if needed... sorry to mention it until now, but it seems its necessary at this point..

 

[Gogol]

PM me your page. I will do it free for you

 

[Vanrithy]

I see!

It's the build-in function of WordPress. If you theme have this code

<?php wp_link_pages(); ?>

you could use

<!--nextpage-->

without adding more code in function file.

Yes, you could PM me, I will check it without any CHARGE!

 

[JuicyBlack]

Thank you Guys! I just PMd you the URL of the test site I am working on

Hopefully Cloudflare's development mode won't be disabled in the next hour (I'll stay on top of it)