Сhange the color of the paging buttons

Posted in: Newspaper
Post count: 18

Good afternoon.
Very interested in how to change the color of the paging buttons in all the blocks throughout the site. I use the following settings: block settings-pagination-next prev ajax.
I’m sure that this can be solved using CSS.

Just interested in how I can insert an icon and a link to the social red https://ok.ru/?
Thanks!

Post count: 20688

Hi,

If you want to do achieve something like this , you could do it using a code like this one – https://www.screencast.com/t/foMyVlUGxf and change the color how you want. This is the code used in the example, and it must be entered in Theme panel->Custom Css. Please let me know if this is what you wanted or you need something else.

.td-ajax-prev-page,
.td-ajax-next-page {
background-color: yellow;
}

As for the icon and link, I do not understand exactly where you want to insert them, if you could provide more details, I’ll try to give you a solution.

Thanks

Post count: 1341

Ok.ru – russian social network.


@eurodream
– куда вы хотите вставить иконку от Одноклассников?

Для шаринга под статьями?

Если так, почитайте этот топик (мы пользуемся кнопками от Яндекса): https://forum.tagdiv.com/topic/how-to-add-a-vk-sharing-button-on-your-posts/

Post count: 18
Post count: 18

Благодарю Edward!
Мне нужно вставить не под статьями, а в footer и header рядом с другими доступными соц. сетями.

Post count: 20688

Hi,

Please follow the solution in the topic provided by Edward, and let us know how it goes, or if you need further help achieving this.

Thanks

Post count: 18

This is a good decision, but it’s not that. I need to insert not under the articles, but in the footer and header next to the other available icons

Post count: 20688

Hi,

Then try adding a new social network here – https://www.screencast.com/t/u51qVWQhzpL and it will display in the theme panel – https://www.screencast.com/t/mdJjJYn3kg Also you could follow this topic to further customize this – https://forum.tagdiv.com/topic/how-to-add-xing-as-a-social-network/#post-58011

Hope this helps
Thanks

Post count: 18

Good afternoon!
Everything was done, the place with the icon and the link appeared (https://yadi.sk/i/E8TRKcSZ3GEkKA), but the icon does not appear.
And in the footer it shifted compared to other icons(https://yadi.sk/i/3m-BL5Vw3GEkQB).
What am I doing wrong?
I am use in CSS
.td-icon-odnoklassniki{
background-image:url(“http://portal.ksors-spain.org/wp-content/uploads/2017/03/odnoklassniki_new.png”);
width: 30px;
height: 20px;
background-size: 30px 20px;
background-repeat: no-repeat;
}
Thank you!

Post count: 18

I did it!
Only now there are icons, but are not displayed correctly. How can I align the icon image?
Footer https://yadi.sk/i/CSvVhGzf3GEpfR

Header https://yadi.sk/i/FC4kXJRB3GEpjp
Thank you very much for your help!

Post count: 20688

Hi,

If you could provide a link to your website it would be very helpful, so I can give you a more accurate solution for this.

Thanks

Post count: 18

http://portal.ksors-spain.org/

Thanks for the support!
You are best!
I want the icons to be the same and not stand out and differ from others.
I would also like that in the footer a new icon should be highlighted in yellow when hovering.

Post count: 20688

Hi,

Well you could modify the background image size like this and it should look better – https://www.screencast.com/t/pS3UESEtX8sE because it already has the same icon class as the others. This works for the footer as well – https://www.screencast.com/t/nwJjRfsIew As for the hover effect it ca not be as the others since it is not the same implementation. You could try to set a background color for the icon like this – https://www.screencast.com/t/HSztI4yl or maybe you can find a different solution.
This is all the code used in the example, you can enter it as it is or modify some of your code

.td-icon-odnoklassniki {
background-size: 22px 24px!important;
background-position: center;
top: 15px;
}
.td-icon-odnoklassniki:hover {
background-color:yellow;
}

Thanks

Post count: 18

Thank you so much!
So it looks much better.
And can I use different icons in header and footer for a better result?

Post count: 20688

Hi,

Well you could differentiate them and have one background image for each of them by using the location they are in like this – https://www.screencast.com/t/VtI6JEDc
This is the code used

.td-header-sp-top-widget .td-icon-odnoklassniki {
background-image: url("");
}
.td-footer-wrapper .td-icon-odnoklassniki {
background-image: url("");
}

Thanks

Post count: 18

Now everything is fine!
But only the phone does not display the icon. https://yadi.sk/i/FDq3_JM93GGzDx
I’m using this CSS:
.td-icon-odnoklassniki{
background-size: 22px 24px;
background-position: center;
top: 15px;
background-repeat: no-repeat;
}

.td-header-sp-top-widget .td-icon-odnoklassniki {
background-image: url(“http://portal.ksors-spain.org/wp-content/uploads/2017/03/odnoklassniki_icon-icons.com_50849.png”);
background-size: 15px 15px;
background-position: center;
top: 15px;
background-repeat: no-repeat;
}
.td-footer-wrapper .td-icon-odnoklassniki {
background-image:url(“http://portal.ksors-spain.org/wp-content/uploads/2017/03/odnoklassniki_new-e1490177469315.png”);
}

Post count: 20688

Hi,

It may be needed to set the same, or a different icon image in this situation, like this – https://www.screencast.com/t/0tszTE6iam
So if you want you can use a special image to be displayed in the mobile menu. This is the code used

.td-menu-socials
.td-icon-odnoklassniki {
background-image: url("");
}

Thanks

Post count: 18

Now everything is fine!
Thank you all for your help!
You are best!

Post count: 18

Good afternoon!
How to make it so that when you hover the background remains black and only the white icon changes its color to yellow? Because the icons change their color in this stork.

Post count: 20688

Hi,

Please provide more information where do you want to make these changes, in what section if there is no theme option for them I will try to give you a solution if possible. There are options to set a hover color on Theme panel in multiple cases, for the social icons
https://www.screencast.com/t/wkGIbOM6Ap
https://www.screencast.com/t/rVGnNDtZEyoF

Thanks

Post count: 18

My web is http://ksors-spain.org/

This setting changes the color for all icons.
But I need to change the color for only one icon and make it turn yellow when hovering.
As now it turns red when hovering on the Youtube , blue when hovering on the Facebook, blue when hovering over the Tweeter.
https://yadi.sk/i/BVdulR-v3Gtqed

Post count: 20688

Hi,

The rest of the icons are different then this custom one. This is a background image set on the icon, and you can not change the color of an image while hovering. The normal icons use a font for the icons
https://www.screencast.com/t/6De1leOmsG that allow to set a color when hovering. But for an image is not possible.

Thanks

Post count: 18

What is the probability that this icon will be introduced in the next update of the theme?
Maybe I can replace the icon for another button and use it for this network?

Post count: 20688

Hi,

Try it this way, create an image exactly like the one you are using now, only with the color you want. Or just make a copy of the one you are using and edit it. Then using a code like this
https://www.screencast.com/t/jcOabcIINfMY you can display that icon when hovered. This is the code used

.td-footer-wrapper .td-icon-odnoklassniki:hover {
background-image: url("");
}

Thanks

Post count: 18

Thank you so much Simion C.!
This is exactly what you need!

Viewing 25 posts - 1 through 25 (of 25 total)
The forum ‘Newspaper’ is closed to new topics and replies.