How can I change Next previous buttons ?
I need these buttons.
Hi
You will need a custom css to achieve that layout. These are selectors which hold the style for these icons: http://screencast.com/t/aPALhEwIMVsE and basically you will need to generate a css shape. For more details please check this link: https://css-tricks.com/examples/ShapesOfCSS/ Also this tutorial might helps: https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Thanks!
understood. Can you please give me the css code to put there ? I’ll be very thankful to you!
Hi,
If you already have the sprites, you can use this guide on how to use sprites: http://www.w3schools.com/css/css_image_sprites.asp
Alternatively you can use this topic to see how it can be done:
https://forum.tagdiv.com/topic/how-to-change-the-single-post-pagination/
Thank you!
Hello Bogdan, I need this look ..
pls give me the codes to achieve this look.
Hi,
Unfortunately you will have to replicate the method shown in the topic I mentioned above. You will have to either use sprites as i have pointed out or separate the images and use the background-image property. I cannot do these things for you unfortunately as custom work is not part of the theme support. We do try to help out where we can when time allows us to, but we cannot tackle bigger tasks.
Thank you for your understanding.
But my need is different.You misunderstood my point. Next and previous signs are not pics. links given above are basically guides for using pic as Next previous buttons. See the design live at (being Indian.com) ,then you will get the idea what i am talking about.
Hi,
I see now what you mean, they are not images but css and font icons. You could have mentioned this from the start as inspecting the site helps a lot 🙂
Ok, let’s give it a try:
.td-next-prev-wrap .td-ajax-next-page, .td-next-prev-wrap .td-ajax-prev-page{
border-radius: 50%;
padding: 8px 0px 7px 5px;
border-radius: 50%;
height: 40px;
width: 40px;
text-shadow: -2px 0px 2px #333;
box-shadow: 0 0 5px rgb(255, 255, 255);
}
.td-next-prev-wrap .td-ajax-next-page i, .td-next-prev-wrap .td-ajax-prev-page i{
font-size: 3em;
}
.td-next-prev-wrap a{
opacity: 0.9 !important;
}
It could require a bit of adjusting but generally this should come close to your desired results.
I hope this helps.
Thanks.
Applied.
Result is beautiful !
but tell me the solution for these warning signs :
Hello,
These are just a few warnings. The first is because of the ‘0px’ if it;s 0 you can remove the px as it;s not needed anymore but it will not influence the code itself.
The border-radius maybe needs a size in pixels and not in % you can try to add 20px for example or find a value that works in pixels.
The third you can do nothjing about as it’s a “use of important” warning. This is a waning as the important tag is only meant to be used as a ‘last measure’ so to speak. You can try the code without important.
Thank you!
