1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Need Quick CSS Help!

Discussion in 'Blogging' started by JuicyBlack, Dec 27, 2013.

  1. JuicyBlack

    JuicyBlack Regular Member

    Joined:
    Nov 27, 2008
    Messages:
    395
    Likes Received:
    179
    Location:
    Dark n Wet Place
    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:

    [​IMG]

    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:

    [​IMG]

    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:

    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!
     
  2. Vanrithy

    Vanrithy Power Member

    Joined:
    Jun 11, 2013
    Messages:
    619
    Likes Received:
    375
    Occupation:
    E-Media Officer
    Location:
    Kingdom of Wonder
    Home Page:
    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!
     
    • Thanks Thanks x 1
  3. JuicyBlack

    JuicyBlack Regular Member

    Joined:
    Nov 27, 2008
    Messages:
    395
    Likes Received:
    179
    Location:
    Dark n Wet Place
    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):

    Code:
    <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:

    Code:
    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');
    
     
  4. Vanrithy

    Vanrithy Power Member

    Joined:
    Jun 11, 2013
    Messages:
    619
    Likes Received:
    375
    Occupation:
    E-Media Officer
    Location:
    Kingdom of Wonder
    Home Page:
    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.
     
    • Thanks Thanks x 1
  5. JuicyBlack

    JuicyBlack Regular Member

    Joined:
    Nov 27, 2008
    Messages:
    395
    Likes Received:
    179
    Location:
    Dark n Wet Place
    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"

    ^ 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 :(
     
  6. deiwman

    deiwman BANNED BANNED

    Joined:
    Feb 22, 2010
    Messages:
    544
    Likes Received:
    442
    What is the active item style?
     
    • Thanks Thanks x 1
  7. JuicyBlack

    JuicyBlack Regular Member

    Joined:
    Nov 27, 2008
    Messages:
    395
    Likes Received:
    179
    Location:
    Dark n Wet Place
    There is none. This is what the pagination section in the CSS file looks like:

    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; }
    
    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..
     
  8. Gogol

    Gogol Elite Member

    Joined:
    Sep 10, 2010
    Messages:
    3,062
    Likes Received:
    2,872
    Gender:
    Male
    PM me your page. I will do it free for you :)
     
    • Thanks Thanks x 2
  9. Vanrithy

    Vanrithy Power Member

    Joined:
    Jun 11, 2013
    Messages:
    619
    Likes Received:
    375
    Occupation:
    E-Media Officer
    Location:
    Kingdom of Wonder
    Home Page:
    I see!

    It's the build-in function of WordPress. If you theme have this code
    Code:
    <?php wp_link_pages(); ?>
    you could use
    Code:
    <!--nextpage-->
    without adding more code in function file.

    Yes, you could PM me, I will check it without any CHARGE!
     
    • Thanks Thanks x 1
  10. JuicyBlack

    JuicyBlack Regular Member

    Joined:
    Nov 27, 2008
    Messages:
    395
    Likes Received:
    179
    Location:
    Dark n Wet Place
    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)