More settings

README.md

@@ -10,7 +10,7 @@ Released under the MIT license
 ## Description
 This is the web backend as well as the documentation and resource provider for SteamWidgets.
 SteamWidgets offers the possibility to comfortably render Steam related widgets into your web
-document with as less effort as possible. 
+document with as little effort as possible. 
 
 ## Current featured widgets
 - Steam App Widget: Renders widgets of a Steam app/game

app/resources/css/steam_workshop.dev.css

@@ -6,9 +6,6 @@
     background-color: rgb(22, 32, 45);
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     border-radius: 25px;
-    margin-top: 20px;
-    margin-left: 10px;
-    margin-right: 10px;
 }
 
 .steam-workshop-preview {
@@ -22,6 +19,16 @@
     border-bottom-left-radius: 25px;
 }
 
+.steam-workshop-preview-small {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+
+.steam-workshop-preview-none {
+    border-top-left-radius: unset;
+    border-bottom-left-radius: unset;
+}
+
 .steam-workshop-info {
     position: relative;
     display: inline-block;
@@ -117,6 +124,16 @@
         border-bottom-left-radius: unset;
     }
 
+    .steam-workshop-preview-small {
+        border-top-right-radius: 4px;
+        border-bottom-left-radius: unset;
+    }
+
+    .steam-workshop-preview-none {
+        border-top-right-radius: unset;
+        border-bottom-left-radius: unset;
+    }
+
     .steam-workshop-info {
         width: 100%;
         height: 195px;

app/resources/js/steam_workshop.dev.js

@@ -32,6 +32,11 @@
         var showImage = (typeof this.attributes['show-image'] !== 'undefined') ? parseInt(this.attributes['show-image'].value) : 1;
         var styleBorder = (typeof this.attributes['style-border'] !== 'undefined') ? this.attributes['style-border'].value : null;
         var styleShadow = (typeof this.attributes['style-shadow'] !== 'undefined') ? parseInt(this.attributes['style-shadow'].value) : 1;
+        var styleColorBackground = (typeof this.attributes['style-color-background'] !== 'undefined') ? this.attributes['style-color-background'].value : null;
+        var styleColorTitle = (typeof this.attributes['style-color-title'] !== 'undefined') ? this.attributes['style-color-title'].value : null;
+        var styleColorDescription = (typeof this.attributes['style-color-description'] !== 'undefined') ? this.attributes['style-color-description'].value : null;
+        var styleColorStatsCount = (typeof this.attributes['style-color-stats-count'] !== 'undefined') ? this.attributes['style-color-stats-count'].value : null;
+        var styleColorStatsLabel = (typeof this.attributes['style-color-stats-label'] !== 'undefined') ? this.attributes['style-color-stats-label'].value : null;
         
         if (itemid !== null) {
             this.storedData = {
@@ -43,7 +48,12 @@
                 viewtext: viewtext,
                 showImage: showImage,
                 styleBorder: styleBorder,
-                styleShadow: styleShadow
+                styleShadow: styleShadow,
+                styleColorBackground: styleColorBackground,
+                styleColorTitle: styleColorTitle,
+                styleColorDescription: styleColorDescription,
+                styleColorStatsCount: styleColorStatsCount,
+                styleCOlorStatsLabel: styleColorStatsLabel
             };
 
             this.setupWidget(
@@ -55,12 +65,17 @@
                 viewtext,
                 showImage,
                 styleBorder,
-                styleShadow
+                styleShadow,
+                styleColorBackground,
+                styleColorTitle,
+                styleColorDescription,
+                styleColorStatsCount,
+                styleColorStatsLabel
             );
         }
     }
  
-     setupWidget(itemid, views, subscriptions, favorites, author, viewtext, showImage, styleBorder, styleShadow)
+    setupWidget(itemid, views, subscriptions, favorites, author, viewtext, showImage, styleBorder, styleShadow, styleColorBackground, styleColorTitle, styleColorDescription, styleColorStatsCount, styleColorStatsLabel)
     {
         var req = new XMLHttpRequest();
         var self = this;
@@ -78,6 +93,32 @@
                     document.getElementsByTagName('head')[0].appendChild(link);
                 }
 
+                let borderCodeWorkshop = '';
+                let borderCodeWorkshopPreview = '';
+                if (styleBorder !== null) {
+                    if (styleBorder === 'max') {
+                        borderCodeWorkshop = '';
+                        borderCodeWorkshopPreview = '';
+                    } else if (styleBorder === 'small') {
+                        borderCodeWorkshop = 'border-radius: 4px;';
+                        borderCodeWorkshopPreview = 'steam-workshop-preview-small';
+                    } else if (styleBorder === 'none') {
+                        borderCodeWorkshop = 'border-radius: unset;';
+                        borderCodeWorkshopPreview = 'steam-workshop-preview-none';
+                    }
+                }
+
+                let workshopBaseStyle = '';
+                if (!styleShadow) {
+                    workshopBaseStyle += 'box-shadow: unset;';
+                }
+                if (borderCodeWorkshop.length > 0) {
+                    workshopBaseStyle += borderCodeWorkshop;
+                }
+                if (styleColorBackground !== null) {
+                    workshopBaseStyle += 'background-color: ' + styleColorBackground + ';';
+                }
+
                 let description = json.data.description;
                 if (description.length >= self.DESCRIPTION_MAX_LEN) {
                 description = description.substr(0, self.DESCRIPTION_MAX_LEN - 3) + '...';
@@ -86,28 +127,28 @@
                 author = author.replace(':creator', json.data.creator_data.personaname);
                 
                 let html = `
-                    <div class="steam-workshop" ` + ((!styleShadow) ? 'style="box-shadow: unset;"' : '') + `>
+                <div class="steam-workshop" ` + ((workshopBaseStyle.length > 0) ? 'style="' + workshopBaseStyle + '"' : '') + `>
-                        <div class="steam-workshop-preview" style="background-image: url('` + json.data.preview_url + `'); ` + ((!showImage) ? 'display: none;' : '') + `"></div>
+                    <div class="steam-workshop-preview ` + ((borderCodeWorkshopPreview.length > 0) ? borderCodeWorkshopPreview : '') + `" style="background-image: url('` + json.data.preview_url + `'); ` + ((!showImage) ? 'display: none;' : '') + `"></div>
                 
                     <div class="steam-workshop-info" ` + ((!showImage) ? 'style="top: 13px; width: 100%;"' : '') + `>
-                            <div class="steam-workshop-info-title">` + json.data.title + `</div>
+                        <div class="steam-workshop-info-title" ` + ((styleColorTitle !== null) ? 'style="color: ' + styleColorTitle + ';"' : '') + `>` + json.data.title + `</div>
                 
-                            <div class="steam-workshop-info-description">` + description + `</div>
+                        <div class="steam-workshop-info-description" ` + ((styleColorDescription !== null) ? 'style="color: ' + styleColorDescription + ';"' : '') +  `>` + description + `</div>
                 
                         <div class="steam-workshop-info-stats">
                             <div class="steam-workshop-info-stats-item">
-                                    <div class="steam-workshop-info-stats-item-count">` + self.readableCount(json.data.views) + `</div>
+                                <div class="steam-workshop-info-stats-item-count" ` + ((styleColorStatsCount !== null) ? 'style="color: ' + styleColorStatsCount + ';"' : '') +  `>` + self.readableCount(json.data.views) + `</div>
-                                    <div class="steam-workshop-info-stats-item-label">` + views + `</div>
+                                <div class="steam-workshop-info-stats-item-label" ` + ((styleColorStatsLabel !== null) ? 'style="color: ' + styleColorStatsLabel + ';"' : '') +  `>` + views + `</div>
                             </div>
                 
                             <div class="steam-workshop-info-stats-item">
-                                    <div class="steam-workshop-info-stats-item-count">` + self.readableCount(json.data.subscriptions) + `</div>
+                                <div class="steam-workshop-info-stats-item-count" ` + ((styleColorStatsCount !== null) ? 'style="color: ' + styleColorStatsCount + ';"' : '') +  `>` + self.readableCount(json.data.subscriptions) + `</div>
-                                    <div class="steam-workshop-info-stats-item-label">`+ subscriptions + `</div>
+                                <div class="steam-workshop-info-stats-item-label" ` + ((styleColorStatsLabel !== null) ? 'style="color: ' + styleColorStatsLabel + ';"' : '') +  `>`+ subscriptions + `</div>
                             </div>
                 
                             <div class="steam-workshop-info-stats-item">
-                                    <div class="steam-workshop-info-stats-item-count">` + self.readableCount(json.data.favorited) + `</div>
+                                <div class="steam-workshop-info-stats-item-count" ` + ((styleColorStatsCount !== null) ? 'style="color: ' + styleColorStatsCount + ';"' : '') +  `>` + self.readableCount(json.data.favorited) + `</div>
-                                    <div class="steam-workshop-info-stats-item-label">`+ favorites + `</div>
+                                <div class="steam-workshop-info-stats-item-label" ` + ((styleColorStatsLabel !== null) ? 'style="color: ' + styleColorStatsLabel + ';"' : '') +  `>`+ favorites + `</div>
                             </div>
                         </div>
                 
@@ -140,7 +181,12 @@
             this.storedData.viewtext,
             this.storedData.showImage,
             this.storedData.styleBorder,
-            this.storedData.styleShadow
+            this.storedData.styleShadow,
+            this.storedData.styleColorBackground,
+            this.storedData.styleColorTitle,
+            this.storedData.styleColorDescription,
+            this.storedData.styleColorStatsCount,
+            this.storedData.styleColorStatsLabel
         );
     }
 
@@ -161,7 +207,12 @@
             this.storedData.viewtext,
             this.storedData.showImage,
             this.storedData.styleBorder,
-            this.storedData.styleShadow
+            this.storedData.styleShadow,
+            this.storedData.styleColorBackground,
+            this.storedData.styleColorTitle,
+            this.storedData.styleColorDescription,
+            this.storedData.styleColorStatsCount,
+            this.storedData.styleColorStatsLabel
         );
     }
 
@@ -178,7 +229,12 @@
             this.storedData.viewtext,
             this.storedData.showImage,
             this.storedData.styleBorder,
-            this.storedData.styleShadow
+            this.storedData.styleShadow,
+            this.storedData.styleColorBackground,
+            this.storedData.styleColorTitle,
+            this.storedData.styleColorDescription,
+            this.storedData.styleColorStatsCount,
+            this.storedData.styleColorStatsLabel
         );
     }
 
@@ -235,10 +291,20 @@
 
         var styleBorder = null;
         var styleShadow = 1;
+        var styleColorBackground = null;
+        var styleColorTitle = null;
+        var styleColorDescription = null;
+        var styleColorStatsCount = null;
+        var styleColorStatsLabel = null;
         
         if (typeof config.style !== 'undefined') {
             styleBorder = (typeof config.style.border !== 'undefined') ? config.style.border : null;
             styleShadow = (typeof config.style.shadow !== 'undefined') ? config.style.shadow : 1;
+            styleColorBackground = (typeof config.style.colorBackground !== 'undefined') ? config.style.colorBackground : null;
+            styleColorTitle = (typeof config.style.colorTitle !== 'undefined') ? config.style.colorTitle : null;
+            styleColorDescription = (typeof config.style.colorDescription !== 'undefined') ? config.style.colorDescription : null;
+            styleColorStatsCount = (typeof config.style.colorStatsCount !== 'undefined') ? config.style.colorStatsCount : null;
+            styleColorStatsLabel = (typeof config.style.colorStatsLabel !== 'undefined') ? config.style.colorStatsLabel : null;
         }
 
         if (typeof styleShadow === 'boolean') {
@@ -255,6 +321,11 @@
         this.elem.setAttribute('show-image', showImage);
         this.elem.setAttribute('style-border', styleBorder);
         this.elem.setAttribute('style-shadow', styleShadow);
+        this.elem.setAttribute('style-color-background', styleColorBackground);
+        this.elem.setAttribute('style-color-title', styleColorTitle);
+        this.elem.setAttribute('style-color-description', styleColorDescription);
+        this.elem.setAttribute('style-color-stats-count', styleColorStatsCount);
+        this.elem.setAttribute('style-color-stats-label', styleColorStatsLabel);
 
         let sel = document.querySelector(selector);
         if (sel) {

app/views/index.php

@@ -632,6 +632,31 @@ document.addEventListener('DOMContentLoaded', function() {
 					<td>style-shadow / style.shadow</td>
 					<td>You can specify false to prevent displaying box shadow or true to enable (default)</td>
 				</tr>
+
+				<tr>
+					<td>style-color-background / style.colorBackground</td>
+					<td>Specify a CSS value for the background color</td>
+				</tr>
+
+				<tr class="tr-colored">
+					<td>style-color-title / style.colorTitle</td>
+					<td>Specify a CSS value for the title color</td>
+				</tr>
+
+				<tr>
+					<td>style-color-description / style.colorDescription</td>
+					<td>Specify a CSS value for the description color</td>
+				</tr>
+
+				<tr class="tr-colored">
+					<td>style-color-stats-count / style.colorStatsCount</td>
+					<td>Specify a CSS value for the stats count color</td>
+				</tr>
+
+				<tr>
+					<td>style-color-stats-label / style.colorStatsLabel</td>
+					<td>Specify a CSS value for the stats label color</td>
+				</tr>
 			</tbody>
 		</table>
 	</p>

public/css/steamwidgets/v1/steam_workshop.css

@@ -6,9 +6,6 @@
     background-color: rgb(22, 32, 45);
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     border-radius: 25px;
-    margin-top: 20px;
-    margin-left: 10px;
-    margin-right: 10px;
 }
 
 .steam-workshop-preview {
@@ -22,6 +19,16 @@
     border-bottom-left-radius: 25px;
 }
 
+.steam-workshop-preview-small {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+
+.steam-workshop-preview-none {
+    border-top-left-radius: unset;
+    border-bottom-left-radius: unset;
+}
+
 .steam-workshop-info {
     position: relative;
     display: inline-block;
@@ -117,6 +124,16 @@
         border-bottom-left-radius: unset;
     }
 
+    .steam-workshop-preview-small {
+        border-top-right-radius: 4px;
+        border-bottom-left-radius: unset;
+    }
+
+    .steam-workshop-preview-none {
+        border-top-right-radius: unset;
+        border-bottom-left-radius: unset;
+    }
+
     .steam-workshop-info {
         width: 100%;
         height: 195px;

public/js/steamwidgets/v1/steam_workshop.js

@@ -32,6 +32,11 @@
         var showImage = (typeof this.attributes['show-image'] !== 'undefined') ? parseInt(this.attributes['show-image'].value) : 1;
         var styleBorder = (typeof this.attributes['style-border'] !== 'undefined') ? this.attributes['style-border'].value : null;
         var styleShadow = (typeof this.attributes['style-shadow'] !== 'undefined') ? parseInt(this.attributes['style-shadow'].value) : 1;
+        var styleColorBackground = (typeof this.attributes['style-color-background'] !== 'undefined') ? this.attributes['style-color-background'].value : null;
+        var styleColorTitle = (typeof this.attributes['style-color-title'] !== 'undefined') ? this.attributes['style-color-title'].value : null;
+        var styleColorDescription = (typeof this.attributes['style-color-description'] !== 'undefined') ? this.attributes['style-color-description'].value : null;
+        var styleColorStatsCount = (typeof this.attributes['style-color-stats-count'] !== 'undefined') ? this.attributes['style-color-stats-count'].value : null;
+        var styleColorStatsLabel = (typeof this.attributes['style-color-stats-label'] !== 'undefined') ? this.attributes['style-color-stats-label'].value : null;
         
         if (itemid !== null) {
             this.storedData = {
@@ -43,7 +48,12 @@
                 viewtext: viewtext,
                 showImage: showImage,
                 styleBorder: styleBorder,
-                styleShadow: styleShadow
+                styleShadow: styleShadow,
+                styleColorBackground: styleColorBackground,
+                styleColorTitle: styleColorTitle,
+                styleColorDescription: styleColorDescription,
+                styleColorStatsCount: styleColorStatsCount,
+                styleCOlorStatsLabel: styleColorStatsLabel
             };
 
             this.setupWidget(
@@ -55,12 +65,17 @@
                 viewtext,
                 showImage,
                 styleBorder,
-                styleShadow
+                styleShadow,
+                styleColorBackground,
+                styleColorTitle,
+                styleColorDescription,
+                styleColorStatsCount,
+                styleColorStatsLabel
             );
         }
     }
  
-     setupWidget(itemid, views, subscriptions, favorites, author, viewtext, showImage, styleBorder, styleShadow)
+    setupWidget(itemid, views, subscriptions, favorites, author, viewtext, showImage, styleBorder, styleShadow, styleColorBackground, styleColorTitle, styleColorDescription, styleColorStatsCount, styleColorStatsLabel)
     {
         var req = new XMLHttpRequest();
         var self = this;
@@ -78,6 +93,32 @@
                     document.getElementsByTagName('head')[0].appendChild(link);
                 }
 
+                let borderCodeWorkshop = '';
+                let borderCodeWorkshopPreview = '';
+                if (styleBorder !== null) {
+                    if (styleBorder === 'max') {
+                        borderCodeWorkshop = '';
+                        borderCodeWorkshopPreview = '';
+                    } else if (styleBorder === 'small') {
+                        borderCodeWorkshop = 'border-radius: 4px;';
+                        borderCodeWorkshopPreview = 'steam-workshop-preview-small';
+                    } else if (styleBorder === 'none') {
+                        borderCodeWorkshop = 'border-radius: unset;';
+                        borderCodeWorkshopPreview = 'steam-workshop-preview-none';
+                    }
+                }
+
+                let workshopBaseStyle = '';
+                if (!styleShadow) {
+                    workshopBaseStyle += 'box-shadow: unset;';
+                }
+                if (borderCodeWorkshop.length > 0) {
+                    workshopBaseStyle += borderCodeWorkshop;
+                }
+                if (styleColorBackground !== null) {
+                    workshopBaseStyle += 'background-color: ' + styleColorBackground + ';';
+                }
+
                 let description = json.data.description;
                 if (description.length >= self.DESCRIPTION_MAX_LEN) {
                 description = description.substr(0, self.DESCRIPTION_MAX_LEN - 3) + '...';
@@ -86,28 +127,28 @@
                 author = author.replace(':creator', json.data.creator_data.personaname);
                 
                 let html = `
-                    <div class="steam-workshop" ` + ((!styleShadow) ? 'style="box-shadow: unset;"' : '') + `>
+                <div class="steam-workshop" ` + ((workshopBaseStyle.length > 0) ? 'style="' + workshopBaseStyle + '"' : '') + `>
-                        <div class="steam-workshop-preview" style="background-image: url('` + json.data.preview_url + `'); ` + ((!showImage) ? 'display: none;' : '') + `"></div>
+                    <div class="steam-workshop-preview ` + ((borderCodeWorkshopPreview.length > 0) ? borderCodeWorkshopPreview : '') + `" style="background-image: url('` + json.data.preview_url + `'); ` + ((!showImage) ? 'display: none;' : '') + `"></div>
                 
                     <div class="steam-workshop-info" ` + ((!showImage) ? 'style="top: 13px; width: 100%;"' : '') + `>
-                            <div class="steam-workshop-info-title">` + json.data.title + `</div>
+                        <div class="steam-workshop-info-title" ` + ((styleColorTitle !== null) ? 'style="color: ' + styleColorTitle + ';"' : '') + `>` + json.data.title + `</div>
                 
-                            <div class="steam-workshop-info-description">` + description + `</div>
+                        <div class="steam-workshop-info-description" ` + ((styleColorDescription !== null) ? 'style="color: ' + styleColorDescription + ';"' : '') +  `>` + description + `</div>
                 
                         <div class="steam-workshop-info-stats">
                             <div class="steam-workshop-info-stats-item">
-                                    <div class="steam-workshop-info-stats-item-count">` + self.readableCount(json.data.views) + `</div>
+                                <div class="steam-workshop-info-stats-item-count" ` + ((styleColorStatsCount !== null) ? 'style="color: ' + styleColorStatsCount + ';"' : '') +  `>` + self.readableCount(json.data.views) + `</div>
-                                    <div class="steam-workshop-info-stats-item-label">` + views + `</div>
+                                <div class="steam-workshop-info-stats-item-label" ` + ((styleColorStatsLabel !== null) ? 'style="color: ' + styleColorStatsLabel + ';"' : '') +  `>` + views + `</div>
                             </div>
                 
                             <div class="steam-workshop-info-stats-item">
-                                    <div class="steam-workshop-info-stats-item-count">` + self.readableCount(json.data.subscriptions) + `</div>
+                                <div class="steam-workshop-info-stats-item-count" ` + ((styleColorStatsCount !== null) ? 'style="color: ' + styleColorStatsCount + ';"' : '') +  `>` + self.readableCount(json.data.subscriptions) + `</div>
-                                    <div class="steam-workshop-info-stats-item-label">`+ subscriptions + `</div>
+                                <div class="steam-workshop-info-stats-item-label" ` + ((styleColorStatsLabel !== null) ? 'style="color: ' + styleColorStatsLabel + ';"' : '') +  `>`+ subscriptions + `</div>
                             </div>
                 
                             <div class="steam-workshop-info-stats-item">
-                                    <div class="steam-workshop-info-stats-item-count">` + self.readableCount(json.data.favorited) + `</div>
+                                <div class="steam-workshop-info-stats-item-count" ` + ((styleColorStatsCount !== null) ? 'style="color: ' + styleColorStatsCount + ';"' : '') +  `>` + self.readableCount(json.data.favorited) + `</div>
-                                    <div class="steam-workshop-info-stats-item-label">`+ favorites + `</div>
+                                <div class="steam-workshop-info-stats-item-label" ` + ((styleColorStatsLabel !== null) ? 'style="color: ' + styleColorStatsLabel + ';"' : '') +  `>`+ favorites + `</div>
                             </div>
                         </div>
                 
@@ -140,7 +181,12 @@
             this.storedData.viewtext,
             this.storedData.showImage,
             this.storedData.styleBorder,
-            this.storedData.styleShadow
+            this.storedData.styleShadow,
+            this.storedData.styleColorBackground,
+            this.storedData.styleColorTitle,
+            this.storedData.styleColorDescription,
+            this.storedData.styleColorStatsCount,
+            this.storedData.styleColorStatsLabel
         );
     }
 
