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

---

Image (Pin) sharing buttons

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

---

Headline sharing panel

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

---

Click to Share block (CTA)

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

Image (Pin) sharing

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.

Headline sharing

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