How to change colour of icon to black and white

Tinkering with CSS is code, but it’s an easy way to get started. If you right click on a sharing button in your browser (I would suggest Firefox or Chrome), you can “Inspect” it and see what rules are applied to make it look the way it does. You can experiment with changing things, and once you have something you like, add it to your site’s Additional CSS panel in the customizer to save it.

You could use the setting on the plugin settings page to disable the plugin styles completely, and start from scratch. If you do that, I would suggest copying what you need from the plugin’s CSS file and starting from there, and just not copying things like the colors.

Otherwise, you can override the plugin rules with more specific CSS. For example, adding this would make the buttons black with white text:

.scriptlesssocialsharing a.button {
    background: black !important;
}

You could add the border-radius to that rule as well. Hope that helps you get started–

Dear Robin

Thanks. I tried the following additional CSS to override the plugin rules, but it is not getting changed. Am I doing something wrong?

.scriptlesssocialsharing a.button {
border-radius: 20px;
}
.scriptlesssocialsharing a.button {
background: #707070 !important;
}

Could you please provide me a CSS for the following?
1. rounded corners
2. background color:#707070
3. hover color:#efefef
4. the buttons to be centered not on the left of the page

Sorry for asking you this, but I am not a coder, and do not know how to do it. Please help.

Warm regards,

You will need to provide a link to a specific post if you want detailed help.

Dear Robin,

Please find the link:

I added these rules to your site using Firefox’s developer tools:

.scriptlesssocialsharing-buttons {
  margin: 0 auto;
}

.scriptlesssocialsharing-buttons a.button {
  background: #707070 !important;
  border-radius: 20px;
}

.scriptlesssocialsharing-buttons a.button:hover {
  color: #efefef;
}

You should be able to add them to your Additional CSS panel and have them apply.

Dear Robin,

Thank you, I tried this but it is not working yet. Should I change anything in the plugin settings?

Your CSS is there and working, but only on small screens as you have it inside of a media query. You’ll need to tidy that bit up–make sure that every { has a partner closing } in your additional CSS, and that the styles you are wanting to add for this plugin are outside of the @media statement.

Dear Robin

Thanks. This works on the posts.
But when I add the code [scriptless] to some of the pages, some of the formatting style does not appear. Rounded corners and the hover colors do not appear.
Link
How do I make the same format appear when I give the shortcode also?

Warm regards,

Dear Robin

Please ignore the previous message. There was a caching problem. It works finally! Thank you very much for this wonderful plugin. Really appreciate your responsive support. Will recommend this plugin to others also. Just on suggestion – if you could provide an option within the plugin to change colours or styles, that would improve the usability of the plugin.Thank you.