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 <http://127.0.0.1:8088/Instances/PSaTSuitnew.html#%24%3A%2Ftags%2FPageTemplate> $:/core/ui/PageTemplate/topleftbar <http://127.0.0.1:8088/Instances/PSaTSuitnew.html#%24%3A%2Fcore%2Fui%2FPageTemplate%2Ftopleftbar> $:/core/ui/PageTemplate/toprightbar <http://127.0.0.1:8088/Instances/PSaTSuitnew.html#%24%3A%2Fcore%2Fui%2FPageTemplate%2Ftoprightbar> $:/core/ui/PageTemplate/sidebar <http://127.0.0.1:8088/Instances/PSaTSuitnew.html#%24%3A%2Fcore%2Fui%2FPageTemplate%2Fsidebar> $:/core/ui/PageTemplate/story <http://127.0.0.1:8088/Instances/PSaTSuitnew.html#%24%3A%2Fcore%2Fui%2FPageTemplate%2Fstory> $:/core/ui/PageTemplate/alerts <http://127.0.0.1:8088/Instances/PSaTSuitnew.html#%24%3A%2Fcore%2Fui%2FPageTemplate%2Falerts> With large part of the work done in the $:/core/ui/PageTemplate/story <http://127.0.0.1:8088/Instances/PSaTSuitnew.html#%24%3A%2Fcore%2Fui%2FPageTemplate%2Fstory> Regards Tony On Tuesday, September 18, 2018 at 8:54:48 AM UTC+10, talha131 wrote: > > 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"><$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></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. > > -- 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 post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/96cd9d27-6ac9-4167-87cd-4549e7babc7d%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
