# 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:**

```css
: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:**

```css
: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:**

```css
: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:**

```css
.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:

```css
.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:**

```css
: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:**

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