Hi Lucy
Dave says he is now away on vacation so I hope he will not mind me stepping in, he gave you some examples of CSS code to change font size and so on and you asked where to put the code.
If you are familiar with CSS…
You can create a new tiddler and give it a tag as follows…
$:/tags/Stylesheet
Perhaps title it something like…
Custom CSS
You can add CSS to the regular text field of that tiddler to change the appearance of tiddlywiki.
As a test…
Add the following CSS to the main text body of your Custom CSS file…
.highlight{
background-color:#eeddff;
}
And then create a test tiddler, insert some text and add the following to apply the above CSS to some of that text as follows
This is ordinary non-highlighted text @@.highlight And this is highlighted text @@
If all is well then part of the sentence should look like someone has been at it with a highlighter pen.
Dave included CSS tips for reducing font size and also making thinner frames.
Of course with CSS you have a path open for screen size specific CSS which might be an avenue for exploration - I haven’t explored screen specific CSS for a couple of years now so not familiar with the latest methods for trying to take into account screen physical size as well as resolution. But if you find a way to target only your phone then that might be your way forward.
Personally I also use the CSS to alter how my tiddlers look when printed, often I want to share paper copies with people who are not tiddlyiwiki afficiandos and so I remove some TW elements for the shared printed copies.
The only way I have found to reliably work out what TW CSS classes I want to over-ride is to look at an example in an open tiddly session and then use the developer tools available with most browsers to click on the screen element on interest and view the HTML and CSS source code for that element. The rest is the usual tinkering around.