@jasondreher if you have a pc in between the switch and the raspberry you can have the pc send a http get request to the mirror with MMM-Syslog (https://github.com/paviro/MMM-syslog)

@zdenek

.clock .time {
Color: green;
}

And as @strawberry-3-141 mentioned. Just the seconds

.clock sup.dimmed {
Color: #00FFAA;
}

First off, you need a space between the two classes .modulename.class is not the same as .modulename .class

These are the classes in the clock module

dateWrapper.className = "date normal medium";
		timeWrapper.className = "time bright large light";
		secondsWrapper.className = "dimmed";
		weekWrapper.className = "week dimmed medium"

As you can see there are no individual classname assigned to the secondsWrapper, just the dimmed class which is used by the weekWrapper as well.

If you look at timeWrapper you will se that it will get css code frome four different classes.
Bright gives the text a white color.
Large gives the text it’s font size.
And
Light gives the text the weight of the font.

@zdenek I would start by searching for class or className in the module .js file
Trying to isolate what object is being rendered and see if it has a individual class name or general one (the latter being font sizes like small or large, or font color and weight, light and dimmed).

if you find a individual class name (like date for the default clock’s date) you can easily just change the css for that particular element like this

.clock .date {
--csscode--
}

There is also the general ones used for headers and text etc. for an example small which is used to set the font size in the calendar module (amongst many other).

If you want to change the font size of elements with the class name small in the calendar you do this like so

.calendar .small {
font-size: 10px;
}

If you want to change the font size of ALL elements that uses the class name small you do so by removing the module classname like this

.small {
font-size 10px
}

Good practice is to always add the module class name before the class you are changing (to avoid you messing up other/future modules that maybe uses the same class name).

The module class name is the exact name of the module in the config file and/or the name of the modules folder.

If the text/image or anything lacks a class name you can apply css to elements as well.
so for an example, if you have a module with only one image in it, and you want to change the size of that image . you could do that like this :

.modulename img {
width: 500px;
height: 500px;
}

Do note however, this code will change all < img >-elements, ie all images will get the same size.

But the same can be applied to td tr table p span etc etc.

and if you want to apply css to the entire module (for an example if you want to limit the width of the module) you can do so by

.modulename {
Width: 300px;
}

There are more tricks to make your custom layout, but these are the basics as I see them.
So I hope this helps!

@strawberry-3.141 Great, the code is done! All left is just to include it as a startup page so new users can get started easily as eating a strawberry pie!

@strawberry-3.141 I have no bloody idea, haven’t tried the remote module.

but first off, not remote, second it could fetch a list (database) of modules and execute the git clone commands directly. or is that included in the remote as well?

@Beh Maybe a setup page for the MM config file,

basically just a script that runs just like the MM page (maybe could be started with npm start config?)
where you could access a list of modules (retrieved from an “official” module list that has the right format),

And when the module is selected and “install” is clicked the page does the git clone process, npm install and adds the configuration fields to the config.js file according to the instructions gotten from the module list. (all default settings except for location which the user should select before he is able to install the module).

Since the format of the config for all modules are more or less the same it shouldn’t be that difficult to have the page retrieve the different config variables from the modules and display it in a more userfriendly way (ie input fields on a html page instead of sorting out the “code”).

Because let’s face it, most of the “troubleshooting” for new users are config file related errors (a comma missing or using wrong quotation marks, placing the module code outside the module list etc etc)

Shouch a solution would probably not require a rewrite of any MM base code, it would just be a standalone addition.
But it would require a compatible modules list with a strict format.

@pauabaer add this to your custom.css file

.weatherforecast .max-temp {
  padding-left: 20px;
  padding-right: 0;
}

@strawberry-3.141 just as a side note, would the class be added to the module div classes?

@fox outside

@fox try

.MMM-SystemStats {
Font-size: 70%;
}

In your custom.css file

@zdenek

I noticed I have added two . in the code,

.netatmo .wi-thermometer {
color: yellow;
}

This is just a guess, since I’m not using this module myself,
You would probably get a better answer from the ones who wrote the module

@zdenek Okey first off, that is NOT the custom.css file (that is located in MagicMirror/css/)

You should not change the modules files if you can avoid it, and you always can when it comes to css code.

Okey. then you add

.netatmo .wi-thermometer {
color: yellow;
}

to the custom.css file.

@zdenek open your language .json file in the folder “translations” and add

	"TODAY": " your translation ",
	"TOMORROW": " your translation ",
	"DAYAFTERTOMORROW": " your translation ",

(I suggest you place it underneath “LOADING” )

@zdenek

Try adding this to your custom.css

.MagicMirror-Netatmo-Module .wi-thermometer {
color: yellow;
}

I don’t really know if this will only change the color of the icon or the entire div.

@domi256 It’s in the first post above.

@trividar hi, try to add this to your custom.css file

.clock .date {
 margin-top: 20px;
}

@cowboysdude Thanks dude! :D

Okey, update, The module now have Dutch and German translation,
Had to make a new layout for the German clock, hopefully it looks as it should!

@Anhalter42 Yes, open an issue on github or if you already have made changes to either the documentation or written code that does your first suggestion then you would suggest a Pull Request to implement the changes you’ve made

@Mykle1 Wrong quotations again, I’m guessing the built in word-editor in pixel is to blame here. (that automaticly change " to “ )