ADDED: Support for styling the DOM elements via CSS classes. Version bumped to 1.2.0.

Author: balassy

CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project is documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [1.2.0]
+
+- ADDED: Support for styling the DOM elements via CSS classes.
+
 ## [1.1.0]
 
 - ADDED: Displaying humidity data if provided by the sensor.

MMM-RemoteTemperature.css

@@ -2,8 +2,15 @@
   margin-right: 15px;
 }
 
+.MMM-RemoteTemperature .temp {
+  margin: 0;
+}
+
 .MMM-RemoteTemperature .humidity {
   display: inline-block;
   margin-left: 10px;
 }
 
+.MMM-RemoteTemperature .time {
+  margin: 0;
+}

MMM-RemoteTemperature.js

@@ -24,7 +24,7 @@ Module.register('MMM-RemoteTemperature', {
     return [
       'MMM-RemoteTemperature.css',
       'font-awesome.css',
-      'font-awesome5.css',
+      'font-awesome5.css'
     ];
   },
 
@@ -53,12 +53,13 @@ Module.register('MMM-RemoteTemperature', {
       }
 
       const tempEl = document.createElement('span');
+      tempEl.classList = 'temp';
       tempEl.innerHTML = `${this.viewModel.temp}°`;
       firstLineEl.appendChild(tempEl);
 
       if (this.viewModel.humidity) {
         const humidityEl = document.createElement('span');
-        humidityEl.classList = "humidity";
+        humidityEl.classList = 'humidity';
         humidityEl.innerHTML = `${this.viewModel.humidity}%`;
         firstLineEl.appendChild(humidityEl);
       }
@@ -67,7 +68,7 @@ Module.register('MMM-RemoteTemperature', {
 
       if (this.config.showTime) {
         const secondLineEl = document.createElement('div');
-        secondLineEl.classList = 'dimmed small';
+        secondLineEl.classList = 'time dimmed small';
         secondLineEl.innerHTML = `(${this._formatTimestamp(this.viewModel.timestamp)})`;
         wrapper.appendChild(secondLineEl);
       }

README.md

@@ -106,6 +106,15 @@ Currently this module supports English (`en`) and Hungarian (`hu`) languages. Th
 
 Want to see more languages? Please contribute!
 
+## Customizing the design
+
+You can customize the look and feel of the module via the following CSS classes (from version 1.2.0):
+
+- `symbol`: The style of the icon.
+- `temp`: The style of the temperature value.
+- `humidity`: The style of the humidity value (if specified and rendered).
+- `time`: The style for the timestamp (if configured to show).
+
 ## Contribution
 
 Although for operation this module does not depend on any other module, if you would like to contribute to the codebase, please use the preconfigured linters to analyze the source code before sending a pull request. To run the linters follow these steps:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "MMM-RemoteTemperature",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "MagicMirror module that displays temperature value from a remote sensor.",
   "main": "MMM-RemoteTemperature.js",
   "author": "György Balássy",