Use CSS for Tiddler Size

129 views
Skip to first unread message

Mohammad

unread,
May 1, 2018, 1:02:33 AM5/1/18
to TiddlyWiki
In Zoomin story view, it is desired to open all tidlers with same size!

My question is:
  How can I use CSS to set the size of all tiddlers tagged with "slide" the same size
  for example: 

  • tiddler width    = 0.75 x (story width)
  • tiddler height  = 0.80 x (story width)


Note:
 In zoomin story view, when you have tiddlers with same size, it gets distraction out of the way

/Mohammad
  

Thomas Elmiger

unread,
May 1, 2018, 4:20:22 AM5/1/18
to TiddlyWiki
Hi Mohammad,

In my attempt to create a presentation, I used this line of CSS to set the tiddler-height:

body.tc-body .tc-tiddler-frame { border: 0; margin: 0; padding-top: 0; min-height: 100vh; }

I am not sure if you can use the story view width and hight in TW 5.1.16, but for me this worked great as it uses a percentage of the viewport (browser window) – 100 % in my case. The entities available are

vh = viewport height
vw = viewport width

My result is available here https://tid.li/tw5/styles.html including all things needed for the presentation, the CSS is inspired by Jeremy’s Punch theme and adapted to my preferences.

All the best,
Thomas

Mohammad

unread,
May 1, 2018, 11:11:45 AM5/1/18
to TiddlyWiki
Thank you Thomas!
It partially works! I wish to have the tiddler the same size in slide show
Now a minimum height is set!

/Mohammad

Thomas Elmiger

unread,
May 1, 2018, 3:08:55 PM5/1/18
to TiddlyWiki
You should be able to set the width in the same manner, e.g.

min-width: 75vw;

that would be equivalent to 75% of window width.

Mohammad

unread,
May 2, 2018, 12:06:39 AM5/2/18
to TiddlyWiki
Thank you Thomas!
Reply all
Reply to author
Forward
0 new messages