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.
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.
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.
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
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
> 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
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:
> > 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
> 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
> 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...
> > > 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
|
