Is it possible to apply an opacity setting to my tiddlers via css?

[Zan Thrax]

I've started a new wiki that has a rather dark background image. The Dark Photos pallette works well to make the sidebar clearly readable on it, but the start white tiddlers stand out a little stronger than I'd like. If I could make their background be only 80 or 90 percent opaque, I think it would look better. But I've only a vague idea of how to add custom css to a wiki, and an equally vague idea of how to use the opacity css property.

[Eric Shulman]

On Saturday, December 12, 2015 at 8:39:51 AM UTC-8, Zan Thrax wrote:

I've started a new wiki that has a rather dark background image. The Dark Photos pallette works well to make the sidebar clearly readable on it, but the start white tiddlers stand out a little stronger than I'd like. If I could make their background be only 80 or 90 percent opaque, I think it would look better. But I've only a vague idea of how to add custom css to a wiki, and an equally vague idea of how to use the opacity css property.

Adding your own CSS is very easy: just enter your CSS definitions into a tiddler tagged with "$:/tags/Stylesheet".  The CSS will automatically be applied as soon as you finish editing the tiddler, so you can instantly see the results and make adjustments as needed.

The opacity CSS property takes a decimal value between 0.0 and 1.0.  For example, to use a tiddler background with 50% opacity, you define it like this:

   .tc-tiddler-body { opacity:0.5; }

However.... the opacity value will affect not only the background of the element, but all child elements it contains as well, which will also be 'faded' by 50%, making the content less readable.

Fortunately, there is a more isolated way to get a semi-transparent background, without affecting the child content: use the 'background-color' property with an "rgba(...)" color function, like this:

   .tc-tiddler-body { background-color: rgba(0,0,0,0.5); }

rgba(...) takes four parameters: the first three are separate R, G, and B decimal color values (0-255).  The last parameter is the "alpha" value, which is a number between 0.0 and 1.0, just like the opacity property.  The color values determine the 'hue' of the transparency.  The alpha value determines how 'see through' the color is, where 0 is completely transparent (invisible) and 1.0 is a solid RGB color.  Thus, if you wanted a semi-transparent blue "glow" for the background, you could use something like rgba(0,0,255,0.5).

note: the CSS class you want to adjust for the tiddler is ".tc-tiddler-body" (as shown in the example).

That should do it.  Let me know if you get stuck.

enjoy,

-e

Eric Shulman

ELS Design Studios

TiddlyTools - "Small Tools for Big Ideas!"

InsideTiddlyWiki: The Missing Manuals

YOUR DONATIONS ARE VERY IMPORTANT!

HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...

   http://TiddlyTools.github.com/fundraising.html#MakeADonation

Professional TiddlyWiki Consulting Services...

Analysis, Design, and Custom Solutions:

   http://www.TiddlyTools.com/#Contact

[Zan Thrax]

I didn't get quite the result I was expecting. Is there a different element that I should be adjusting rather than tc-tiddler-body ?

[Eric Shulman]

On Saturday, December 12, 2015 at 11:44:57 AM UTC-8, Zan Thrax wrote:

I didn't get quite the result I was expecting. Is there a different element that I should be adjusting rather than tc-tiddler-body ?

try .tc-tiddler-frame

-e

 

[Zan Thrax]

I figured it out! .tc-tiddler-frame { background-color: rgba(255,255,255,0.8); } gets me what I wanted - the background image is slightly visible through the tiddlers.

Thanks Eric, that was both easy, and something I'd have not figured out without some help.

As a followup, is it possible to make the sidebar have a background frame similar to a tiddler?

[Matabele]

Hi

I have posted a highly styled TW5 here -- this includes several custom stylesheets where you may find examples of how to set various CSS styles.

Have a look at the various '$:/plugins/matabele/stylesheets' -- they're easier to read if you open them for editing. The lines:

background: rgba(255,255,255,0.25);

-- are the ones where the color and opacity of the background are set.

Hope you can make some sense of them :-)

regards

[cmari]

Perhaps this could be a palette tweak? (Or perhaps it already is and I haven't been able to find it).

As a followup, is it possible to make the sidebar have a background frame similar to a tiddler?

Having spent some time poking around, I learned that you can change the background of the entire sidebar (site title and all), by putting this in a stylesheet tiddler:

.tc-sidebar-header {background-color:white; }

Alternatively, you could change the background of only what appears below the search field (including search results):

.tc-sidebar-lists .tc-tab-content, .tc-sidebar-lists .tc-search-results {background-color: white; padding:3px;}

However, I'm not a CSS expert and the fact that these options seem to work perfectly well in Chrome and Firefox but don't do anything in AndTidWiki (where I'd really appreciate better visibility) makes me suspect there is probably a better way to do it.
cmari

[Tobias Beer]

Hi Matabele,

 

I have posted a highly styled TW5 here -- this includes several custom stylesheets where you may find examples of how to set various CSS styles.

The one thing I've always found "missing" in your wiki is a search box. :-)

Best wishes,

Tobias.