Custom Shortcode Themes

If you are going to provide your own styles, you can do so via the shortcode parameters or by creating your own CSS theme for the shortcode.

Shortcode Parameters

To specify a theme in the shortcode, just pass a theme-slug as part of the theme shortcode parameter:

[has_click_to_share theme="custom-red"]This is some text I'd like to share.[/has_click_to_share]

There will be a CSS wrapper around the shortcode with custom-red, which you can then style.

.has-cts-shortcode-theme-custom-red {}

Several CSS variables can be used to style the various parts of the Click to Share box. These are listed below:

.has-cts-shortcode-theme-custom-red {
	--has-cts-background: #ff0000;
	--has-cts-background-hover: #cc0000;
	--has-cts-share-text-color: #ffffff;
	--has-cts-share-text-color-hover: #ffffff;
	--has-cts-text-color: #ffffff;
	--has-cts-text-color-hover: #ffffff;
	--has-cts-border: 1px solid #ff0000;
	--has-cts-border-radius: 4px;
	--has-cts-border-hover: 1px solid #cc0000;
	--has-cts-icon-color: #ffffff;
	--has-cts-icon-color-hover: #ffffff;
	--has-cts-padding: 25px 35px;
	--has-cts-max-width: 650px;
	--has-cts-margin: 20px auto;
	--has-cts-font-size-small: 0.8em;
	--has-cts-font-size-medium: 1.4em;
	--has-cts-font-size-large: 1.8em;
	--has-cts-button-font-size-small: 0.8em;
	--has-cts-button-font-size-medium: 1.4em;
	--has-cts-button-font-size-large: 1.8em;
	--has-cts-icon-size-small: 1;
	--has-cts-icon-size-medium: 1.2;
	--has-cts-icon-size-large: 1.5;
}