Help Wanted, Left side bar and other layout changes

#1

Folks,

Recently I experimented with some left sidebar plugins and Mods because I want to move a set of tabs I have in the right sidebar to the left, ideally with a switchable subsets of tabs, so the left sidebar would be contextual for example project management would show all projects, or when working on a project all items relating to the current project etc…

  • The problem is I now somehow have a left sidebar I can’t edit or remove
  • Nor can I get a working solution

What I/we need;
The Tiddlywiki page layout is not strait forward and not only runs wide and deep across the TiddlyWiki User interface, but key aspects of the layout depend on CSS and HTML. It seems to me customisation of the layout demands some insight to the CSS and the elements assigned various classes.

  • This seems to be one area where TiddlyWiki is not so well “Self Documenting”
  • It seems related to another gap and this is insufficient documentation of tiddlywiki classes and elements within the user interface.

Can you help?
I am about to do my own “research effort” to try and document the general principals and ways top customise the layout and will publish my findings here however if you understand somewhat how it all works and where to look and make choices to add new elements, or customise existing ones to the layout, beyond the existing system tags please speak up.

  • I am not asking for a comprehensive answer (although it would help) but more a set of bullet points around the structure, methods and ways to customise the layout.

Thanks in advance.

1 Like
#2

I am researching this extensively and my current understanding;

  • Various list and reveals iterate various tags to “transclude” different elements for each level
    • Page
    • Story
    • Tiddler
  • Various classes are applied at each level then a simple transclusion done of the next element or set of elements.
    • keep in mind the cascade mechanism is part of this so different elements may be transcluded according to the cascades
  • Then we observe the use of @media statements that uses different css according primarily a sidebar break point.
    • One in particular contains classes relating to the overall layout and basically sets height/width etc… of the elements.
    • others relate to other elements on the page like messages and alerts etc…

[Edited]
Also it is evident that the CSS position property is important.

I seems what we need is;

  • The hierarchical iterations from page down to tiddlers
  • A map of the key classes within that hierarchy
  • The CSS position’s relative to the class use in the heirachy
  • The media statements that alter overall display according to the break point
    • Are there others?
#3

There are different layers in the layout. They are refered on some system tag, which are using to build each layer.

You would need to know in which layer is a element to start making changes.

#4

Agreed, I think I see it the same way as you.
Can you give an example as you see it?

  • I will prepare one also

Eg Sidebar segment

* The tag <<tag $:/tags/PageTemplate>> on $:/core/ui/PageTemplate/sidebar is itterated by $:/core/ui/PageTemplate
* The [[sidebar|$:/core/ui/PageTemplate/sidebar]] includes items with <<tag $:/tags/SideBarSegment>>
** wrapped div class="tc-sidebar-header"

Snag_64722c
Snag_64722c759×74 4.99 KB

#5

@TW_Tones I don’t know if it exactly what you’re looking for but my LeftBar plugin might be of help, including an analysis of how it creates a space in the page layout.

BTW, I just now updated the LeftBar plugin (very minor updates) and republished it on tiddlyhost instead of tiddlyspot.

1 Like
#6

The basic example is:
The principal levels/layers are the page layout and its parts (sidebar, story,…). This parts are top layer over the page layout. You have to start in the top layers to find where you can make the change, if you don’t find it then you have to move to next bottom level.

#7

Yes - this wikitext and transclusion hierarchy part is very well understood by myself.

Where I can’t secure a full understanding is in the CSS, @media and div/sections that come together to build the full User Interface.

Once I truly deeply understand it, I can help others and document it.

#8

@twMat your left bar plugin seems to be what I want but I use the Core “Menu Bar” plugin and for some reason its clashing on my Wiki and not displaying consistently.

  • Let me know if you know how to me them compatible please.
#9

@TW_Tones - hmm, a quick test to just pull the LeftBar plugin into tiddlywiki.com , which has the MenuBar plugin is installed, seems to work as intended. What is clashing?

#10

I can only toggle the sidebar from opening the $:/plugins/TWaddle/LeftBar/Toggle tiddler.

I will investigate more tomorrow, but its in a complex Wiki so there may be something else clashing.

#11

Do you not get/see the toggle button hamburger/chevron up in left corner? A first step is to make sure that the toggle button is set to show - see settings in the plugin or via the Controlpanel> Settings> LeftBar

If you don’t see it, maybe the top “menu bar”, or some item therein, covers it for some reason (the tc-menubar seems to have z-index: 850 on tw. com but maybe you have something higher)… so you can see if increasing the LeftBar toggle z-index helps, i.e in the LeftBar Stylesheet you increase the z-index: 1200 to a gazillion…