Custom CSS

• J

  CSS 101 - Getting started with CSS and understanding how CSS works
  • j.e.f.f  

  8
  9
  Votes
  8
  Posts
  9649
  Views

  S

  Thank you. Just changing the width did the job.
• A

  Change a font issue
  • artomka  

  5
  0
  Votes
  5
  Posts
  83
  Views

  A

  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!
• 

  Current-weather
  • elmattt  

  2
  0
  Votes
  2
  Posts
  241
  Views

  F

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

  MMM-iobroker change color
  • fischi87  

  3
  0
  Votes
  3
  Posts
  137
  Views

  F

  @cowboysdude for the module MMM-iobroker is ist the temperature from my heating control
• J

  Shrink border on screen with metal frame around edges
  • jimboh1978  

  2
  0
  Votes
  2
  Posts
  126
  Views

  

  @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.
• V

  CSS Colur description
  • Vauxdvihl  

  9
  0
  Votes
  9
  Posts
  407
  Views

  V

  @broberg Thanks a lot it is now clear
• A

  This topic is deleted!
  • Asphyth  

  1
  0
  Votes
  1
  Posts
  3
  Views
• F

  Separating text from image
  • ForeverBrewing  

  6
  0
  Votes
  6
  Posts
  214
  Views

  

  @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.
• G

  why is it so difficult to increase the size of the display moduless
  • geo  

  4
  0
  Votes
  4
  Posts
  342
  Views

  G

  hi thx i will give it a try regards
• M

  is this view possible? (MMM-calenderEXT)
  • mrdenmark  

  4
  0
  Votes
  4
  Posts
  368
  Views

  M

  Cool,thanks for the advice, I’ll have A play with it and see what I can achieve,it’s my first time trying anything with css,if I have any success I’ll post the results
• Y

  Tell me how to change the font.
  • yeonju  

  3
  0
  Votes
  3
  Posts
  386
  Views

  

  https://fonts.google.com (eg: @import url(‘https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Open+Sans:400,700&display=swap’);) use the @import method in custom.css and change the font declarations in body .thin .light .regular .bold header from (example) font-family: “Roboto Condensed”, sans-serif; to font-family: “Open Sans Condensed”, “Roboto Condensed”, sans-serif;
• B

  Issue with bottom bar, newsfeed module and top margin.
  • Brandenborg  

  3
  0
  Votes
  3
  Posts
  263
  Views

  B

  @sdetweil thanks for the advice. After some more trial and error it made me figure out I had to add these two to fix it. .region.bottom.bar .container { margin-top: 0; } .region.bottom.bar .module { margin-top: 0; } Guess it was the container one that I was missing and had to use together with the module definition to get it working.
• J

  MMM-HASS & css nightmare (slight exaggeration)
  • jaraeez  

  4
  0
  Votes
  4
  Posts
  354
  Views

  R

  Use the developer toos in Chrome to see the whole html & css. You can also edit that to try out things quickly.
• 

  Need help in CSS
  • Cynic  

  3
  0
  Votes
  3
  Posts
  250
  Views

  

  @broberg Thank you very much
• B

  Margin removal, background region and top bar.
  • Brandenborg  

  4
  0
  Votes
  4
  Posts
  363
  Views

  B

  So seem to have gotten a little further regards to the top bar. Adding the position: absolute in body seems to have somewhat helped. The overflow hidden actually made top.left and top.right disappear. body { position: absolute; margin: 2; height: 100%; width: 99%; } .region.top.bar { height: 40px; float: left; } My top.right module seems to be positioned a bit higher than my top.left module… But that might just be the look of the module itself. Still need to figure out how to left align the navbar and what is happening with the background_below region… Edit: Figured out the background as well after some research. The fullscreen section is actually defined to be offset by -60px due to the body margins being defined as 60px. So had to simply add a similar section in my custom.css changing the offset to what I put in the body margin. .region.fullscreen { position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; }
• C

  Column width change help
  • cookblook  

  3
  0
  Votes
  3
  Posts
  226
  Views

  S

  @mlcampbe custom.css has been force loaded as the last css file since 2.6 as I recall…
• 

  MMM-Darksky-hourly - change icons
  • Maros  

  13
  1
  Votes
  13
  Posts
  3490
  Views

  

  please post your changes maybe there is just mistype
• 

  UNSOLVED Display colored emoji
  • floschibo  

  5
  0
  Votes
  5
  Posts
  493
  Views

  

  @Stoffbeuteluwe Ok, now I think I get it. In my case I’m jusing the MMM-IFTTT module to send Messages to the Mirror. So emojis are displayed by text send via IFTTT. It’s not a fixed Text I can copy to my config.js file.
• 

  Module shadowbox for slideshow background
  • buzzkc  

  4
  1
  Votes
  4
  Posts
  388
  Views

  

  Sorry, google photos don’t seem to stay around that long…
• A

  SOLVED Newsfeed custom.css
  • andyyy  

  2
  0
  Votes
  2
  Posts
  418
  Views

  

  @andyyy said in Newsfeed custom.css: Hi, I am trying to change the font size of the newsfeed. That is my custom.css, the font size is still the same. Any ideas? body { .newsfeed .medium { font-size: 15px; line-height: 20px; } } You don’t put the .newsfeed inside the body{} this should work better : .newsfeed .medium {font-size: 15px; line-height: 20px; }