@@ -161,7 +207,12 @@
             this.storedData.viewtext,
             this.storedData.showImage,
             this.storedData.styleBorder,
-            this.storedData.styleShadow
+            this.storedData.styleShadow,
+            this.storedData.styleColorBackground,
+            this.storedData.styleColorTitle,
+            this.storedData.styleColorDescription,
+            this.storedData.styleColorStatsCount,
+            this.storedData.styleColorStatsLabel
         );
     }
 
@@ -178,7 +229,12 @@
             this.storedData.viewtext,
             this.storedData.showImage,
             this.storedData.styleBorder,
-            this.storedData.styleShadow
+            this.storedData.styleShadow,
+            this.storedData.styleColorBackground,
+            this.storedData.styleColorTitle,
+            this.storedData.styleColorDescription,
+            this.storedData.styleColorStatsCount,
+            this.storedData.styleColorStatsLabel
         );
     }
 
@@ -235,10 +291,20 @@
 
         var styleBorder = null;
         var styleShadow = 1;
+        var styleColorBackground = null;
+        var styleColorTitle = null;
+        var styleColorDescription = null;
+        var styleColorStatsCount = null;
+        var styleColorStatsLabel = null;
         
         if (typeof config.style !== 'undefined') {
             styleBorder = (typeof config.style.border !== 'undefined') ? config.style.border : null;
             styleShadow = (typeof config.style.shadow !== 'undefined') ? config.style.shadow : 1;
+            styleColorBackground = (typeof config.style.colorBackground !== 'undefined') ? config.style.colorBackground : null;
+            styleColorTitle = (typeof config.style.colorTitle !== 'undefined') ? config.style.colorTitle : null;
+            styleColorDescription = (typeof config.style.colorDescription !== 'undefined') ? config.style.colorDescription : null;
+            styleColorStatsCount = (typeof config.style.colorStatsCount !== 'undefined') ? config.style.colorStatsCount : null;
+            styleColorStatsLabel = (typeof config.style.colorStatsLabel !== 'undefined') ? config.style.colorStatsLabel : null;
         }
 
         if (typeof styleShadow === 'boolean') {
@@ -255,6 +321,11 @@
         this.elem.setAttribute('show-image', showImage);
         this.elem.setAttribute('style-border', styleBorder);
         this.elem.setAttribute('style-shadow', styleShadow);
+        this.elem.setAttribute('style-color-background', styleColorBackground);
+        this.elem.setAttribute('style-color-title', styleColorTitle);
+        this.elem.setAttribute('style-color-description', styleColorDescription);
+        this.elem.setAttribute('style-color-stats-count', styleColorStatsCount);
+        this.elem.setAttribute('style-color-stats-label', styleColorStatsLabel);
 
         let sel = document.querySelector(selector);
         if (sel) {