Help with Styling Page-Links Pagination

  • What we’re in need of help with is styling the Pagination tabs.

    Here’s an example:

    View post on imgur.com

    The tabs on the top are the goal, the tabs on the bottom are what they currently appear to be.

    The code:

    <?php link_pages('<div class="sources">', '</div>', 'number', '', '', 'MIRROR %'); ?>

    The CSS:

    .sources {
display:block;
font: 12px Arial,Helvetica,sans-serif;
float: left;
padding: 3px;
color: #FFC1C1;
border: 1px solid #C00;
background-color: #C00;
font-size: 10px;
font-weight: bold;
margin: 3px;
text-decoration: none;
width: 60px;
text-align: center;
}

.sources a {
font: 12px Arial,Helvetica,sans-serif;
float: left;
padding: 3px;
color: #BC0C3A;
border: 1px solid #C00;
background-color: #FFC1C1;
font-size: 10px;
font-weight: bold;
margin: 3px;
text-decoration: none;
display:block;
width: 60px;
text-align: center;
}

.sources a:hover {
color: black;
border: 1px solid black;
background-color: gainsboro;
}

    We’re not sure why it’s appearing like the bottom example, from the image.

    We appreciate any help, thank you!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter Suffice

    (@suffice)

    I thought I had it working, briefly, before.

    Help, anyone??

    Thread Starter Suffice

    (@suffice)

    Any thoughts?

    Thread Starter Suffice

    (@suffice)

    Is the .sources different than the .sources a? And that it should be styled different, might that be it??

    The text for the current page is not styled by .sources a because it’s not a link, just text.

    div.sources wraps the entire page list, but you need something that styles individual links and text within the list.

    You’d need to use wp_link_pages (https://codex.www.ads-software.com/Template_Tags/wp_link_pages) with link_before and link_after to style the individual page numbers like so:

    <?php wp_link_pages(array('before' => '<p>', 'after' => '</p>', 'link_before' => '<span class="sources">', 'link_after' => '</span>' ,'next_or_number' => 'number', 'pagelink' => 'MIRROR %')); ?>

    Then modify your stylesheet to reflect the change in order– 

    a .sources {
...styles...
}
a:hover .sources {
...styles...
}

    Hope this helps!

    Thread Starter Suffice

    (@suffice)

    That worked great, thanks a lot!

    I had no idea . . heh heh…

    Thanks again!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Help with Styling Page-Links Pagination’ is closed to new replies.