@Socrates sometimes the blur is top and bottom
Screenshot at 2024-12-18 18-47-45.jpg

@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 */ }

b345ed7c-bd38-42b4-b0a8-cf1070477bee-image.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.

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.

@sdetweil

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

@BKeyport awesome

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

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

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%; }

@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

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