@rkorell hm… only other thing is MM is case sensitive… css class names too you got it tho

@BKeyport not me. I just tried what Google search results suggested Key item the style was on the span, not the img

@alfi153 i will submit something for permanent support I have added https://github.com/MagicMirrorOrg/MagicMirror/pull/3737

@Xsoldier2000 yeh, the dev window has a lot of content

That worked great! Thank you so much for taking the time to answer my question.

@Xsoldier2000 This module usually (and for your convenience), uses the whole width of the region that this module lays on. So, if you want to use 3/4 width of the entire screen, it will be easier to limit the width and location of the region itself. So, if you want to lay this module into top_center, guess how to expand and locate top_center region to 3/4 width from the right edge. (There could be many solution and condition, so I cannot point a silver bullet.)

@etnec the default calendar provides the events for the Ext3 family of modules just add another { url: .... } entry to the calendars:[] list

@sdetweil said in enhancing Text Readability on Bright Wallpapers: Adding Background Textures or Boxes with CSS?: @Socrates sometimes the blur is top and bottom https://eldfall-chronicles.com/eldfall-chronicles-northern-wind/ https://3dtrcek.com/en/asa-filament [image: 1734569324685-screenshot-at-2024-12-18-18-47-45-resized.jpg] cool

@sdetweil said in MMM-CalendarExt3 How can I increase my cell height?: @Ragged4310 you didn’t change event-height or total height You could use the css media screen value to get the screen size to adjust Thanks for the advice. I solved my problem when I tweaked my display by adding more event lines and a legend so I didn’t end up needing to mess with the CSS.

@NotMyCircus Made some changes to custom.css file working towards that style… .CX3 .cw { display: none !important; } .CX3.bodice { background-image: linear-gradient(to top right, #22c1c3, #176561, #131813); } .CX3 .cell { background: transparent; border: transparent; display: flex; /* Use flexbox for layout */ flex-direction: column; /* Stacks elements vertically */ align-items: center; /* Centers items horizontally */ justify-content: flex-start; /* Ensures content starts at the top */ padding: 0.5em; /* Adds space inside the cell */ text-align: center; /* Centers text content */ overflow: hidden; /* Ensures no content overlaps outside the cell */ } .CX3 .cell.today { border: transparent; } .CX3 .cell.today .cellDate { font-size: 4em; /* Adjust the size of the date text */ line-height: 1; /* Avoids extra spacing */ text-align: center; /* Centers the text within the circle */ width: 1.5em; /* Set equal width and height */ height: 1.5em; /* Matches width to create a circle */ display: flex; /* Use flexbox to align text */ justify-content: center; /* Centers text horizontally */ align-items: center; /* Centers text vertically */ background-color: red; /* Background color for the circle */ color: #ffffff; /* Text color */ border: 2px solid #e76f51; /* Optional border for the circle */ border-radius: 50%; /* Makes the box a circle */ margin: auto; /* Ensures proper alignment within the cell */ } .CX3 .cellDate { font-size: 4em; /* Adjust font size for the date */ line-height: 1; /* Avoids extra spacing */ text-align: center; margin-bottom: 1em; /* Adds space below the date */ width: auto; /* Removes fixed width */ height: auto; /* Removes fixed height */ } .CX3 .cellHeader { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; } .CX3 .cellHeader .cellDate span.dateParts.month.seq_0 { display: none; } /* Ensures the eventContainer is placed below the date numbers */ .CX3 .eventContainer { margin-top: 1em; /* Adds space above the eventContainer */ top: 74px; width: 100%; /* Ensures it spans the cell width */ text-align: left; /* Aligns event text to the left, adjust if needed */ word-wrap: break-word; /* Prevents event text from overflowing */ //display: block; /* Ensures it behaves as a block element */ position: relative; /* Ensures it respects the flow of the document */ } [image: 1733363510312-b345ed7c-bd38-42b4-b0a8-cf1070477bee-image-resized.png]

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

@piki what??? was this a continued post? show your custom.css entry

@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)

@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. [image: 1731126700852-7652c89b-812d-4b71-8bd9-ab682f23509e-image.png]

@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

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

@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…

@sharkbait awesome. You can use it on every module

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