How can I style TiddlyTools SidebarClocks?

#1

I want to show only the digital SidebarClock from TiddlyTools as a Date-time group. It works with the format 0DD0hh0mmmmm.

But I can not style it. I want it to be bold, lowercase and blue.

When I try to embed the macro-call in TiddlyTools/Time/SidebarClocks in a <div> or a <span> or my own class with <@@> or to add something to the existing <div> I can change the font, the font-size and the background-color but width, font-color and text-transform are ignored.

#2

Any chance the wiki you’re doing this in is public?

My first suspicion would simply be that the CSS Specificity rules are causing you issues. If you know how to check that in the developer tools, great. If not, and you can share a link to the wiki, someone here might be able to check it. If neither is the case, then can you share your sidebar tiddler and your CSS?

#3

I tried it in 3 Wikis and then in empty.html
Here is a variant that is only empty.html plus TiddlyTime plus one stylesheet.https://dtg.tiddlyhost.com/

#4

Take a look at the unmodified wikitext code for TiddlyTools/Time/SidebarClocks. In particular, note that the digital clock macro is enclosed in a <div class=tt-sidebar-clocks-digital ...> wrapper. What is not obvious from that code is that the clock macro itself also wraps the time output within a $button widget.

Thus, to affect CSS changes to the appearance of the digital clock, you can create a tiddler (e.g., MyDigitalClockStyles), tagged with $:/tags/Stylesheet, containing something like this:

.tt-sidebar-clocks-digital button {
	font-weight:bold; font-size:4em; color:blue; text-transform:lowercase;
}

You don’t need to make any changes directly in the TiddlyTools/Time/SidebarClocks tiddler.

Addendum: since all you want is the digital clock, you can actually omit the TiddlyTools/Time/SidebarClocks, $:/config/TiddlyTools/Time and TiddlyTools/Time/Setup tiddlers entirely.

You could also combine the CSS and the clock output in a single tiddler, eliminating the need for a separate stylesheet tiddler. Just create your own “MySidebarClock” tiddler, tagged with $:/tags/SideBarSegment, containing:

<style>
.tt-sidebar-clocks-digital button {
	font-weight:bold; font-size:4em; color:blue; text-transform:lowercase;
}
</style>
<div class="tt-sidebar-clocks-digital">
	<<clock type:"digital" format:"0DD0hh0mmmmm" offset:"localtime">>
</div>

enjoy,
-e