CSS Custom Properties

Overview

Simple Post Like declares its full visual language as CSS custom properties on :root. Every color, size, spacing, and transition value the button uses is controlled by a custom property — so you can restyle it completely from your theme’s stylesheet with no !important overrides, no plugin file edits, and no update risk.

---

Frontend Custom Properties

These properties control the like button on the frontend of your site. All are declared by the spl-css-vars-frontend mixin in :root.

Color

Property	Default	Description
--spl-color	#ec1c76	Primary brand color — used for liked state accents
--spl-color-light	color.adjust(#ec1c76, $lightness: 42%)	Lightened brand color — used for liked background fill
--spl-color-hover	color.adjust(#ec1c76, $lightness: -8%)	Darkened brand color — used on hover

Button Colors

Property	Default	Description
--spl-btn-bg	#ffffff	Button background in default state
--spl-btn-bg-hover	#fff5f6	Button background on hover
--spl-btn-bg-liked	--spl-color-light	Button background in liked state
--spl-btn-border	#c2b0e8	Button border color in default state
--spl-btn-border-liked	#ec1c76	Button border color in liked state
--spl-btn-text	#553392	Button text and icon color in default state
--spl-btn-text-liked	#ec1c76	Button text and icon color in liked state

Shape

Property	Default	Description
--spl-btn-radius	8px	Border radius for the default button style
--spl-btn-radius-pill	100px	Border radius for the pill/rounded button style

Counter

Property	Default	Description
--spl-count-color	#7450b8	Like count text color
--spl-count-size	15px	Like count font size

Typography & Motion

Property	Default	Description
--spl-font-size	13px	Base font size for button label and count text
--spl-transition	0.2s ease	Transition duration and easing for all interactive states

---

How to Override

Add your overrides to your theme’s stylesheet. Target the :root selector to apply globally:

css

:root {
    --spl-color:            #0073aa;
    --spl-btn-border:       #0073aa;
    --spl-btn-border-liked: #0073aa;
    --spl-btn-text-liked:   #0073aa;
    --spl-btn-radius:       4px;
}

You only need to declare the properties you want to change — all others fall back to their defaults automatically.

---

Scoped Overrides

To override styles only in a specific context — for example, only inside the main post content area — scope your custom property declarations to a parent selector instead of :root:

css

/* Override only inside post content */
.entry-content {
    --spl-color:      #your-brand;
    --spl-btn-radius: 0;
}

/* Override only on archive pages */
.archive .post {
    --spl-btn-text:  #555555;
    --spl-count-size: 12px;
}

Because CSS custom properties inherit down the DOM, any override on a parent element automatically applies to all like buttons inside it.

---

Examples

Match your brand color

css

:root {
    --spl-color:            #6200ea;
    --spl-btn-border-liked: #6200ea;
    --spl-btn-text-liked:   #6200ea;
    --spl-btn-bg-liked:     rgba(98, 0, 234, 0.08);
}

Square button style

css

:root {
    --spl-btn-radius: 4px;
}

Fully pill-shaped button (all display styles)

css

:root {
    --spl-btn-radius: 100px;
}

Muted neutral style

css

:root {
    --spl-color:            #888888;
    --spl-btn-border:       #dddddd;
    --spl-btn-border-liked: #888888;
    --spl-btn-text:         #555555;
    --spl-btn-text-liked:   #333333;
    --spl-btn-bg-hover:     #f5f5f5;
}

Slower, bouncier animation

css

:root {
    --spl-transition: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

---

Where to Add Custom CSS

Option 1 — Theme stylesheet Add overrides to your theme’s style.css or your child theme’s style.css.

Option 2 — WordPress Customizer Go to Appearance → Customize → Additional CSS and paste your overrides there. Changes are live-previewed and saved without touching any files.

Option 3 — Enqueue a custom stylesheet Enqueue a separate file from your theme’s functions.php with simple-post-like as a dependency — this guarantees your overrides always load after the plugin’s stylesheet:

php

wp_enqueue_style(
    'my-theme-custom',
    get_template_directory_uri() . '/css/custom.css',
    [ 'simple-post-like' ],
    '1.0.0'
);

---

Next Steps

• Statistics & Analytics — view and interpret your like data
• For Developers — hooks and filters for extending the plugin