How to change the clock css to be 90% full screen ?

[nagaculun]

Hi,

The current ‘zoom’ is not working. Basically I want the digital clock to be zoom out almost the whole screen. Any help ?

Thanks

[strawberry 3.141]

@nagaculun did you consider using the config option analogSize for the clock module?

analogSize: Specific to the analog clock. Defines how large the analog display is. Possible values: A positive number of pixels Default value: '200px'

Furthermore the value can have even more units than just pixels, as it uses the standard width and height property for it.
Check out the property values section here https://www.w3schools.com/cssref/pr_dim_width.asp

[nagaculun]

@strawberry-3.141

Basically, I have 2 set of configs; day and night. At day time, it display calendar, 3 clocks, weather and news feed.

But at night time, it only shows a digital clock, which is much easier to read. So still prefer the digital version.

[Mykle1]

@strawberry-3.141 said in How to change the clock css to be 90% full screen ?:

Furthermore the value can have even more units than just pixels, as it uses the standard width and height property for it.
Check out the property values section here https://www.w3schools.com/cssref/pr_dim_width.asp

I am not embarrassed to admit that I’ve used these css properties without understanding them. I only cared that they worked. So this link gave me a better understanding of how and why they work.

Thank you.

[strawberry 3.141]

@nagaculun then you could set the font sizes of the clock elements in custom.css

[j.e.f.f]

@nagaculun Your easiest bet would be to use a CSS transform to scale the clock module. That way it won’t mess up the base layout in case you decide you want other modules to also be displayed.

I’m assuming you’re using the module scheduler to turn the modules on and off. I’d use this to schedule a second instance of the clock module for the evening, so that way I could position it in a different part of the screen. It also makes it easier to target just that version so that your daytime version isn’t also scaled.

Say I had my daytime clock positioned in the top_left, and my evening clock positioned in the top_right

Here’s what the CSS would look like:

/* targets only the clock module I have positioned top_right, leaves the top_left version untouched. */
.region.top.right .clock { 
    transform: scale(3.5); /* Scale multiplier.  adjust to taste. */
    
    /* by default the clock will scale from the center.  Use this to change the origin point. */
    transform-origin: top right; 
}

What is important to note here is that this will NOT affect the flow of other modules. The upside is the size of the clock will not be constrained by the size of the parent container, meaning the time and date won’t wrap when the width exceeds to width of the top_left region, for example. However, if you have another module below it, this will cause the clock to overlap it. You’ll need to add some CSS to that module to move it downward (or position it in a different region).

The main idea here is to have two versions of the clock module, and use the scheduler to toggle the day time one off and the night time one on when you need it.

I was using the clock’s configured position to target the particular one I want, but If you want to have the clock in the same position for day and night, then add a class in the config to the one you want to style, like so:

    {
      module: "clock",
      position: "top_left",
      classes: "default everyone night", /* added "night" */
      config: {
        timeFormat: 12,
        displaySeconds: false,
        showPeriod: true,
        showPeriodUpper: false
      }
    },

Then you can target the module by class name:

.clock.night {
  ... /* CSS rules here */
}

lastly, the scale rule can also accept separate parameters for length and width… so if you wanted to make a severely stretched and distorted) clock, you could do something like:

transform: scale(3,10);

This will stretch the clock 3 times as wide and 10 times as tall. Maybe you could make something pretty cool this way…

I hope this helps!

• Jeff

[nagaculun]

@j.e.f.f

Thanks for the instructions. Unfortunately my mirror in the 'kernel panic’state yesterday. Will need to bring that up first before I try your suggestion. Will update when I do that.

[nagaculun]

@j.e.f.f

It works.

Thanks a lot.