Add background image to Vanilla theme tweaks

Now one can choose an image tiddler from a dropdown and choose how the
image is attached.
This commit is contained in:
Jermolene 2015-04-01 18:28:33 +01:00
parent 5effb3fdc3
commit 987bfcfd5b
2 changed files with 50 additions and 3 deletions

View File

@ -2,17 +2,46 @@ title: $:/themes/tiddlywiki/vanilla/themetweaks
tags: $:/tags/ControlPanel/Appearance
caption: Theme Tweaks
\define backgroundimage-dropdown()
<div class="tc-drop-down-wrapper">
<$button popup=<<qualify "$:/state/popup/themetweaks/backgroundimage">> class="tc-btn-invisible tc-btn-dropdown">{{$:/core/images/down-arrow}}</$button>
<$reveal state=<<qualify "$:/state/popup/themetweaks/backgroundimage">> type="popup" position="belowleft" text="" default="">
<div class="tc-drop-down">
<$linkcatcher to="$:/themes/tiddlywiki/vanilla/settings/backgroundimage">
<$link to="">
(none)
</$link>
<hr>
<$list filter="[all[shadows+tiddlers]is[image]] -[type[application/pdf]] +[sort[title]]">
<$link to={{!!title}}>
<$transclude/> <$view field="title"/>
</$link>
</$list>
</$linkcatcher>
</div>
</$reveal>
</div>
\end
\define backgroundimageattachment-dropdown()
<$select tiddler="$:/themes/tiddlywiki/vanilla/settings/backgroundimageattachment" default="scroll">
<option value="scroll">Scroll with tiddlers</option>
<option value="fixed">Fixed to window</option>
</$select>
\end
You can tweak certain aspects of the ''Vanilla'' theme.
! Options
|[[Sticky titles|$:/themes/tiddlywiki/vanilla/options/stickytitles]]<br>//Causes tiddler titles to "stick" to the top of the browser window. Does not work at all with Chrome, and causes some layout issues in Firefox// |<$select tiddler="$:/themes/tiddlywiki/vanilla/options/stickytitles"><option value="no">No</option><option value="yes">Yes</option></$select> |
! Settings
|[[Font family|$:/themes/tiddlywiki/vanilla/settings/fontfamily]] |<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/settings/fontfamily" default="" tag="input"/> |
|[[Code font family|$:/themes/tiddlywiki/vanilla/settings/codefontfamily]] |<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/settings/codefontfamily" default="" tag="input"/> |
|[[Font family|$:/themes/tiddlywiki/vanilla/settings/fontfamily]] |<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/settings/fontfamily" default="" tag="input"/> | |
|[[Code font family|$:/themes/tiddlywiki/vanilla/settings/codefontfamily]] |<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/settings/codefontfamily" default="" tag="input"/> | |
|[[Page background image|$:/themes/tiddlywiki/vanilla/settings/backgroundimage]] |<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/settings/backgroundimage" default="" tag="input"/> |<<backgroundimage-dropdown>> |
|[[Page background image attachment |$:/themes/tiddlywiki/vanilla/settings/backgroundimageattachment]] |<<backgroundimageattachment-dropdown>> | |
! Sizes

View File

@ -1,7 +1,24 @@
title: $:/themes/tiddlywiki/vanilla/base
tags: [[$:/tags/Stylesheet]]
\define custom-background-datauri()
<$reveal state="$:/themes/tiddlywiki/vanilla/settings/backgroundimage" type="nomatch" text="">
<$set name="background" value={{$:/themes/tiddlywiki/vanilla/settings/backgroundimage}}>
<$list filter="[<background>is[image]]">
<$list filter="[<background>!has[_canonical_uri]]">
`background: url(`<$macrocall $name="datauri" title={{$:/themes/tiddlywiki/vanilla/settings/backgroundimage}}/>`);`
</$list>
<$list filter="[<background>has[_canonical_uri]]">
`background: url(`<$view tiddler={{$:/themes/tiddlywiki/vanilla/settings/backgroundimage}} field="_canonical_uri"/>`);`
</$list>
`background-attachment: `{{$:/themes/tiddlywiki/vanilla/settings/backgroundimageattachment}}`;`
</$list>
</$set>
</$reveal>
\end
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline
/*
** Start with the normalize CSS reset, and then belay some of its effects
*/
@ -39,6 +56,7 @@ body.tc-body {
color: <<colour foreground>>;
background-color: <<colour page-background>>;
word-wrap: break-word;
<<custom-background-datauri>>
}
h1, h2, h3, h4, h5, h6 {