Use Color Macro to Change Dynamically the Background Color of Tiddler Under Focus

Tips & Tricks
, , ,
#1

Purpose: Use a color palette and change its transparency

Sometimes you like to make a tiddler distinct when it is under focus (by mouse hover). One way is to change the background color using CSS.

To do so:

  1. Create a new tiddler tagged with $:/tags/Stylesheet

2.Put below CSS as text body


.tc-tiddler-frame:hover { background: <<colour sidebar-tab-background>>00; }
  1. Save the tiddler(note do not change the tiddler type, it should not set to text/css)

Usage:

If you move the mouse over every tiddler in the story river, it will get a little darker.
msedge_img_255_20240722

Remarks
The tip here is the use of <<colour sidebar-tab-background>> and then adding alpha value (transparency) by concatenating → <<colour sidebar-tab-background>>00;

4 Likes
#2

Great tips. I am looking for it for a long time ago.

#3

:thinking: … I love having a hover effect for a tiddler in the story river… But this recommendation seems hasty and not good practice, to me.

First, to be clear on terms: Alpha value is the opposite of transparency, though you’re still right that in this case you’re achieving transparency by adding an alpha value (the alpha value of 00 — that is, taking away all the alpha opacity value — gets you transparency).

The effect will make background “a little darker” only on certain palettes. This css (assuming the input value is a 6-digit hex value) should simply make the tiddler transparent when you hover. This means hovering causes zero contrast with the page background…

This strikes me as be counterintuitive when you want something to pop. (That is, this stylesheet seems to make a tiddler lose its contrast from background when hovered-over…)

It could also make the tiddler hard to read if the palette depends on strong contrast between tiddler background and page background. Among the default palettes, for example, “Rocker” has a black page background and white tiddler background.

On the other hand, there are palettes that don’t offer any contrast between tiddler background and page background, so this stylesheet tweak would show no effect on those palettes. (For example, the built-in palette Blanca is like this.)

I’d love to see a more palette-savvy way to make a good hover effect for tiddlers. I just was experimenting with using, say, the default tag color, dialed down to low opacity (say, adding 11 to the palette value)… Alas, some palettes — including Vanilla! — use some three-digit colors, and some palettes use values like “transparent”… so adding two more just results in an invalid color value. Folks can also use rgba values in their palettes, or 8-digit hexadecimal values that already include opacity, etc… So adding two digits to change opacity is a bit of a gamble, if you want a solution that travels well… :grin:

Perhaps all this will be easier with more sophisticated css as discussed here. I hope so!

#4

I agree! but here the purpose was:

  • how get attention when a mouse is on a tiddler
  • how to use the palette color and modify it
#5

I am worried, now, that my reply has seemed too critical in tone. :flushed:

I do think the difficulty of making a stylesheet intervention here that “just works” (across palettes) is instructive. I have long been interested in developing stylesheets modifications that will work well even across light and dark palettes — without intervening in those palettes themselves — and it is surprisingly difficult (at least to me, with my css level).

One tool that I have tried to use in this way is telmiger’s colorAction, which gives us the ability to take a color and lighten or darken it. It’s great to take a color like alert-background or primary and make it much lighter… But even that tool (if I use it to make a hover background for tiddlers) yields very different effects depending on whether we are on dark or light palette.

I look forward to a more integrated and intuitive set of palette tools and css interventions. It’s certainly a complex project!

1 Like
#6

Not at all!

I use Gmail to read Talk posts. When I replied I used numbered list in Gmail and they appear as H1 heading in Talk. So the bold/big font in my reply was not intentional! I edited my reply by visiting Talk page. Sorry!

1 Like
#7

Here’s a simple one to start with: a simple tiddler-hover border effect. Add these lines to any stylesheet tiddler:

.tc-tiddler-frame:hover {
    box-shadow:
        0 0 0 5px <<colour primary>>40 inset,
        0 0 0 1px <<colour primary>>;
}

As long as the palette has a decent color mix of “background” and “primary” colors, you’ll have a visible effect, so it works with most of the default palettes.

You can adjust the values for a more distinct or more subtle effect.

  • First set of values adjust the inner
  • Second set of values for the outer border

I’d rather keep the entire tiddler background color used for identification purposes without a hover-effect, but here’s a place to start for that too:

.tc-tiddler-frame:hover {
    background-color: <<colour background>>;
    background-image:
        linear-gradient(<<colour notification-background>>80, <<colour notification-background>>1A),
        linear-gradient(<<colour background>>, <<colour background>>);
}

I used background-image layers to keep the default tiddler-background color and put a transparent gradient on top of it. You won’t have to worry about the tiddler-background blending with the page-background.

If you really wanted to dial in complementary effects, you could specify general-use values but also have palette-specific variations:

.tc-tiddler-frame:hover {
    box-shadow:
        0 0 0 4px <<colour primary>>26 inset,
        0 0 0 1px <<colour primary>>80;
}

<% if [{$:/palette}match[$:/palettes/Vanilla]] %>
.tc-tiddler-frame:hover {
    background-color: <<colour background>>;
    background-image:
        linear-gradient(<<colour notification-background>>80, <<colour notification-background>>1A),
        linear-gradient(<<colour background>>, <<colour background>>);
}
<% endif %>

EDIT here’s an image of the effects with Vanilla palette

TiddlerHoverEffects

1 Like
#8

Nice writeup. Thank you Brian