Support » Themes and Templates » 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 (http://codex.wordpress.org/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.