Allow setting custom CSS classes for individual widgets

docs/configuration.md

@@ -235,6 +235,8 @@ theme:
 > .widget-type-rss a {
 >     font-size: 1.5rem;
 > }
+>
+> In addition, you can also use the `css-class` property which is available on every widget to set custom class names for individual widgets.
 
 
 ## Pages & Columns
@@ -356,6 +358,7 @@ pages:
 | type | string | yes |
 | title | string | no |
 | cache | string | no |
+| css-class | string | no |
 
 #### `type`
 Used to specify the widget.
@@ -377,6 +380,9 @@ cache: 1d  # 1 day
 >
 > Not all widgets can have their cache duration modified. The calendar and weather widgets update on the hour and this cannot be changed.
 
+#### `css-class`
+Set custom CSS classes for the specific widget instance.
+
 ### RSS
 Display a list of articles from multiple RSS feeds.
 

internal/assets/templates/widget-base.html

@@ -1,4 +1,4 @@
-<div class="widget widget-type-{{ .GetType }}">
+<div class="widget widget-type-{{ .GetType }}{{ if ne "" .CSSClass }} {{ .CSSClass }}{{ end }}">
     <div class="widget-header">
         <div class="uppercase">{{ .Title }}</div>
         {{ if and .Error .ContentAvailable }}
@@ -7,7 +7,7 @@
         <div class="notice-icon notice-icon-minor" title="{{ .Notice }}"></div>
         {{ end }}
     </div>
-    <div class="widget-content {{ if .ContentAvailable }}{{ block "widget-content-classes" . }}{{ end }}{{ end }}">
+    <div class="widget-content{{ if .ContentAvailable }} {{ block "widget-content-classes" . }}{{ end }}{{ end }}">
         {{ if .ContentAvailable }}
             {{ block "widget-content" . }}{{ end }}
         {{ else }}

internal/widget/widget.go

@@ -119,6 +119,7 @@ const (
 type widgetBase struct {
 	Type                string        `yaml:"type"`
 	Title               string        `yaml:"title"`
+	CSSClass            string        `yaml:"css-class"`
 	CustomCacheDuration DurationField `yaml:"cache"`
 	ContentAvailable    bool          `yaml:"-"`
 	Error               error         `yaml:"-"`