How to do I make some specific changes in the UI?

[talha131]

I want to make following changes

https://i.imgur.com/gHZDTa5.png

1. Move toolbar and search box to the top of the page, where it will remain affix.
2. Hide title and subtitle of tiddly wiki
3. Move rest of the sidebar up till where title used to be

Please guide me how do I make these changes.

​

[Stephan Hradek]

This is ugly but to give you a starting point:

You can use CSS. Create a new tiddler tagged with

$:/tags/Stylesheet

Then insert

div.tc-search {
    position: fixed;
    top: 0px;
    left: 0px;
}
div.tc-page-controls {
    position: fixed;
    top: 0px;
    right: 0px;
}
div.tc-sidebar-header h1.tc-site-title,
div.tc-sidebar-header div.tc-site-subtitle {
    display:none;
}

[TonyM]

The next release will make this easier with a tag you can use for elements in the sidebar.

Otherwise it is also a matter of looking at the tiddlers that currently generate the content in the side bar and cut and copy as needed.

Your changes to shadow tiddlers will replace the underlying tiddler but can be deleted, restoring the shadow tiddler.

Regards
Tony

[talha131]

Thank you Tony.

> Otherwise it is also a matter of looking at the tiddlers that currently generate the content in the side bar and cut and copy as needed.

Can you please point me towards some such tiddlers so that I can inspect their code?

[talha131]

Thank you Stephan. I used following code

div.tc-search {
    position: fixed;
    top: 0px;
    left: 300px;
}

div.tc-page-controls {
    position: fixed;
    top: 0px;
    left: 0px;
}

div.tc-sidebar-header h1.tc-site-title,
div.tc-sidebar-header div.tc-site-subtitle {
    display:none;
}

My intention was to keep the page controls and search always visible, even if sidebar is collapsed. It seems my approach is wrong. The page control and search bar has moved to the top but they disappear when I hide the sidebar.

Not sure it is possible or not. Perhaps I will have to override the shadow tiddlers that Tony mentioned.

[talha131]

From the docs, I get to know about `$:/tags/AboveStory`. Whatever I put inside a tiddler that is tagged with `$:/tags/AboveStory`, it will appear on top of story river.

I can leverage this tag to place page controls and search box on top of the story river.

The question is how do I place page controls and search box inside a new tiddler?

[talha131]

Update

I added

{{||$:/core/ui/PageTemplate/pagecontrols}}

to a tiddler and tag it with $:/tags/AboveStory. The result is

I am half way there. Now need to figure out how to put search field in the tiddler.

​

[Birthe C]

I have a tiddler named $:/_topsearch

<$set name="searchTiddler" value="$:/temp/search">
<$edit-text tiddler="$:/temp/search" type="search" tag="input" focus={{$:/config/Search/AutoFocus}} focusPopup=<<qualify "$:/state/popup/search-dropdown">> class="tc-popup-handle"/>
<$reveal state="$:/temp/search" type="nomatch" text="">
<$button tooltip={{$:/language/Buttons/AdvancedSearch/Hint}} aria-label={{$:/language/Buttons/AdvancedSearch/Caption}} class="tc-btn-invisible">
<$action-setfield $tiddler="$:/temp/advancedsearch" text={{$:/temp/search}}/>
<$action-setfield $tiddler="$:/temp/search" text=""/>
<$action-navigate $to="$:/AdvancedSearch"/>
{{$:/core/images/advanced-search-button}}
</$button>
<$button class="tc-btn-invisible">
<$action-setfield $tiddler="$:/temp/search" text="" />
{{$:/core/images/close-button}}
</$button>
<$button popup=<<qualify "$:/state/popup/search-dropdown">> class="tc-btn-invisible">
{{$:/core/images/down-arrow}}
<$list filter="[{$:/temp/search}minlength{$:/config/Search/MinLength}limit[1]]" variable="listItem">
<$set name="resultCount" value="""<$count filter="[!is[system]search{$(searchTiddler)$}]"/>""">
{{$:/language/Search/Matches}}
</$set>
</$list>
</$button>
</$reveal>
<$reveal state="$:/temp/search" type="match" text="">
<$button to="$:/AdvancedSearch" tooltip={{$:/language/Buttons/AdvancedSearch/Hint}} aria-label={{$:/language/Buttons/AdvancedSearch/Caption}} class="tc-btn-invisible">
{{$:/core/images/advanced-search-button}}
</$button>
</$reveal>




<$reveal tag="div" class="tc-block-dropdown-wrapper" state="$:/temp/search" type="nomatch" text="">


<$reveal tag="div" class="tc-block-dropdown tc-search-drop-down tc-popup-handle" state=<<qualify "$:/state/popup/search-dropdown">> type="nomatch" text="" default="">


<$list filter="[{$:/temp/search}minlength{$:/config/Search/MinLength}limit[1]]" emptyMessage="""<div class="tc-search-results">{{$:/language/Search/Search/TooShort}}</div>""" variable="listItem">


{{$:/core/ui/SearchResults}}


</$list>


</$reveal>


</$reveal>


</$set>

A tiddler called $:/_topbar tagged $:/tags/TopLeftBar

\define config-title()
$:/config/PageControlButtons/Visibility/$(listItem)$
\end


