Customize Buttons Appearance
The best way to customize all your social post sharer buttons.
Kind reminder: This tutorial is made for the Nobs • Share Buttons (ex-Juiz Social Post Sharer) plugin available on the WordPress repository but also on Github.
Ways to achieve customization
With Nobs • Share Buttons, the customization possibilies are almost infinite, weither you are a plugin ou a theme developer, or you know a bit of CSS and want to adjust the styling.
To best guide you through the different options for customizing the look of your buttons, I have divided this page into several sections, but you can totally combine these options.
Start with an existing Button Skin
The best way to tweak a little bit the styles of the buttons if to start from an existing theme, the closest one to what you want to achieve.
To do so, follow these steps:
- Got to the admin page Settings > Nobs • Share Buttons > Themes & Networks
- Pick a theme from the existing list
- Then select the social buttons you wanna display
From here, you have a theme applied with a built-in CSS file. You will now have to add CSS properties to your current WordPress Theme. I think that a precise styling is, oftentime, related to the look of your theme, that's why I think it's the best place to adjust styling.
Create a brand new skin for your buttons
If you want to create a reusable skin over your themes and website, it might be more interesting for you to build a custom plugin or a skin folder within your themes.
To do so, here are dedicated tutorials to help you with these tasks, step by step.
Add features, new buttons, etc.
Another way to customize your buttons, is by adding one or several new buttons for you favorite social networks.
To do so, you need to better know how this plugin is built to exploit its full power. But if you are not technical at all, or if you feel a bit too busy lately, don't hesitate to open an issue on the Github repository. I'll take time to read and evaluate your request on my spare time.
Add a social network via the Button API.
You can add a new social network quite easily by following some steps. Before you start, know that you will need some elements to achieve all of that successfully:
- A share URL API provided by your social network.
- An icon for you social network (SVG is best)
- 2 colors in hexadecimal, related to the brand color.
If you meet the requirements, you can follow the following tutorial.
Customize email button
If you've activated the Email button, you probably already found out that there is a modal window option when you click on this button. But also that you can pick one or another option among this modal and custom texts being shared.
To better understand how everything works, I invite you to follow this tutorial on the email customization.