A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Subcategories

  • Share your custom style sheets with the community!

    22 Topics
    292 Posts
    M

    ymsd6czlci2e1.jpeg

    body { margin: 0; height: 100%; width: 100%; background: rgb(0 0 0 / 100%); color: white; } .dimmed, .normal, .bright { color: white; } /* Region Definitions. */ .region.top.right, .region.bottom.right { position: absolute; width: 79%; } .region.top.left, .region.bottom.left, .region.middle.center { position: absolute; width: 20.5%; } .region.fullscreen.below { position: absolute; width: 24.25%; /* Background doesnt match for some reason */ } /* Clock Options */ .clock { float: right; text-align: right; } .clock .time { font-size: 90px; } /* MMM-GoogleTasks Formatting */ .MMM-GoogleTasks { float: right; margin-top: 50px; width: 100%; } .MMM-GoogleTasks .module-header { visibility: hidden; } .MMM-GoogleTasks .item.notes { display: none; } .MMM-GoogleTasks .item { padding: .25em .25em .25em 1em; border-width: 0; } /* MMM-OpenWeatherMapForecast Options */ .MMM-OpenWeatherMapForecast .module-content { width: 100%; } .MMM-OpenWeatherMapForecast { text-align: right; } /* MMM-CalendarExt3 Options */ /* Hides Calendar Header */ .MMM-CalendarExt3 .module-header { visibility: hidden; } /* Global Settings */ .CX3 { --cellbgcolor: rgb(0 0 0 / 100%); } /* Current month cell background color */ .CX3 .thisMonth { background-color: var(--cellbgcolor); } /* Remove Calendar Week */ .CX3 .cellContainer .cell:nth-child(1) .cw { display: none; } /* Day of Week Formatting */ .CX3 .weekend { font-size: 100%; font-weight: normal; } .CX3 .weekend_1, .CX3 .weekend_2, .CX3 .weekday { color: var(--defaultColor); font-weight: bold; text-align: center; } /* Day Number Formatting */ .CX3 .cellHeader { text-align: left; font-size: 100%; } /* Change font sizes */ .CX3 .event.singleday .headline:not(.useSymbol)::before, .CX3 .event.singleday .headline.useSymbol .symbol.noSymbol::before, .CX3 .event .headline .title, .CX3 .event .headline.useSymbol .symbol, .CX3 .event.singleday .headline .time, .CX3 .event.multiday .headline .startTime, .CX3 .legends .legend, .CX3 .legend.useSymbol .symbol{ font-size: 90%; } /* Event Formatting */ .CX3 .event.fullday, .CX3 .event.multiday, .CX3 .legends .legend { border-radius: 8px; color: var(--oppositeColor); }
  • You have questions regarding CSS?

    110 Topics
    652 Posts
    S

    @kasperinline awesome!!

  • CSS 101 - Getting started with CSS and understanding how CSS works

    Pinned
    15
    11 Votes
    15 Posts
    27k Views
    C

    Great infos and good tips. Thank you 🙏

  • custom.css ......body???

    42
    0 Votes
    42 Posts
    770 Views
    R

    @piki

    .clock .time {
    font-size: 150px;
    color: yellow;
    }
    .clock .date {
    font-size: 40px;
    color: red;

  • custom

    2
    0 Votes
    2 Posts
    37 Views
    S

    @piki what??? was this a continued post?

    show your custom.css entry

  • Changing table cell in calendar module using custom.css

    11
    0 Votes
    11 Posts
    197 Views
    S

    @evroom you cannot add or change a classname string

    class=“foo”
    to add “bar” class too
    class =“foo bar”

    but you CAN change the behavior of the other classes to match what adding another class could do

    OR , you could add the styles to the ELEMENTS you WOULD have added the bar class to…

    just_have_to_select_them {
    styles
    }

    as an example of a complex selector in my MMM-Config, I want to hide an element on a library generated element

    .possibly-hidden-tab div:nth-child(2) > div > div >div >ul >li:only-child >a[rel*="Item%201"] { display: none; }

    this is
    elements with the possibly-hidden-tab class
    its second child div
    its immed child div
    its immed child div
    its immed child div
    its immed child ul
    its immed only child li
    with an a element containing a rel attribute value of “Item 1”
    (spaces have to be encoded, but for clarity I left it out here)

  • MMM-CalendarExt3 increase .header height

    Solved
    2
    0 Votes
    2 Posts
    81 Views
    S

    @shicks I found it! Thanks to other posts on here.

    The css for the height of the header fixes it:
    .CX3 {
    –cellheaderheight: 50px;
    }

    I still have to tighten things up a bit but at least I go this one that was elusive to me.

    7652c89b-812d-4b71-8bd9-ab682f23509e-image.png

  • CSS text-overflow and hover

    2
    0 Votes
    2 Posts
    95 Views
    S

    @bluepgt possibly… MagicMirror UI is all browser… we don’t control any of it.

    that said, we don’t generally have mouse active (on wall output view)
    but you could extend and try

    use the developers window elements tab
    see the second link in my signature below

  • How can elements in the default weather module be moved

    12
    0 Votes
    12 Posts
    325 Views
    S

    @DDE12 make the icon 1.5em
    then you need to size the div the spans are in

  • MMM-CoupleDays

    3
    +0
    0 Votes
    3 Posts
    146 Views
    plainbrokeP

    @sdetweil
    Wow, Thanks, I finally figured out what you have been trying to tell me.
    Found the wording to make it big enough to read now…
    \Thanks for you help Sam…

  • MMM-CalendarExt3 CSS configuration for Month Size

    4
    0 Votes
    4 Posts
    186 Views
    S

    @sharkbait awesome. You can use it on every module

  • Large Numbers

    10
    0 Votes
    10 Posts
    423 Views
    S

    @NotMyCircus

    as an example with css changes I did this in about 20 minutes
    config

    { module: "MMM-CalendarExt3", position: "middle_center", disabled: false, config: { mode: "week", weeksInView:2, firstDayOfWeek: "1", fontSize:'30px', headerWeekDayOptions: { weekday: 'narrow' // this makes the weekday 1 characater wide }, } }

    css

    .CX3 .cw { display: none !important; } .CX3.bodice { background:linear-gradient( blue,lightblue); } .CX3 .cell { background: transparent; border: transparent; } .CX3 .cell.today { border: transparent; } .CX3 .cellDate { margin-right: 20px; } .CX3 .cellHeader .cellDate span.dateParts.month.seq_0 { display: none; }

    Screenshot at 2024-09-01 20-08-23.png

  • Delete Fade In/Fade Out animation in the NewsFeed Module

    11
    0 Votes
    11 Posts
    208 Views
    V

    @sdetweil

    Ok
    Now I understand.
    The 2 variables must be set in the configuration of each news.
    Now it is corrected and works.
    Thank you very much.

  • Calendar

    5
    0 Votes
    5 Posts
    328 Views
    plainbrokeP

    @sdetweil

    Thank you for the help Sam.
    You are the man…

  • Help restyling MMM-ValuesByNotification

    18
    0 Votes
    18 Posts
    542 Views
    S

    @BKeyport awesome

  • Dynamic Font Colors

    8
    0 Votes
    8 Posts
    249 Views
    I

    @MMRIZE @sdetweil thanks for the help. I havent had a chance to play around with it on my set up but looks to be going in the right direction!

  • Custom CSS for weather when I have 2

    2
    0 Votes
    2 Posts
    164 Views
    S

    @pritikin71 classes goes after module:

    right?

    { module : " calendar", classes:"foo", config: { . . . } }

    css

    .foo ..... { (NOT .weather) ... }

    you can ALSO use the ID value assigned to the module
    the selector for id is

    #id ... { ... }

    I use this cheatsheet to help me remember
    https://www.w3schools.com/cssref/css_selectors.php

    everthing before the {
    is called the selector clause… because is ‘selects’ the elements of the page doc, that the stuff INSIDE the {} will be applied to

    . = class # = id : is the prefix for special elements [ x ] means element with an attribute of x <div x="foo"/> nothing = tag name (table, ul, li, p, ....div)
  • change size font any module

    3
    0 Votes
    3 Posts
    233 Views
    B

    Hi, maybe the best way is using zoom functionality because,any logos will not follow the font size

    in custom css try this:

    #CARBURANTS { zoom: 120%; }
  • Reducing font size causes letters to overlap.

    5
    0 Votes
    5 Posts
    233 Views
    S

    @atltiger81 no, don’t change the code

    just add a classes property to the compliments module config

    { module:"compliments", position:"....", config: { compliments: { ... ... }, classes:".......... whatever" } }

    from the doc
    1000026352.jpg

  • ,Change Fonts

    10
    0 Votes
    10 Posts
    7k Views
    D

    @TazDev Thanks! This is exactly what I needed to change my MagicMirror so it displays Aurabesh for some of the data.

  • Custom CSS Debugging

    3
    0 Votes
    3 Posts
    168 Views
    D

    @sdetweil YES!!!

    Thank you so much! This is exactly what I wanted. <chef’s kiss>

  • This topic is deleted!

    1
    0 Votes
    1 Posts
    15 Views