Translucent Tiddlers

[Scott Simmons (Secret-HQ)]

H'lo, TiddlyWizards —

I've been playing around with the opacity of tiddlers.  Specifically the opacity of .tc-tiddler-frame, which I can style with CSS to get the translucent effect I want.

For example, here's a simple stylesheet tiddler:

.tc-story-river .tc-tiddler-view-frame,
.tc-story-river .td-tiddler-edit-frame {
  opacity:0.9;
}

And here's the HTML from the DIV of a successfully styled tiddler that loads as one of the TW's default tiddlers:

<div data-tiddler-title="$:/palettes/Terminix" data-tags="$:/tags/Palette" class="tc-tiddler-frame tc-tiddler-view-frame tc-tiddler-exists  tc-tiddler-system tc-tagged-%24%3A%2Ftags%2FPalette "><div class="tc-tiddler-title">

However —

When I switch to edit view, check out how the DIV is built:

<div class="tc-tiddler-frame tc-tiddler-edit-frame   " data-tiddler-title="Draft of '$:/palettes/Terminix' by Scott" style="transition: none 0s ease 0s; opacity: 1;">

That style attribute is now overriding anything from my CSS, resetting the opacity of the tiddler back to 100% (opacity: 1;).

And it lingers when the tiddler is saved, affecting the DIV (and appearance) of the saved tiddler when viewed through the standard ViewTemplate:

<div data-tiddler-title="$:/palettes/Terminix" data-tags="$:/tags/Palette" class="tc-tiddler-frame tc-tiddler-view-frame tc-tiddler-exists  tc-tiddler-system tc-tagged-%24%3A%2Ftags%2FPalette " style="transition: none 0s ease 0s; opacity: 1;"><div class="tc-tiddler-title">

My translucency is gone.  😢

From what I can tell, the style="transition: none 0s ease 0s; opacity: 1;" bit is applied to any tiddler built during the TiddlyWiki session but not to tiddlers loaded at the TiddlyWiki's startup.

Is this a bug?  Or is the behavior by design?

Are there any good experiments with opacity changes I should be looking at?  (I seem to remember someone using the palette to make certain elements translucent, which is a bit different than affecting entire tiddlers, including the tc-tiddler-frame and all its children.)

---------------------------------------------------

In case you're curious what I'm up to, I'd like to make shadow tiddlers translucent for easy identification when I'm TiddlyWiking.

[Scott Simmons (Secret-HQ)]

Anyone have thoughts on this?  The question I'm stuck on at the moment is:

[Riz]

Did you try add `!important` to override the style elements? As in

.tc-tiddler-frame.tc-tiddler-edit-frame {
    opacity: 0.5 !important;
}

[Andrew Frith]

Did you ever solve this? I'm trying to solve the same thing except I want to prevent the transition property from overwriting my custom transition.

On Monday, April 15, 2019 at 10:22:26 PM UTC-4, Scott Simmons (Secret-HQ) wrote:

[Mat]

Without having studied the exact details in this case, there are a few general caveats:

• Make sure the stylesheets are set to process in the corrrect order. You can change the order by clicking on the stylesheet tag and just drag'n dropping. The ones further down overwrite ("win") over the ones above.
• Note that a style inside a styleblock, i.e not in a stylesheet tiddler, is actively affecting the whole page for as long as the tiddler is open. 
• ...and again, the styleblocks in tiddlers further down on the page "wins" over the tiddlers above it. I.e the order in wihch the tiddlers are temporarily open in the river affects it IF you have such styleblocks.
• For testing styles (as well as anything) I recommend my SideEditor. Yes, it has a few quirks, but it is IMO superior to any other way for editing tiddlers - especially stylesheets to see live results.
  
• Hopefully you already know this: Use the browser inspector tool to see how your style defs actually impact the elements, by right clicking and choosing "inspect"
• ...and hopefully even more obvious: The more specific you are in your targetting the more powerful the definition. (If you don't know what this means, then you must first read up on how css works before doing more complex stuff in TW.)

<:-)

[Andrew Frith]

Thanks for the pointers. It was a silly error on my part and it's fixed now.

For anyone else trying to accomplish something similar, Riz's suggestion (add !important) works. The error in my case was that I overrode the transition-duration, but the transition: none still took priority. Overwriting the entire transition worked for me.

.tc-tiddler-frame {
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
        transition: 0.4s !important;
    }
    .tc-tiddler-view-frame:hover {
        box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.2);
        border-radius: 20px;
    }

[Scott Simmons (Secret-HQ)]

D'oh!

I completely missed this last year, Riz, and went on a goose chase that involved me swapping color palettes for shadow tiddlers.  It was never as elegant and doesn't work for something I'm trying now, so I searched up this topic, which led me back to the FAR superior solution here.

And I guess that answers my original question, too:  The behavior is likely by design to prevent other, overreaching stylesheets from accidentally changing the opacity of tiddlers (while still leaving the ability to override available for those with eyes to see).

Thanks for your help!

[Scott Simmons (Secret-HQ)]

Thanks for the tips, Mat!  If you see this old topic bubble to the top, you may get a kick out of Riz's solution above.  I certainly did!  😊

[Scott Simmons (Secret-HQ)]

In case anyone is curious, here's the result — translucent shadow tiddlers.