# 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.

{% content-ref url="shortcode-parameters" %}
[shortcode-parameters](https://docs.dlxplugins.com/highlight-and-share/click-to-share-shortcode/shortcode-parameters)
{% endcontent-ref %}

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

{% code overflow="wrap" %}

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

{% endcode %}

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:

```css
.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;
}
```