Change the size of system tiddlers title

#1

I would like to edit (my own copy of) $:/core/ui/ViewTemplate/title/system

\whitespace trim
<h2 class="tc-title" title={{$:/language/SystemTiddler/Tooltip}}>
<span class="tc-system-title-prefix">$:/</span><$text text={{{ [<currentTiddler>removeprefix[$:/]] }}}/>
</h2>

to change the size of (my own) system tiddlers title.

I know from another discussion that the part of the stylesheet involved is

.tc-titlebar h2 {
	font-size: 1em;
	display: inline;
}

but I don’t know how my own class could take precedence
and I don’t find where class="tc-title" comes from neither.

This is my first dive into TW stylesheets and I am a bit overwhelmed… :exploding_head:

#2

Right click > inspect to see the html code rendered on the page. Here’s what you will see on firefox (this is very similar to the other major browsers):

image
image1873×829 136 KB

You can see the rendered styles in the browser inspector (rule tab in firefox)

Then you can search in the advanced search for the class tc-title, to see where it is defined:

image

As you can see, it’s defined in the vanilla, base theme. It appears in the shadows tab because this is a plugin tiddler, and it wasn’t modified.

Open this tiddler by clicking on it, and edit it to see the content.

You will notice that this tiddler is tagged with $:/tags/Stylesheet.

This is a system tag, and it is used by tiddlywiki to list the tiddlers that are to be used to style the wiki. See https://tiddlywiki.com/#SystemTag%3A%20%24%3A%2Ftags%2FStylesheet

Thus, if you want to create your own style, simply create a tiddler and add the tag $:/tags/Stylesheet.
The order of the tiddler in the tag list is important, this will be the order in which the styles are rendered and this affect specificity / css cascade (the algorithm that determine what styles to apply ): Introducing the CSS Cascade - CSS: Cascading Style Sheets | MDN

image

And for only styling system tiddler, inspect the tiddlers :

image
image760×147 5.49 KB

You can see that the system tiddler title is contained in a div with the class tc-tiddler-system, so your css will be:

.tc-tiddler-system .tc-title{
font-size:0.5em;
}

To make sure your style apply, you can add a field “list-after”, set to nothing so your style will be listed at the bottom of the tag list. (see https://tiddlywiki.com/#Order%20of%20Tagged%20Tiddlers)

You might want to test a prototype I made to customize the fonts of a tiddlywiki:

https://fontmanager.tiddlyhost.com/

This will probably answer several questions you might have: https://tiddlywiki.com/#Custom%20Styles%20FAQ

6 Likes
#3

This post could be linked to or cloned to/from a more general Discussion how to identify and override appearance with CSS in tiddlywiki.

1 Like
#4

@telumire This is really helpful! I can see the whole picture now. Thank you very much for this detailed explanation. :heart_eyes:

1 Like
#5

Very clear in details and helpful explanation! These are valuable docs.

1 Like