Styling Highlight and Share

This guide explains how to customize the look of Highlight and Share: first using the built-in settings (no code), then using CSS variables and custom CSS for deeper control.

Overriding styles with CSS

Highlight and Share uses CSS custom properties (variables) where possible. You can override them in your theme’s stylesheet, in Appearance → Customize → Additional CSS, or in a child theme.

How it works: The plugin sets variables (e.g. --has-pinterest-button-color). Its own CSS uses those variables. If you redefine the same variable in a more specific selector (e.g. :root or a wrapper), your value wins. That way you don’t have to copy large blocks of CSS—just set the variables you want to change.

CSS variables reference

Inline highlight (selected text)

When users select text and see the yellow highlight (and optional tooltip), these variables control only the tooltip. The highlight background and text colors are set by the plugin from settings; to override them, use the class overrides in the next section.

Variable	Default	What it changes
`--has-inline-highlight-tooltips-background-color`	`#333`	Tooltip background.
`--has-inline-highlight-tooltips-color`	`#FFF`	Tooltip text color.

Example — different tooltip style:

:root {
  --has-inline-highlight-tooltips-background-color: #1a1a2e;
  --has-inline-highlight-tooltips-color: #eaeaea;
}

These apply to the Pinterest and Web Share buttons on images (content, excerpts, featured images).

Variable	Default	What it changes
`--has-pinterest-button-color`	`#E7011D`	Pinterest button background.
`--has-pinterest-button-color-hover`	`#BE0319`	Pinterest button hover background.
`--has-pinterest-icon-color`	`#FFFFFF`	Pinterest icon color.
`--has-pinterest-icon-color-hover`	`#FFFFFF`	Pinterest icon hover.
`--has-pinterest-text-color`	`#FFFFFF`	Pinterest label text.
`--has-pinterest-text-color-hover`	`#FFFFFF`	Pinterest label hover.
`--has-webshare-button-color`	`#f58f2f`	Web Share button background.
`--has-webshare-button-color-hover`	`#e17713`	Web Share button hover.
`--has-webshare-icon-color`	`#FFFFFF`	Web Share icon.
`--has-webshare-icon-color-hover`	`#FFFFFF`	Web Share icon hover.
`--has-webshare-text-color`	`#FFFFFF`	Web Share label text.
`--has-webshare-text-color-hover`	`#FFFFFF`	Web Share label hover.

Example — match your brand:

:root {
  --has-pinterest-button-color: #bd081c;
  --has-pinterest-button-color-hover: #9a0618;
  --has-webshare-button-color: #25d366;
  --has-webshare-button-color-hover: #1da851;
}

The small panel that opens when users click the share icon next to a heading.

Variable	Default	What it changes
`--has-headline-item-row-background`	`#FFF`	Row background.
`--has-headline-item-row-background-hover`	`#efefef`	Row hover background.
`--has-headline-item-row-text-color`	`#1e1e1e`	Row text color.

Example — dark panel:

:root {
  --has-headline-item-row-background: #2d2d2d;
  --has-headline-item-row-background-hover: #3d3d3d;
  --has-headline-item-row-text-color: #f0f0f0;
}

The Click to Share block outputs variables on the block wrapper. You can override them by targeting the block’s container (e.g. .wp-block-dlxplugins-has-click-to-share or the block’s uniqueId class).

Variable	What it changes
`--has-cta-background-color`	Block background.
`--has-cta-background-color-hover`	Block background hover.
`--has-cta-quote-text-color`	Quote text color.
`--has-cta-quote-text-color-hover`	Quote text hover.
`--has-cta-cta-text-color`	“Share” / CTA text color.
`--has-cta-cta-text-color-hover`	CTA text hover.
`--has-cta-icon-color`	Icon color.
`--has-cta-icon-color-hover`	Icon hover.
`--has-cta-border-color`	Border color.
`--has-cta-border-color-hover`	Border hover.
`--has-cta-maximum-width`	Max width of the block.
`--has-cta-inner-padding`	Inner padding.
`--has-cta-outer-margin`	Outer margin.
`--has-cta-border-width`	Border width.
`--has-cta-border-radius`	Border radius.
`--has-cta-quote-font-family`	Quote font.
`--has-cta-quote-font-size`	Quote font size.
`--has-cta-quote-font-weight`	Quote font weight.
`--has-cta-quote-line-height`	Quote line height.
`--has-cta-quote-letter-spacing`	Quote letter spacing.
`--has-cta-quote-text-transform`	Quote text transform.
`--has-cta-cta-font-family`	CTA font.
`--has-cta-cta-font-size`	CTA font size.
`--has-cta-cta-font-weight`	CTA font weight.
`--has-cta-cta-line-height`	CTA line height.
`--has-cta-cta-letter-spacing`	CTA letter spacing.
`--has-cta-cta-text-transform`	CTA text transform.

Example — override CTA colors for all Click to Share blocks:

