@broberg said in Layout and positioning on a tiny screen.:

@smackenzie5

Config.js doesn’t really do anything to the layout, it is the index.html and main.css that defines the different positions that you can use.

Hi guys!
It seems like I am blowing the dust off this old topics!
By the way… I am trying to change the postions of some modules and I am having the same issue as @smackenzie5 , first it loads the module where i want to place it, but at the end of the loading it increases the size of the top_bar and place it as default.

this is what I’ve put in the custom.css

.MMM-network-signal{
position: absolute;
transform.scale(0,35);
left: 1800px;
top: 0px;
}

Is it because it overlaps with the Weather module?

I mean this picture Screenshot.PNG

Wooo sorted :D

.clock .time{ /*transform: scale(5);*/ font-size:300px; } .clock .date { font-size: 75px; margin-bottom:75px; } .region.top .container { margin-bottom: 200px; }

results in:

alt text

@ifzer0c00lsucked said in help with colors custom css:

however i am trying to leave the compliments white.
i added a line for it but it does not seem to be working

There is no class .morning or .afternoon in the compliments.
You need to stick to classes, id’s or dom elements for css to apply.
You can try

.compliments span{ color: white; }

Every module can be referenced as a class.
Here I tried to reference all < span > elements in the compliments module

Personally, I just used my 7" display as a two module unit - clock and calendar. That’s it. Now, it’s the control panel for my 3D Printer.

Work for me. Thank you

Hi, I have another question. I want Newsfeed with ‘‘wrapTitle=true’’ but I want adjust characters length for 1st line. Example, set 400 characters for 1st line and if news have more characters than wrap title to 2nd line.
How can I do it?

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

I will venture to show my cameras tomorrow.

@magicmarc said in Changing the length of the line under the header:

For my travel module, the line doesn’t dissapear even though I leave header empty

Try commenting out the entire line (or delete) // header:"", from the config entry

Right… Thank u guys very much. This clarifies so many things!

@sdetweil ok I was assuming is necessary add .module, now works.
I find some example that use that keyword… 🤔

Thank you for your advice. However, only this code has solved the issue:

@font-face { font-family: FivoSans; font-style: normal; src: url("FivoSans-Medium.woff2") format("woff2"), url("FivoSans-Medium.woff") format("woff"); } .fivosans-custom-class { font-family: 'FivoSans'; font-weight: medium; } .fivosans-medium-custom-class { font-family: 'FivoSans'; font-weight: medium; } .newsfeed .medium { font-family: FivoSans; }

I had to add .medium, and now it works 😊👍 Thank you very much!

hello elmattt, just a question, how I an get this house icon?

thanks

@cowboysdude

for the module MMM-iobroker
is ist the temperature from my heating control

@jimboh1978 this has been asked multiple times in the forum (maybe we should add this at the top in the css forum).

But anyways, you adjust the body margin and width/height
(This will be added in the custom.css file, and not altered in the main.css)

This will add a 100pixel border around the entire screen

body { margin: 100px; height: calc(100% - 200px); width: calc(100% - 200px); }

This will add a 100pixel border on the sides and 50pixel border on top and bottom

body { margin-right: 100px; margin-left: 100px; margin-top: 50px; margin-bottom: 50px; height: calc(100% - 100px); width: calc(100% - 200px); }

Notice that you always have to subtract the totalt border width (left+right) and/or height (top+bottom) to get to display properly.

@broberg
Thanks a lot
it is now clear

@ForeverBrewing said in Separating text from image:

For clarity, the edits have to be in the custom.css file, not in the MMM-Lunartic.css file?

Yes, that’s right. Look at the very first line of that post again. :laughing:

hi thx i will give it a try
regards