Centering text and adding blinking dots to the clock

Morganga

Hey,

I’d like to center the text for the clock module (only for the 24hour mark under the actual date) and also add blinking dots between the hours and minutes.

Very new to this, could anyone help ? Thank you !

ashishtank

@Morganga you can do this with css animation. You may want to disable the seconds in clock as it will update the Dom every second and then you won’t see much of animation.

I did this in dirty way using JavaScript as below by changing clock.js and keeping displaySeconds to true

if (this.config.clockBold === true) {
			timeString = now.format(hourSymbol + '[ < span class="bold">]mm[ < /span>]');
		} else {
                         //here to
			if (now.toDate().getSeconds() % 2 == 0)
				timeString = now.format(hourSymbol + ":mm");
			else
				timeString = now.format(hourSymbol + " mm");
                         //here 
		}

Blinking text example using css @ https://stackoverflow.com/questions/16344354/how-to-make-blinking-flashing-text-with-css-3
you will need to wrap : in span or other element and apply css class to it and let it blink.

About centering the text is also possible with CSS, check the css classes using dev tools.

Morganga

@ashishtank Thank you for this.

Again, very new to coding and have no idea what to do or ~~where to change things to make the lower text (Time) centered … Could you help me a bit more with this ?~~

Figured it out thank you !