MMM-Hoymiles-Wifi

sdetweil

width: "100px",
height: "105px",

those are outside the config:{} section, that means they are for the MM runtime…
but we don’t process width/height

if you want to do this you need to learn to use css(cascading style sheet) to customize the html presentation
ALL updated css goes in css/custom.css

a css entry in custom.css is

selector_clause {
   styles to apply to elements selected by the selector clause
}

we add the modulename as a class to the web content so that one can ‘select’ only for that module

key selector clause elements
starts with . means element has classname=xxx
starts with # means element has id=xxxx
does not start with either, means html element name, div, span, p, h1, img…

Jose1701

@sdetweil

Alright, I will try to get some info in the internet. Never done sth with css.

Thanks

sdetweil

@Jose1701 I understand , the browser provides a developer environment with different capabilities

logger
code execution
and elements viewer, css tester env

see the second link in my signature below for a starter course on the elements tab.

evroom

@Jose1701

No, sorry, no idea.
What Sam says, but that needs knowledge.
But I opened an issue/request, so let’s see if it will be granted:
https://github.com/CuddlyCow/MMM-HoymilesPVMonitor/issues

Jose1701

@evroom

ok. Thank you for your patience and help.

sdetweil

@Jose1701 also. Sometimes the author documents it on the readme, sometimes the author provides their own css you can override w custom.css entries

Sometimes it’s all grunt work….

Jose1701

I spent a bit of time an got the following to work by using help of a friend.
I wrote the following in the css:


/* custom.css */

/* Passt die Gesamtbreite des gesamten Moduls an */
.MMM-HoymilesPVMonitor {
    /* Beispiel: Setzt die maximale Breite des gesamten Moduls auf 200 Pixel */
    max-width: 200px; 
    /* Stellt sicher, dass das Modul zentriert bleibt, falls es kleiner als die Spalte ist */
    margin-left: auto;
    margin-right: auto;
}

/* 
  Passt den inneren Container an, der das Canvas-Diagramm enthält.
  Dies überschreibt die 95% Breite, die im JS definiert wurde.
*/
.MMM-HoymilesPVMonitor div:first-child {
    /* 
      Setzt die Breite des Containers auf 100% der oben definierten max-width (z.B. 200px).
      Sie können hier auch absolute Werte (z.B. 180px) verwenden, 
      aber 100% ist am flexibelsten.
    */
    width: 100% !important; 
}

Now it is smaller, nevertheless I can’t get it much more smaller because the gauge will disappear then.

(It’s not displayed correctly in the screenshot, but it is on my mirror.)

Screenshot 2025-11-07 102555.jpg