Welcome! To use this support forum, please Login or Join Today!

   

Customize “Next” and “Previous” Links

{name}
Rank

Total Posts: 25

Joined 2015-05-11

PM

 

We would like to have the “Next” and “Previous” links be much larger and centered at the bottom of our product pages.  They are so small that our customers are not seeing them and don’t realize that we have additional pages of products.  We have been trying to change the CSS ourselves, but the changes we’ve been trying on the style.css don’t seem to be taking effect.  Could you please help us?

Thanks,

Cara
http://www.SimpleBeadPatterns.com

{name}
Rank

Total Posts: 25

Joined 2015-05-11

PM

 

Also, ideally, when there is a “Next” and a “Previous” page to navigate to, we would like the “Previous” and “Next” links to be sit side by side (not stacked, as they are now), with “Previous on the left and “Next” on the right.  Again, we want them to be much, much larger, and centered.

Thanks again,

Cara
http://www.SimpleBeadPatterns.com

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Hi Cara,
Can you point me to a link where the pagination exists?

{name}
Rank

Total Posts: 25

Joined 2015-05-11

PM

 

Hi Casey,

Yes, here is a link to the page with all of our tutorials for sale.  There are three pages worth listings and virtually no one makes it past the first page.

http://simplebeadpatterns.com/all-tutorials/

Thanks for your help.

Cara

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

If you’ll open wp-content/themes/skeleton/style.css and add this toward the bottom, you should get the following result:
https://cl.ly/11463j0V090V

/* @group Store Pagination */

.entry-content .navigation {
 width: 100%;
 border-top: 2px solid #eee;
 padding-top: 20px;
}

.entry-content .navigation .nav-next a,
.entry-content .navigation .nav-previous a {
 background: #b00145;
 color: #fff;
 padding: 10px 20px;
 text-decoration: none;
 border-radius: 4px;
 text-transform: uppercase;
 letter-spacing: 0.09em;
}
.entry-content .navigation .nav-next a:hover,
.entry-content .navigation .nav-previous a:hover {
 background: #e60059;
}

.entry-content .navigation .nav-next {
 float: right;
}
.entry-content .navigation .nav-previous {
 float: left;
}


/* @end */
{name}
Rank

Total Posts: 25

Joined 2015-05-11

PM

 

Thank you so much, Casey!  That worked.  :  )  I really appreciate it.

Sincerely,

Cara