Blog post social media bordered

Hello, I want all the social media share icons in my blog posts to be colorless, meaning “bordered.” I tried many things with CSS but didn’t get any results. I turn them into bordered, but the icon colors are not loading. Could you provide the CSS code for this (as bordered)?

Hi selqs,

Thanks for reaching to us.

Please provide URL of the mentioned page, so I can take a closer look.

Regards,

https://woodmart.xtemos.com/2016/07/23/seating-collection-inspiration/

“I want to show you an example from your demo. I would like to make the colored social media icons at the bottom of blog posts look like the second screenshot I sent, where they are colorless.”

Attachments:

You must be logged in to view attached files.

Hi selqs,

Thanks for reaching to us.

Please provide your URL of the mentioned page, so I can take a closer look.

Regards,

Are you kidding me? I guess you didn’t read my message. I even sent a screenshot.

Hi selqs,

Sorry for the inconvenience.

Yes, I see the screenshots. However, please provide your URL of the mentioned page and I can give you better solutions. It can’t be done via screenshots only.

Thanks for understanding.

Regards,

https://woodmart.xtemos.com/2016/07/23/seating-collection-inspiration/

We are using the same theme. Here is your link. Scroll down to the bottom of the blog post in the link I posted and see the social media link.

.single-post-social a.wd-social-icon {
    border: 2px solid #CCC !important;
    color: rgba(0, 0, 0, 0.4) !important;
    background-color: transparent !important;
}

.single-post-social a.wd-social-icon:hover {
    border-color: var(--social-color) !important;
    background-color: var(--social-color) !important;
    color: #ffffff !important;
}

I made it myself, you can check it out. do a review too

Hi selqs,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.wd-social-icons.icons-design-colored .wd-social-icon:not(:hover){
	background-color: transparent;
	color: rgba(0, 0, 0, 0.4) !important;
	border: 2px solid #CCC
}

Regards,

[Author]

Posts