On Friday, June 19, 2020 at 5:19:56 AM UTC-7, dubtoms wrote: > > I'm new to TW and amazed by what you can do with it but I'm a bit > overwhelmed by the documentation so I figured I would ask this silly > question here : >
There are no "silly" questions... only silly answers! > I want to add a basic menu bar similar to the one found on this wiki for > example <https://tritarget.org/> to my own tw to make it more easy to > navigate some categories for external viewers. > I understand there are some plugins including "menu bar" which allow this > and more but the example listed above does not seem to use any unless I am > wrong. > You are not wrong. The wiki example you cite (https://tritarget.org/) uses the native HTML <nav>...</nav> syntax, so no TW plugins are needed. > I tried creating a tiddler tagged with $:/tags/TopLeftBar and copy/paste > some code found in the same exemple but it does not seem to work: > >> >> <nav class="top-nav-bar tc-adjust-top-of-scroll"> >> <<list-links filter:"[tag[NavBar]!has[draft.of]sort[position]]">> >> </nav> >> > > Am I missing something obvious? > 1) In order to indicate which Tiddler links should appear, you need to go to each of those tiddlers and add a tag, "NavBar". 2) You need to copy the following CSS and paste it into a tiddler tagged with $:/tags/Stylesheet... 2a) To style the NavBar links so they appear horizontally on a blue background: .tc-topbar-left { top: 0; left: 0; width: 100%; background-color: #446e9b; border-color: #345578; border-width: 0 0 1px; } .tc-topbar-left ul { list-style: none; } .tc-topbar-left li { display: inline; margin: 0; padding: 0 20px; } .tc-topbar-left li a { color: #ddd; } .tc-topbar-left li a:hover { color: #fff; } (found at https://tritarget.org/#%24%3A%2Fplugins%2Fsukima%2Ftritarget%2Fstyles) 2b) To set the height of the nav element: .top-nav-bar { height: 40px; } (found at https://tritarget.org/#%24%3A%2Fstyles%2Fsite) If you add the tags in step (1) and define the CSS in steps (2a) and (2b), you should see the results you want. Let me know how it goes... enjoy, -e -- 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 [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/53d79397-f42e-4c05-8f30-b9bcbb8d7433o%40googlegroups.com.
