I had trouble using the CSS method and googled a bit more.

in /etc/xdg/lxsession/LXDE-pi/autostart ad this line (with sudo):
@xrandr --output HDMI-1 --rotate right

I had this problem the last two days – out of the blue, the MM2 was running for over a year with no problem. I know the thread is old, but it pops up when searching here or on google for this error, so I wanted to add how I was able to solve it:

I backed up the config, my modules and my custom css.
Then I deleted the MagicMirror-Folder, keeping pm2 and everything unchanged. I cloned MM2, ran “npm install”, brought back the config, modules and custom css and ran “pm2 start mm”.

Seems so easy now, but for two days I tried everything – except deleting the folder.

Remove the “dimmed” in line 38 of the code.

Oh, sorry, “tableElement” – remove the dot. Sorry.

Delete the previous code in custom.css if you added that className line in the module’s js.

In that case the css should work. And the css file is named custom.css? Exactly like that? And you restarted the mirror?

Since we’re already working directly in the code: In the module js there’s a line
var tableElement = document.createElement("table");

You can write a line directly after that:
tableElement.className = "homeassistant-table";

Then you should be able to address the table in the cusom.css like this:

.homeassistant-table tr td:nth-of-type(2) {
    text-align: left;
}
.homeassistant-table tr:nth-of-type(3) td,
.homeassistant-table tr:nth-of-type(6) td {
    border-bottom: 1px solid white;
}
.homeassistant-table {
    border-spacing: 0;
}

Is the text brighter now?

EDIT: tableElement, not table.Element

Oh, I noticed a typo – even though that’s not the reason it’s not working. Change te_s_t-align to text-align, please. ;)

What’s the name of the module in your config file?

Can you show me what your custom.css file looks like now?

Because the creator of that module gave the wrapper the class name “dimmed” in line 38 …

And that worked? :thinking_face:

@sdetweil I don’t have any modules with uper case letters (MMM- …) at the moment. Can you confirm the module class name is with uper case letters or is it changed to lower case?

In this situation, with a unique module name, it’s ok to identfy the module without the .module but in general I’d say it’s best practice that if you want to address a specific module, you describe it as precise as possible.
E.g. there might be a module “image_frame” that you want to address but there’s also a module that somewhere within its structure has one div with the class “image_frame” that you don’t want to address. Then it’s absolutely necessary to address the target with .module.image_frame

The content of the custom.css should be:

.module.MMM-homeassistant-sensors table tr td:nth-of-type(2) {
    test-align: left;
}
.module.MMM-homeassistant-sensors table tr:nth-of-type(3) td,
.module.MMM-homeassistant-sensors table tr:nth-of-type(6) td {
    border-bottom: 1px solid white;
}
.module.MMM-homeassistant-sensors table {
    border-spacing: 0;
}

All of it. Not just the last part.

Yeeeeah … what about the one above that? The 2nd part. ;)

Create a file named “custom.css” and put the code from above inside it.

Ok, please keep in mind that this is not the best solution (working directly in the code).

If you want to make the changes via custom.css file, try this:

(Now, since the module is called “MMM-homeassistant-sensors” I’m going to assume the element is identifiable with _“.module.MMM-homeassistant-sensors” …)

Tell each 2nd cell to align its content left:

.module.MMM-homeassistant-sensors table tr td:nth-of-type(2) {
    text-align: left;
}

Tell the cells of the 3rd and 6th line to have a bottom border line:

.module.MMM-homeassistant-sensors table tr:nth-of-type(3) td,
.module.MMM-homeassistant-sensors table tr:nth-of-type(6) td {
    border-bottom: 1px solid white;
}

If the line is separated, try:

.module.MMM-homeassistant-sensors table {
    border-spacing: 0;
}

EDIT: There was an error, it’s text-align, of course. Not test-align.

MMM-homeassistant-sensors.js

If you want to work in the code and are not afraid that an update might overwrite it, you could try to change

		// Name
		newCell = newrow.insertCell(1);
		newText = document.createTextNode(name);
		newCell.appendChild(newText);

to

		// Name
		newCell = newrow.insertCell(1);
		newCell.className = "align-left";
		newText = document.createTextNode(name);
		newCell.appendChild(newText);

That seems to be what’s aligning the icon cell to the left. That css comes from MM’s main.css.

It can be done in css even if there are no class names. Give me a minute.

Ok, I understand. I’m looking at the code and I think it’s not written very good. There are cells named “align-left” and “align-right” – stupid in this case as there’s no CSS for it and the cells are taking their alignment from the module position, it seems.

Are you familiar with the dev mode? Can you check the html structure of the table and see if the cells and table rows that you try to change have any class names?

I’m trying to figure this out and then I’d suggest some entries in the custom.css file.

Wait! I think that’s not what @iorifly wants, right?

If I understand this correct (and it is difficult to understand ;) ) the text in the middle should be aligned left?

If I place the module on the right side, the text is far from the icons.