Properly integrate TiddlersBarPlugin in TiddlyPedia theme?

20 views
Skip to first unread message

FLX

unread,
Nov 9, 2009, 5:50:50 AM11/9/09
to TiddlyWikiDev
Please see http://dl.dropbox.com/u/50769/TiddlyPedia.html

I would like the tabs to be placed in the toolbar instead of above it,
how can I do this?

Thank you in advance!

Regards,

Dennis

Tobias - http://tbGTD.tiddlyspot.com

unread,
Nov 10, 2009, 10:57:47 AM11/10/09
to TiddlyWikiDev
Hi Flx,

That is a very tricky one.as the toolbar is rendered in every tiddler
whereas - so far - tiddlersbar only gets rendered once... in the
PageTemplate. So you cannot simply put TiddlersBar into the
ViewTemplate.

I guess, the best you can try is to position '#tiddlersBar'
absolutely, with css and have the toolbar 'clear:both' if Tiddlersbar
is coming too close... e.g. have it create a linebreak.

Tobias.

Tobias - http://tbGTD.tiddlyspot.com

unread,
Nov 10, 2009, 11:36:19 AM11/10/09
to TiddlyWikiDev
Hi Dennis,


I played a bit with it and this is what I have come up:

http://bit.ly/3dJNWo

See the changes in EditTemplate, ViewTemplate and the last section in
StyleSheet.



Tobias.

FLX

unread,
Nov 10, 2009, 2:24:55 PM11/10/09
to TiddlyWikiDev
Hi Tobias,

Thanks! That looks a whole lot better! Isn't it possible to skew the
toolbar over all the way to the right, so that it has those fancy
tabs? I really liked those.
Also, for some reason I have very weird tab switching behavior. When I
click on one it switches around instead of remaining in a static
position.

Do you know anything about this?

Thanks,

Dennis

On Nov 10, 5:36 pm, "Tobias - http://tbGTD.tiddlyspot.com"

Tobias - http://tbGTD.tiddlyspot.com

unread,
Nov 11, 2009, 7:52:22 AM11/11/09
to TiddlyWikiDev
Hi Dennis,

1) I couldn't quite figure out how to meaningfully make tiddlersbar
wrap around the toolbar once the toolbar was 'up there'. When I
fiddled with it, tiddlersbar would always be hidden behind the toolbar
(at some point) which was not good at all. It should be a rather
simple thing for you to style the buttons as buttons though. However,
I would NOT recommend placing it at the same height as tiddlersbar.
For one, how would you imagine wrapping of excess tabs to happen?
2) As for... "When I click on one it switches around instead of
remaining in a static position." ...I have no idea what that means.


Tobias.

Tobias - http://tbGTD.tiddlyspot.com

unread,
Nov 11, 2009, 11:33:09 AM11/11/09
to TiddlyWikiDev
Hi Dennis,

The weird switching behaviour you're experiencing is due to
OpenTopPlugin... disable it! What did you want to use it for anyways?

Tobias.

FLX

unread,
Nov 13, 2009, 5:18:23 AM11/13/09
to TiddlyWikiDev
I dunno, I must have tried it and didn't delete it! Thanks for solving
that iffy problem :)

Ok last one: How to stylize inline tabs?
Sorry for the newbish questions (i really hate it) but can't get
inline tabs to style correctly, I'd like to change things such as the
background color on a active item and hover. I've added a tab example
at http://dl.dropbox.com/u/50769/TiddlyPedia.html

Much appreciated Tobias!

Thanks,

Dennis

On Nov 11, 5:33 pm, "Tobias - http://tbGTD.tiddlyspot.com"

Tobias Beer

unread,
Nov 13, 2009, 12:11:29 PM11/13/09
to TiddlyWikiDev
Styling can be hairy, above all across browsers, but once you get a
grip on the how-to's it get's less and less complicated, especially
the basics. So, if you haven't yet, first get FIREBUG for Firefox.
Then inspect elements rendered by the browser (like tabs) as to what
they consist of... you will find css classes, like...

.tabSetWrapper
.tab
.tabSelected
.tabUnselected
.tabContents
etc... which give you an idea of the actual html structure underlying
to tabs

Knowing this, and that you may have different areas for which you want
to style tabs differently,like
.viewer
#tiddlerDisplay
#sidebar
#mainMenu

...you can put stuff into your Stylesheet, like
.viewer .tab {border: 3px solid #999;-moz-border-radius:3px; -webkit-
border-radius:3px;background:#eee;}
#sidebar .tabContents .externalLink {text-decoration:none;border-
bottom:1px dotted #eee;}

For more examples, you could sneak into the StyleSheet as part of
[[tbGtdTheme]] of my tbGTD
http://tbGTD.tiddlyspot.com

There you find .tab style-definitions especially for the sidebar and
those vertical tabs (which I use for my help-section) which I created
recently together with Eric Schulman...
http://verticaltabs.tiddlyspot.com

Here's some viable information with examples on css...
http://www.w3schools.com/CSS/

Alex Hough

unread,
Nov 13, 2009, 4:59:58 PM11/13/09
to tiddly...@googlegroups.com

FLX

unread,
Nov 18, 2009, 10:51:30 AM11/18/09
to TiddlyWikiDev
Thanks all! It's a great help to me. I have one problem left and that
is a ugly border (#EEEEEE) running around div.viewer and through the
tabs. Check http://dl.dropbox.com/u/50769/TiddlyPedia.html for a
example. I tried everything I could using firebug and DOM inspection,
I can't get rid of it. ...help?

Thanks,

Dennis

On Nov 13, 10:59 pm, Alex Hough <r.a.ho...@googlemail.com> wrote:
> On FireBug: search YouTube for Firebug and Css: gets you started...
>
> ALex
> [1]http://video.google.com/videosearch?q=YouTube+for+Firebug+and+Css&um=...
> orhttp://tinyurl.com/yjzr722
>
> 2009/11/13 Tobias Beer <beertob...@googlemail.com>

FLX

unread,
Nov 24, 2009, 5:09:31 PM11/24/09
to TiddlyWikiDev
Anyone? I still haven't been able to fix it.

It would be of great help to me.

Thanks!

Dennis

On Nov 18, 4:51 pm, FLX <flx...@gmail.com> wrote:
> Thanks all! It's a great help to me. I have one problem left and that
> is a ugly border (#EEEEEE) running around div.viewer and through the
> tabs. Checkhttp://dl.dropbox.com/u/50769/TiddlyPedia.htmlfor a
Reply all
Reply to author
Forward
0 new messages