Custom CSS

• P

  Split fields
  • patbu  

  2
  0
  Votes
  2
  Posts
  229
  Views

  

  @patbu - You’ll need to modify the index.html to add the new objects to the basic display code. A little searching around the forum should show you the exact code. I know you’re not the first person to try it.
• R

  This topic is deleted!
  • radokristof  

  1
  0
  Votes
  1
  Posts
  154
  Views
• T

  Region background colors
  • txajay  

  4
  0
  Votes
  4
  Posts
  473
  Views

  

  You could write a module for regions to show even without modules being in it
• M

  resizing ALL modules and content
  • MWel1977  

  2
  0
  Votes
  2
  Posts
  704
  Views

  

  Default Display Size = Control and 0 (That’s a zero) Zoom In = Control and Shift and = (That’s an equals sign) Zoom Out = Control and - (That’s a dash/minus sign) https://forum.magicmirror.builders/topic/5619/how-to-find-and-use-key-commands-in-mm-for-absolute-beginners
• D

  Associating module output with custom.css
  • dwburger  

  9
  0
  Votes
  9
  Posts
  883
  Views

  D

  @j-e-f-f Your suggestions worked well…thanks! It took me a while to get the localhost access working, but I can now view my MM2.5 using my Chrome web browser and then using the inspector to find displayed items I want to change. Thanks again!
• J

  SOLVED How add transparent background to modules
  • johnny_swindle  

  12
  0
  Votes
  12
  Posts
  1433
  Views

  M

  I have the same problem. Was searching for this on the forum. Will try Sean’s solution tonight.
• M

  Changing color nstreinen module
  • Mcrherme  

  2
  0
  Votes
  2
  Posts
  331
  Views

  

  Your English is fine That’s because there is no class called .departureDelay You can fork his branch and add .departureDelay to the className or you can ask the author to add it. Then your className would work if you need more help with this I would be happy to help you if you don’t understand what I’m saying
• 

  MMM-Darksky-hourly - change icons
  • Maros  

  12
  1
  Votes
  12
  Posts
  2147
  Views

  T

  @cr4z33 what icons did you end up using?
• 

  SOLVED Newsfeed CSS edit
  • Screwyoudriver  

  5
  0
  Votes
  5
  Posts
  834
  Views

  

  @screwyoudriver You’re welcome, mate. You can now mark the post as solved
• 

  Change font size for MMM-HTMLBox module
  • evroom  

  2
  0
  Votes
  2
  Posts
  455
  Views

  

  Some times Google is your friend: custom.css .MMM-HTMLBox { font-size: 18px; line-height: 22px; }
• F

  SOLVED change font of modules (local fonts)
  • foryas  

  20
  0
  Votes
  20
  Posts
  7323
  Views

  E

  thank you!
• D

  Home Info Board
  • darbos  

  3
  0
  Votes
  3
  Posts
  1019
  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
  757
  Views

  L

  That worked thank you both very much!
• S

  unable to reply to topic here
  • sdetweil  

  5
  0
  Votes
  5
  Posts
  419
  Views

  S

  My mobile does not have block popups turned on
• L

  Font struggles.
  • letmetakeaselfie  

  6
  0
  Votes
  6
  Posts
  650
  Views

  L

  thank you very much
• A

  Full Screen CSS
  • allebone  

  6
  0
  Votes
  6
  Posts
  3034
  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
  438
  Views

  

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

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

  8
  0
  Votes
  8
  Posts
  1244
  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
  709
  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
  3543
  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