Custom CSS for td-ajax-prev-page and td-ajax-next-page

Posted in: ionMag
Post count: 11

How can i Custom CSS for td-ajax-prev-page and td-ajax-next-page? I need change two small arrow for other better pagination in home https://decoracion2.com/

Simion C.
Post count: 218

Hi,

That website uses a customization of the default next/prev block pagination. Inspecting it it can be seen what code is used
https://www.screencast.com/t/Fgk9BZk69
It would look like this on the ionMag theme, with some modifications
https://www.screencast.com/t/ERVuTGVn
This is the code used, you can change colors and values in it and experiment with different results

.home .td-next-prev-wrap a{
width: 100px;
height: 50px;
font-size: 20px;
padding-top: 14px;
color: #FFF;
background-color: #c6462d;
border-color: #c6462d;
}
.home .td-next-prev-wrap a {
padding-left: 0!important;
padding-right: 0!important;
}
.home .td-next-prev-wrap a:hover{
background-color: #9f2d16;
border-color: #9f2d16;
}

This will apply to all the next/prev pagination present on the homepage only. If you want it to affect the whole website, remove the home class from the code.

Thanks

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