daniel/hugo_cookie_consent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make banner and button styling configurable via CSS custom properties

Browse Source 
Sites had to copy the entire stylesheet to change colors or sizing.
Every value is now backed by a --cookie-* custom property with the
original value as fallback, so sites can override just what they need
from their own CSS. Also fixes the README's @import path, which had
gone stale since the stylesheet was renamed and moved in 5597e11.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
daniel
2026-08-08 21:01:18 +02:00
co-authored by Claude Sonnet 5
parent 3f511f5e6f
commit 1ea70c6d26
2 changed files with 69 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+46 -3
View File
@@ -49,10 +49,10 @@ structure with `_partials` and `_shortcode` directories with leading underscores
```
6. Ensure that the SCSS style sheet is being loaded, e.g. by adding this line to
your main *.css file:
your main *.scss file:
```scss
@import "hugo_cookie_consent/style";
@import "hugo_cookie_consent";
```
7. Optionally, insert a `hugo_cookie_consent/settings` partial somewhere on your
@@ -85,8 +85,51 @@ hugo_cookie_consent:
| `matomo_host` | URL of the Matomo host. |
| `matomo_site_id` | Matomo site ID to use for tracking. |
## Styling
The banner and its buttons are styled with a small set of [CSS custom
properties][css-vars], each with a sensible default baked in. To adjust the
look of the banner on your site, set any of these properties in your own
stylesheet (no need to copy or override `hugo_cookie_consent.scss`):
```css
:root {
--cookie-banner-bg: #1e293b;
--cookie-banner-color: #f1f5f9;
--cookie-accept-bg: #16a34a;
--cookie-decline-bg: #dc2626;
}
```
| Custom property | Default | Applies to |
|----------------------------------|-----------------|---------------------------------------------|
| `--cookie-banner-bg` | `#4A5568` | Banner background |
| `--cookie-banner-color` | `#E2E8F0` | Banner text color |
| `--cookie-banner-border-color` | `#e2e2e2` | Banner border |
| `--cookie-banner-border-radius` | `12px` | Banner corner radius |
| `--cookie-banner-shadow` | `0 0 36px #111` | Banner drop shadow |
| `--cookie-banner-max-width` | `480px` | Banner max width |
| `--cookie-banner-top` | `2.5rem` | Banner distance from top of viewport |
| `--cookie-banner-padding` | `1rem 1.25rem` | Banner inner padding |
| `--cookie-banner-font-size` | `14px` | Banner message text size |
| `--cookie-banner-z-index` | `9999` | Banner stacking order |
| `--cookie-button-padding` | `.45rem 1rem` | All buttons |
| `--cookie-button-border-radius` | `8px` | All buttons |
| `--cookie-button-border-color` | `#ccc` | All buttons (overridden by the three below) |
| `--cookie-button-font-size` | `13px` | All buttons |
| `--cookie-accept-bg` | `#4A5E52` | Accept button background |
| `--cookie-accept-color` | `#fff` | Accept button text |
| `--cookie-accept-border-color` | `#1a1a1a` | Accept button border |
| `--cookie-decline-bg` | `#2D3748` | Decline button background |
| `--cookie-decline-color` | `#fff` | Decline button text |
| `--cookie-decline-border-color` | `#1a1a1a` | Decline button border |
| `--cookie-settings-bg` | `#272b2e` | Settings-shortcode button background |
| `--cookie-settings-color` | `#fff` | Settings-shortcode button text |
| `--cookie-settings-border-color` | `#1a1a1a` | Settings-shortcode button border |
[anthropic claude]: https://claude.ai
[css-vars]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
[gdpr]: https://en.wikipedia.org/wiki/GDPR
[matomo]: https://matomo.org
[mod-doc]: https://gohugo.io/hugo-modules/use-modules/#import
[v0.146.0]: https://github.com/gohugoio/hugo/releases/tag/v0.146.0
[v0.146.0]: https://github.com/gohugoio/hugo/releases/tag/v0.146.0