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

2 Likes
#5

Thank you very much!
I searched for an existing definition of the class: .tt-sidebar-clocks-digital but couldn’t find it.
Your solution works beautiful as everytime.

#6

The .tt-sidebar-clocks-digital class is not used by default anywhere in the clocks, and is present in the wrapper only so that customizations (such as yours) can target that wrapper.

#7

It drove me crazy that I could not find the definition but the class is written down so it is clearly “used”.

So you purposefully use a CSS-class that is not defined anywhere, thus the browser just ignores it and shows the “naked” content but you have the ability to use it later on if you decide to do something special?
That sounds clever and like walking the extra mile.
And thanks for the always extra-bit of explanation. It is highly appreciated.

#8

I actually DO reference tt-sidebar-clocks-digital as a target for customization when using the “TiddlyTools (Dark)” palette, which is configured by the TiddlyTools Background Manager.

The purpose of the Background Manager is to enable different background images and CSS styles to be applied to specific page elements, based on the currently selected palette.

To see this configuration in action:

  • Go to TiddlyTools/Palettes/Backgrounds
  • In the droplist below “Select an element:”, choose “Sidebar Clocks Digital”. If you click on the “edit” button next to the droplist, a popup will show that this element name is associated with the .tt-sidebar-clocks-digital CSS class.
  • Note that the “Sidebar Clocks Digital” element does NOT have any background image (the main image display area shows “select an image or color”).
  • However, it DOES have some custom CSS styles associated with it, as indicated by the bold “styles” button along the bottom of the Background Manager. Click that “styles” button to see the “extra styles” definition, which contains:
border:1px solid #999; border-radius:1em; padding:0.125em 1em; background-color:#00000099;

The effect of this setting is that, in the sidebar, the digital clock is surrounded by a semi-opaque “bubble” to provide contrast against the “fishtank” page background that is used with “TiddlyTools (Dark)”.

Note that if you switch to a different palette such as “Vanilla” (use the “palette” button in the top toolbar) and then return to the Background Manager and click on the “styles” button, you will see that it doesn’t have any associated CSS customizations, and the digital clock in the sidebar no longer has any surrounding “bubble”.

Also note that the current palette selection ($:/palette) is saved as a cookie (using TiddlyTools/Cookies/Manager), so that when you re-visit TiddlyTools.com, that palette is automatically re-applied. By using cookies to store the palette selection it allows TiddlyTools to provide a personally customized appearance, while stil delivering the default appearance to other visitors.

To revert to the default “TiddlyTools (Dark)” palette, you can either manually switch back to that palette, or use the Cookie Manager to delete the $:/palette and $:/config/TiddlyTools/Background cookies and then reload the page.

-e