.wp-block-dlxplugins-has-click-to-share [class*="highlight-and-share-wrapper"] {
  --has-cta-background-color: #f5f5f5;
  --has-cta-background-color-hover: #eee;
  --has-cta-border-color: #ddd;
  --has-cta-quote-text-color: #333;
  --has-cta-cta-text-color: #0066cc;
}

Class-based overrides (when variables aren’t enough)

If there’s no variable for what you want to change, you can target the plugin’s classes directly. Use Appearance → Customize → Additional CSS or your theme’s CSS.

Main wrappers and layout

Class	Where it appears	Purpose
`.highlight-and-share-wrapper`	Share popup, Click to Share block	Main wrapper for share icons.
`.orientation-horizontal`	Same	Icons in a row.
`.orientation-vertical`	Same	Icons in a column.
`.theme-default`	Same	Default theme.
`.theme-brand-colors`	Same	Brand colors (icons only).
`.theme-black`, `.theme-white`, etc.	Same	Other built-in themes.
`.hide-has-labels`	Same	Labels visually hidden (still for screen readers).
`.show-has-labels`	Same	Labels visible.
`.has-icon-label`	Same	Icon + label.
`.has-text`	Same	Label text.
`.has-tooltip`	Same	Tooltip on hover.

Inline highlight (selected text)

Class	Purpose
`.has-inline-text`	The highlighted text span (click to share).
`.has-inline-text-tooltip`	The tooltip above the highlight.

Example — change inline highlight colors without variables:

The plugin injects inline styles for highlight colors from settings. To force your own colors, override with !important or a more specific selector:

.has-inline-text {
  background-color: #e8f4fd !important;
  color: #0d47a1 !important;
}
.has-inline-text:hover {
  background-color: #bbdefb !important;
  color: #0d47a1 !important;
}

Class	Purpose
`.has-pin-image-wrapper`	Wrapper around the image and buttons.
`.has-pin-sharing-icons`	Container for Pin / Share buttons.
`.has-pin-top-left`, `.has-pin-top-right`, etc.	Position of the buttons.
`.has-pin-show-on-hover`	Buttons appear on hover.
`.has-pin-svg-pinterest`	Pinterest button.
`.has-pin-svg-webshare`	Web Share button.
`.has-appearance-round`, `.has-appearance-circle`, `.has-appearance-square`	Button shape.

Class / attribute	Purpose
`[data-has-headline-share]`	Heading that has the share trigger.
`.has-headline-share-trigger`	The link/share icon button.
`.has-headline-share-panel`	The opened panel with network icons.
`.has-headline-link-icon-always-visible`	Icon always visible (no hover).

Creating a simple “theme” with CSS variables

You can define a small set of variables in one place and reuse them across the plugin’s features.

Example — one dark palette for HAS:

:root {
  /* Inline highlight tooltip */
  --has-inline-highlight-tooltips-background-color: #1e1e1e;
  --has-inline-highlight-tooltips-color: #e0e0e0;

  /* Image sharing */
  --has-pinterest-button-color: #4a4a4a;
  --has-pinterest-button-color-hover: #333;
  --has-webshare-button-color: #5a5a5a;
  --has-webshare-button-color-hover: #444;

  /* Headline panel */
  --has-headline-item-row-background: #2a2a2a;
  --has-headline-item-row-background-hover: #3a3a3a;
  --has-headline-item-row-text-color: #e8e8e8;
}

Put this in Appearance → Customize → Additional CSS

Scoping overrides (e.g., one page or one block)

To change styles only in certain places:

Only on posts: Use body.single .highlight-and-share-wrapper { ... } or body.post-type-post :root { ... } (variables on :root will still apply globally unless you set them on a closer ancestor.
Only for the Click to Share block: Target .wp-block-dlxplugins-has-click-to-share and set the --has-cta-* variables on that wrapper.
Only for image sharing: Target .has-pin-image-wrapper and set the --has-pinterest-* and --has-webshare-* variables on that wrapper (they inherit from :root by default).

Example — different image button colors only in the sidebar:

.sidebar .has-pin-image-wrapper {
  --has-pinterest-button-color: #8b4513;
  --has-webshare-button-color: #556b2f;
}

Overriding styles with CSS​

CSS variables reference​

Inline highlight (selected text)​

Image (Pin) sharing buttons​

Headline sharing panel​

Click to Share block (CTA)​

Class-based overrides (when variables aren’t enough)​

Main wrappers and layout​

Inline highlight (selected text)​

Image (Pin) sharing​

Headline sharing​

Creating a simple “theme” with CSS variables​

Scoping overrides (e.g., one page or one block)​

Overriding styles with CSS

CSS variables reference

Inline highlight (selected text)

Image (Pin) sharing buttons

Headline sharing panel

Click to Share block (CTA)

Class-based overrides (when variables aren’t enough)

Main wrappers and layout

Inline highlight (selected text)

Image (Pin) sharing

Headline sharing

Creating a simple “theme” with CSS variables

Scoping overrides (e.g., one page or one block)