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/d9c666ea-65b2-4153-8478-974228217187%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
