LogoLogo
Highlight and ShareGet QuotesDLXDLX PluginsMediaRon
Highlight and Share
Highlight and Share
  • Welcome to Highlight and Share
  • Getting Started
    • Installing the Plugin
    • Finding the Plugin's Settings
    • How Highlight and Share Works
    • Configuring the Display Settings
    • Enabling the Social Networks
    • Enabling Shortlinks
    • Advanced Selectors
    • Changing Themes and Appearance
      • The Theme Preview
      • Reordering the Social Networks
      • Choosing a Theme
      • Configuring a Custom Theme
  • Inline Highlighting
    • What is Inline Highlighting
    • How to Add Inline Highlighting to Text
    • Configure Inline Highlighting
  • Image Sharing
    • What is Image Sharing?
    • Configuring Image Sharing
  • Click to Share Shortcode
    • Shortcode Parameters
    • Custom Shortcode Themes
  • Click to Share Block
    • The Click to Share Block
    • Configuring the Block Editor Settings
  • Emails
    • Email Sharing
    • Email Admin Settings
  • Developers
    • Available Social Networks
    • Actions and Filters
      • Disable or Enable Text Selection
      • Changing Labels and Tooltips
      • Disabling CSS
      • Enabling or Disabling Social Networks
    • GitHub Repo
  • Quick Links
    • Highlight and Share Home
    • Highlight and Share Download
    • Support
    • MediaRon Home
    • DLX Plugins Home
    • Brand Assets
Powered by GitBook
On this page

Was this helpful?

Export as PDF
  1. Click to Share Shortcode

Custom Shortcode Themes

PreviousShortcode ParametersNextThe Click to Share Block

Last updated 10 months ago

Was this helpful?

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.

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;
}
Shortcode Parameters