Custom CSS

• F

  Solved change font of modules (local fonts)
  • foryas

  20
  0
  Votes
  20
  Posts
  6276
  Views

  E

  thank you!
• D

  Home Info Board
  • darbos

  3
  0
  Votes
  3
  Posts
  891
  Views

  W

  Sorry, board works so well I haven’t touched for over a year. Didn’t realize that people were still interested. I edited my post with my mess of a custom CSS, but yes I just force the width of the columns. In the custom CSS if you add width: 550px; to one item for each column it will force it to that width and draw the line the full width. 550px seems to work well with 1920 width and the default pad / margins.
• L

  MMM-Astrology font color
  • letmetakeaselfie

  11
  0
  Votes
  11
  Posts
  627
  Views

  L

  That worked thank you both very much!
• S

  unable to reply to topic here
  • sdetweil

  5
  0
  Votes
  5
  Posts
  348
  Views

  S

  My mobile does not have block popups turned on
• L

  Font struggles.
  • letmetakeaselfie

  6
  0
  Votes
  6
  Posts
  527
  Views

  L

  thank you very much
• A

  Full Screen CSS
  • allebone

  6
  0
  Votes
  6
  Posts
  2749
  Views

  

  @sdetweil Of course, there are many tricks to display something to specific region. .fullscreen.below is the lowest layer of region system of MM. its position is already absolute and fit for screen size. If you put some module here, it will be displayed like background. .fullscreen.above is the highest layer. If you put some module here, it will cover the lower region layer. And, modifying CSS is safer and easier option than hardcoded in the module itself. Therefore there is “custom.css” for customization. The main reason you are confused might be this; In main.css body { margin: 60px; position: absolute; height: calc(100% - 120px); width: calc(100% - 120px); It gives 60px margin for the entire screen. So YOUR_FULLSCREEN module couldn’t cover the WHOLE_SCREEN_YOU_THOUGHT. But I recommend you leave it. Because, some ppl needs those margin for their mirror edge. Who don’t need that margin will modify his custom.css for using fullscreen without margin by himself. I think you’d better to research some BACKGROUND-IMAGE modules to get a hint to use full screen CSS. I believe it’s enough to put your module with 100% width/height into .fullscreen.below or .fullscreen.above to display your module as full screen size.
• A

  Adjusting font size in notification message
  loxone • • adoran

  2
  0
  Votes
  2
  Posts
  375
  Views

  

  Try .ns-box.light {font-size: 120px} .ns-box.thin {font-size: 100px}
• 

  ,Change Fonts
  font raspberry pi 3 custom css • • Lorenzo_Zappa

  8
  0
  Votes
  8
  Posts
  954
  Views

  P

  @lavolp3 my solution works. For the web server is the Magic Mirror directory the “root” directory. So you have to create the fonts directory in the Magic Mirror directory.
• H

  Adjusting News Feed so it doesn’t overlap with left and right modules
  • huso15

  4
  0
  Votes
  4
  Posts
  643
  Views

  

  @huso15 you can choose what is better. try cut lines and if it will be not acceptable you can try second option.
• 

  How to change icons
  • Hriereb

  15
  0
  Votes
  15
  Posts
  3000
  Views

  E

  i have tried all methods to change my icons for the current weather and the weather forcast modules but nothing seems to work ! i dont get any errors or warnings ! whatever changes i make the module remains the same ( like default) i use icons from amcharts ! and i refered the other post from the forum ! im a noobie kindly help me out@!!! the icons are on MagicMirror  /css/icons/ i have attached images of my custom css file and my config file
• B

  New Position / Area in the middle
  • bjoern

  1
  0
  Votes
  1
  Posts
  449
  Views

  B

  Is it possible to create a new area? I’d like to create a center_middle_lr section. This should allow me that I have in the middle again a division left right. Background: In the middle on the right side I want to display the soccer results and to the left the soccer clubs table. How can I create this?
• X

  Is it possible to change font color based on text payload?
  • xbmcnut

  2
  0
  Votes
  2
  Posts
  405
  Views

  D

  Hi, I just saw that you already opened an issue on GitHub and answered there so that the developer get’s a notification, too. Meanwhile, you can edit the module yourself like this: Change line 103 in MMM-MQTT.js from valueWrapper.className = "align-right bright medium"; to valueWrapper.className = "align-right bright medium " + sub.value.toLowerCase(); provided the value is just one word, not more, the cell with the value now has a class name added that’s the same as the value, in your case ‘closed’ and you can add the following to the CSS file or your custom.css: .MMM-MQTT .closed { color: green; } .MMM-MQTT .open{ color: red; } Regards, Torben
• D

  Calendar Font Size
  • DerOptiker86

  13
  0
  Votes
  13
  Posts
  1512
  Views

  

  @deroptiker86 Always glad to help out!
• O

  Add an external output to Dash Board from an html or Xml file.
  • ooskay

  3
  0
  Votes
  3
  Posts
  417
  Views

  O

  @charley said in Add an external output to Dash Board from an html or Xml file.: Domoticz module Hi, Thanks for the reply. Yes, i think JSON is best solution at this moment. Thanks again for your kindly respond…
• B

  Module "centered"
  • bjoern

  2
  0
  Votes
  2
  Posts
  523
  Views

  B

  No Idea ?
• W

  Unsolved Custom .gif animation upon Magic Mirror Startup. Is this possible?
  • Winter

  4
  0
  Votes
  4
  Posts
  789
  Views

  M

  Well you could just add some code to your other modules to hide them when they are set up and let your gif module send a message to the other modules to show after the gif finished. (How sending these messages and reacting to them to show/hide modules works you can see quite well in Mykles Hello Lucy module, where he uses them to hide/show modules according to voice commands)
• 

  This topic is deleted!
  • AngusB

  1
  0
  Votes
  1
  Posts
  112
  Views
• W

  Solved Changing Custom Font Type Within Magic Mirror
  magic mirror font custom • • Winter

  7
  0
  Votes
  7
  Posts
  1774
  Views

  W

  @broberg Ah, that seems to be what the problem was. Thank you so much for your help in solving this issue! As for the two different files I went ahead and removed the .woff file from the program.
• R

  Make Text color inverting the background image
  • rak

  5
  0
  Votes
  5
  Posts
  1046
  Views

  R

  @ninjabreadman, thanks a lot for trying to help. You are right in your assumption, that I dont fully understand CSS. I am learning as we speak. The site you mentioned is the one I found as well and followed. Unsuccessful. It is working for the copyright text/title of the Wallpaper module. So I cant be to far off. But not for the clock. From what I found out so far is that the problem is that the wallpaper and the clock are not in the same “stacking index” which I tried to solve following this article.
• M

  compliments font problem
  • mizban

  5
  0
  Votes
  5
  Posts
  905
  Views

  M

  thank you very much pjkoeleman, for help! i tried: .compliments div {…} and it works.