Sharing Customization
Custom Color Menu Buttons
Buttons in the universal menu can be set to a custom color to perfectly match any design's color scheme. You can set a custom background color to replace the original icon colors, and also set a custom foreground color to replace the default white color of vector graphics.
Background icon color
Setting a custom color applies the color globally to all AddToAny buttons, including standalone buttons.
var a2a_config = a2a_config || {}; a2a_config.icon_color = "#0166ff";
In Drupal, add the following JavaScript code to your "Additional JavaScript" box in Configuration > Web services > AddToAny > Additional Options.
In WordPress, go to Settings > AddToAny > Icon Style, then change "Original" background to "Custom…" to select a color.
a2a_config.icon_color = "#0166ff";
Icons in the example menu above are colored in "AddToAny blue" (#0166ff
in hexadecimal notation). CSS color keywords such as seagreen
or transparent
can be used as well.
Foreground icon color
You can change the foreground color of menu icons by specifying a second icon_color
value separated by a comma.
In Drupal, add the following JavaScript code to your "Additional JavaScript" box in Configuration > Web services > AddToAny > Additional Options.
In WordPress, go to Settings > AddToAny > Icon Style, then change "Original" foreground to "Custom…" to select a color.
a2a_config.icon_color = "seashell,midnightblue";
The special keyword unset
will display the original background colors.
a2a_config.icon_color = "unset,#fff5ee";