[TW5] Hide Toolbar

[Odder]

Is it possible to hide the toolbar (at the top of Tiddlers) and only visible when you hover the tiddler (as in TWC)?

[Ton Gerner]

Hi Odder,

Yes, that is possible.

I use a light/dark blue color scheme:

/* COLOR OF TIDDLER BUTTONS */
html .tw-tiddler-controls svg {
     fill                 : #9CF; /* light blue */
}

html.tw-tiddler-controls button:hover svg {
     fill                 : #04B;    /* dark blue */
}

If you change the color value #9CF to the color value of your tiddler background (default white #FFF) the icons become invisible.
The 'hover' color can be adjusted to your liking.

Cheers,

Ton

[Stephan Hradek]

Am Mittwoch, 5. Februar 2014 10:18:32 UTC+1 schrieb Ton Gerner:

If you change the color value #9CF to the color value of your tiddler background

Ever thought about using the color called "transparent"?

[Ton Gerner]

Hi Stephan,

Never thought about that; didn't even know it existed.
I learn every day ;)

Thanks,

Ton

[Odder]

Hi Ton,
thanks for your answer. If I use the entries in my stylesheet the toolbar is hidden (with # fff;). But when I hover the tiddler the toolbar is not visible (yes, the hover fill-color is not white :-), it's black # 000;). Only when I point on one of the  symbols it is visible. But only the single symbol, not the complete toolbar. in TWC I had the following css code:

. toolbar {visibility: hidden;}
. selected toolbar. {visibility: visible;}

and on mouse over the tiddler the whole toolbar is displayed. Is this possible in TW5?

Cheers,
Odder

[Ton Gerner]

Hi Odder,

I don't know how to do that.

@Stephan any idea?

Cheers,

Ton
 

Cheers,
Odder

[Jeremy Ruston]

Here's one way to make the entire tiddler toolbar invisible until it is hovered:

.titlebar button {

opacity: 0;

}

.titlebar:hover button {

opacity: 1;

}

(Put those definitions in a tiddler tagged $:/tags/stylesheet)

Best wishes

Jeremy

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/groups/opt_out.

--
Jeremy Ruston
mailto:jeremy...@gmail.com

[Odder]

Hi, Jeremy

it works perfect. That's exactly what I wanted. Thank you very much also to the other for their help.

best regards
Odder

[Leopold Bloom]

My wiki used to hide the buttons using the CSS from JR but now it does not. Maybe because I updated TW.

This work:

.tc-tiddler-controls{ opacity: 0; }

.tc-tiddler-controls:hover{ opacity: 1; }

[Tobias Beer]

Added instructions here:

Mouseover Toolbar Visibility @ tb5

Also includes an example for a smooth transition effect that I adopted right away.

Be careful that it's .tc-titlebar button not .titlebar button.

To have the toolbar show when hovering the tiddler and not just its titlebar, use

.tc-tiddler-frame .tc-titlebar button {
opacity: 0;
}
.tc-tiddler-frame:hover .tc-titlebar button {
opacity: 1;
}

Best wishes,

— tb 

[Leopold Bloom]

Thanks TB. I replaced mine with your hover modification with slight changes:

.tc-tiddler-frame .tc-titlebar button
{
    opacity: 0;

    transition: opacity .3s ease-in-out;
    }
.tc-tiddler-title:hover .tc-titlebar button
{
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
    }

Now toolbar icons will show only when hovered over the top part. I also removed few lines (browser engine specific? still worked in FF)
and reduced the time for the icons to be visible.

[Tobias Beer]

Hi Leopold,

 

I also removed few lines (browser engine specific? still worked in FF) and reduced the time for the icons to be visible.

I tend to agree, we can't be doing this so someone on an aged browser gets the same results.

Best wishes,

— tb