[Resolved] Styling Pagination Links

Home Forums Support [Resolved] Styling Pagination Links

Home Forums Support Styling Pagination Links

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #251711
    Bobby

    Hello Tom,

    I was searching the forum to see if I could find any info on how to style the pagination links, but i did not see anything in particular.

    In my blog post, I like to use the wordpress “<!–nextpage–>” syntax to break up very long pages. As you know, when that syntax is used, it generates pagination links to the next pages.

    I’m trying to style my single post pagination links to look like the example in the screen shot below. I want the pagination links to have the previous and next page links added along with the square border boxes around each page number link.

    See screenshot below:

    http://playerwags.com/wp-content/uploads/2016/12/pagination-example.png

    Is there some quick simple php code I can add to the php functions file to get this look, or is this a more detailed coding project?

    Thanks.

    #251759
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    The default WordPress HTML markup isn’t great, so there’s not tons to work with.

    This might be a good start:

    .page-links a {
        display: inline-block;
        border: 1px solid #DDD;
        padding: 5px 10px;
        line-height: 1;
        margin-right: 10px;
    }
    
    .page-links a:hover {
        background:#222;
        color: #FFF;
        border-color: #222;
    }

    It would be nice to removes the “Pages” text and have HTML wrapped around the currently selected page link so we could style them, but it doesn’t look like the function allows this.

    I’ll look into it to see if there’s anything I can do in the parent theme πŸ™‚

    #252014
    Bobby

    OK, thank you Tom. The CSS works for the box and borders.

    #252023
    Tom
    Lead Developer
    Lead Developer
    #717598
    Frans

    Thanks ! This works for me as well.

    I tried to do the same with category pages and navigators, This works:

    .page-numbers {
    	display: inline-block;
    	background-color: #628907;
    	padding: 5px 10px 5px 10px;
    	color: #fff;
    }

    This also

    
    .page-numbers.current {
    	background-color: #fff;
    	padding: 5px 10px 5px 10px;
    	color: #628907;
    }

    But this doesn’t:

    .page-numbers a:hover {
    	display: inline-block;
    	background-color: #90CB0D;
    	padding: 5px 10px 5px 10px;
    	color: #fff;
    }

    And this doesn’t work either:

    next.page-numbers a:hover {
    	background-color: #90CB0D;
    	padding: 5px 10px 5px 10px;
    	color: #fff;
    }

    How can I define an a:hover style ?

    Thanks !

    Frans

    #717658
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Can you link me to a page with one of those elements so I can see why it’s not working?

    #717887
    Frans

    Thanks !

    This is a (single) post, where .page-links (and page-links a:hover) work correctly (color change on mouse over):

    https://medische-ethiek.nl/voltooid-leven-2/

    I tried to do the same styling on category pages. This is a category overview where .page-numbers work, but the a:hover doesn’t:

    https://medische-ethiek.nl/category/actueel/

    Frans

    #718112
    Tom
    Lead Developer
    Lead Developer

    Something like this should work:

    .nav-links a:hover,
    .nav-links a:focus {
        background: #fff;
        color: #222;
    }
    #718189
    Frans

    Thanks ! .nav-links a:hover is the solution. Unfortunately, .nav-links a:focus did not work. I used a combination of .nav-links and .page-numbers:

    .page-numbers {
    	display: inline-block;
    	background-color: #628907;
    	padding: 5px 10px 5px 10px;
    	color: #fff;
    }
    .nav-links a {
    	color: #fff;
    }
    .page-numbers.current {
    	background-color: #fff;
    	padding: 5px 10px 5px 10px;
    	color: #628907;
    }
    .nav-links {
    		text-align: right;
    }
    .nav-links a:hover {
    	background-color: #90CB0D;
    	padding: 5px 10px 5px 10px;
    	color: #fff;
    }

    Thanks !

    Frans

    #718338
    Tom
    Lead Developer
    Lead Developer

    Glad you got it working! Thanks for sharing your code πŸ™‚

    #721056
    Frans

    Today I saw that there is a situation in which these solutions don’t work: the navigation within WP pages. The above mentioned solutions address navigation in posts, categories and archives, but not pages. Especially, the a:hover does not work. Both .page-numbers a: hover {} and .nav-links a:hover {} do not have effect in this situation. What class should be used for the a:hover in page navigation ? If I inspect the page with Chrome, I can only find the page-numbers class.

    E.g (bottom): https://medische-ethiek.nl/publicaties-katholieke-stichting-medische-ethiek/

    Thanks !

    Frans

    #721407
    Tom
    Lead Developer
    Lead Developer

    Those links need this CSS:

    .page-numbers:not(.current):hover {
        background: #222;
        color: #fff;
    }
    #721417
    Frans

    Thanks! The class is correct, but how do I add the a:hover. Adding after not(.current) with or without colon does not work.

    Frans

    #721670
    Tom
    Lead Developer
    Lead Developer

    .page-numbers is the class of the <a> element, so there’s no need to add a:hover after it.

    #721869
    Frans

    Sorry, I did not explain my problem clearly.

    This works, but it is applied permanently (on pages):

    .page-numbers:not(.current) {
        background: #222;
        color: #fff;
    }

    However, I want to have this effect only on mouse over on links. I tried:

    .page-numbers:not(.current) a:hover {
        background: #222;
        color: #fff;
    }
    .page-numbers a:not(.current):hover {
        background: #222;
        color: #fff;
    }
    .page-numbers a:hover:not(.current) {
        background: #222;
        color: #fff;
    }

    Those three stylings do not do anything, also the permanent effect of the previous solution has disappeared.

    So, how can I get in the a:hover together with the :not(.current) ?

    Frans

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.