<$list filter="[all[shadows+tiddlers]tag[$:/tags/PageControls]!has[draft.of]]" variable="listItem">
<$reveal type="nomatch" state=<<config-title>> text="hide">
<$set name="tv-config-toolbar-class" filter="[<tv-config-toolbar-class>] [<listItem>encodeuricomponent[]addprefix[tc-btn-]]">
<$transclude tiddler=<<listItem>> mode="inline"/>
</$set>
</$reveal>
</$list>
@@float:right;padding-left:200px; {{$:/_topsearch}}@@

 

And a style tiddler $:/_stylesheet tagged $:/tags/Stylesheet

.tc-sidebar-scrollable { top: -55px; }


.tc-sidebar-header .tc-site-title,
.tc-sidebar-header .tc-site-subtitle,
.tc-sidebar-header .tc-page-controls {display:none;
}


.tc-sidebar-lists .tc-search {display:none}


.tc-topbar-left {
   margin-left: 0px;
   margin-right: 2em;
}


html .tc-topbar svg {
     height: 1.4em;
     width: 1.4em;
}

It seems to work,

Birthe

[Mat]

Like Tony says, wait until next release and it will be MUCH easier. If it wasn't for Birthes solution above, which I didn't try out so I'm only assuming it works, if it wasn't for this solution I would advice against doing this right now.

As you've noted it is tricky to identify which tiddlers do what in the core. But you're pointint to the SiteTitle and to things that are (currently) deeply integrated intot he sidebar so those two terms are a good starting point when using advanced search to search for shadow tiddlers. Note that you can more or less freely edit shadow tiddlers - because you can reset by merely deleting your modified shadow tid.

<:-)

[talha131]

Thank you everyone for their input. It indeed is tricky to customize the layout. I am going to pause further customization till I get my hand on the next release which Tony and Mat have mentioned is going to easier to customize. For now I have made following changes to get this result

It’s not perfect and not exactly what I had in mind, but it will do for now.

I created a tiddler, title $:/talha131/Template/Header, and tag $:/tags/AboveStory

<div class="talha131-header">
{{||$:/core/ui/PageTemplate/pagecontrols}}

<$set name="searchTiddler" value="$:/temp/search">
<div class="tc-search">

</div>

<$reveal tag="div" class="tc-block-dropdown-wrapper" state="$:/temp/search" type="nomatch" text="">

<$reveal tag="div" class="tc-block-dropdown tc-search-drop-down tc-popup-handle" state=<<qualify "$:/state/popup/search-dropdown">> type="nomatch" text="" default="">

<$list filter="[{$:/temp/search}minlength{$:/config/Search/MinLength}limit[1]]" emptyMessage="""<div class="tc-search-results">{{$:/language/Search/Search/TooShort}}</div>""" variable="listItem">

{{$:/core/ui/SearchResults}}

</$list>

</$reveal>

</$reveal>

</$set>

</div>

The {{||$:/core/ui/PageTemplate/pagecontrols}} and rest of the code is extracted from the shadow tiddlers. I just wrapped them in <div class="talha131-header">.

I created another tiddler, $:/talha131/CSS/Header with tag $:/tags/Stylesheet.

div.talha131-header {     background: #f0851d;     border-radius: 5px;     display: flex;     left: 29px;     padding: 5px;     position: fixed;     top: 5px;     z-index: 1200; }  div.talha131-header div.tc-page-controls {     margin-top: 0px; }  .tc-page-controls svg {     fill: white; }

This gave me the result I shared above.

Known issues

I shouldn’t probably customize the page controls svg fill color using .tc-page-controls svg. It’d be better to modify them using color palettes, I suppose.

Also, the page controls come on top of the tiddler title.

​

[TonyM]

Talha,

I am sure you found it tricky this first time, but it gets easier as you learn about the specifics of TiddlyWiki, however since it is largely based on html CSS and other web Standards I think it would be safe to say TiddlyWiki is one of the most extensible, customisable and  configurable environments you are likely to ever come across. As time passes people put together alternative views and share them so it is possible to draw from a menu of solutions rather than build your own. One of the things I like about tiddlywiki is learning the html and css along with tiddlywiki is I am spending time on broad industry standard technology which will be applicable time and again. Whilst I value greatly our colleges who build powerful addons I can now see that more often that not a wikitext based hack with some html or css can achieve almost anything with tiddlywiki's existing functions.

When I referred to the new release I was thinking of the feature to simply use a tag to introduce items to the sidebar (not tabs) allowing us to avoid overwriting the core tiddlers. this will help people building shareable solutions but for your own customised uses it is largely irrelevant, now you have progressed as you have.

Some small tips

• Try wrapping a transclusion of an svg in another <svg open and close with parameters you wish to apply to the containing svg. I did this to change the size and colour of icons.
• Controls on top of the tiddler. This can be the result of  z-index value in css that determines the height "above/or in front of" other elements, and there is a value somewhere that determines where scrolling tiddlers reach to the top. Some of the existing solutions that make use of the above story area will may have applied settings like that. I would start looking in the  Page template tiddlers

Page Tags
 $:/tags/TopLeftBar
 $:/tags/TopRightBar
 $:/tags/AboveStory
 $:/tags/BelowStory

Page Template tiddlersAll tiddlers tagged: $:/tags/PageTemplate

 
 
  $:/core/ui/PageTemplate/topleftbar  
 
  $:/core/ui/PageTemplate/toprightbar  
 
  $:/core/ui/PageTemplate/sidebar  
 
  $:/core/ui/PageTemplate/story  
 
  $:/core/ui/PageTemplate/alerts

With  large part of the work done in the  $:/core/ui/PageTemplate/story  

Regards

Tony