Skip Navigation

[Resolved] Split: Showing social icons on artists page

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 3 replies, has 2 voices.

Last updated by Waqar 7 months, 3 weeks ago.

Assisted by: Waqar.

Author
Posts
#2690270

Hi, thanks for testing!

I also have another question:
I would like to add social media icons to each artist's page. So that the artists can add the link to their social media's, and on the front end of the artists pages the matching icons appear that link to their socials (Only these icons should appear of which the url is entered). Is that possible?

#2690277

Hi,

To show the social share icons, Toolset includes a 'Social Share' block, as shown on this example page:
https://toolset.com/block-item/social-share/

You can include a URL type custom field for each of these social services and select them in the dynamic source settings of this block, accordingly.

regards,
Waqar

#2690278

Thank you, but I'm afraid that is something else. I'm using that on the art pages. But I want the artist to be able to share links to THEIR social media Accounts. And then show them as icons, if the url is filled in. I've made one for Facebook accounts, but it isn't showing as I hoped..

#2690658

Thanks for writing back.

I understand you're currently using a single field block and the following custom CSS code to show the social profile icons on the artist pages:


#Facebook\ Link {
background: url("/wp-content/uploads/2024/03/Schermafbeelding-2024-03-30-113159.png") no-repeat !important;
text-indent: -9999px;
}

You can replace that CSS code with the following and it will work:


#Facebook\ Link a {
    background: url(/wp-content/uploads/2024/03/Schermafbeelding-2024-03-30-113159.png) no-repeat !important;
    color: transparent;
    display: block;
    width: 75px;
    height: 75px;
}

Similarly, you can add fields, single blocks, and CSS code for other social icons too.

Note: To conditionally show these individual single field blocks only when the respective source custom fields have some value, you can wrap each one of them inside a conditional block:
https://toolset.com/lesson-placement/lesson-placements-1621067-1292451/

#2690918

Thanks a lot, that helped!