Need help with use of stylesheet

#1

Hello everyone,

for a current project I want to change the color of all headings, as well as the bullets in lists, to a specific color. It seems the color schemes do not have an entry for that, so I think I need to use a stylesheet. But I am frankly a bit in over my head - can someone please explain to me what kind of stylesheet I need (I was not able to find the variables to address for this), and how to apply it to the whole wiki? I assume I need to edit some shadow tiddler for this, right?

Thanks!

[tw5] How do I change the color of headings in TW5
#2

Tiddlywiki has several built-in CSS styles, you can check if an element has a predefined style by right-clicking the element then select “inspect”. This will also inform you on the html behind tiddlywiki’s UI.

image
image1693Ă—677 76.4 KB

Here we can see that the header element h2 has these styles :

image

And it doesnt have a class.

So what you can do is create a tiddler tagged with $:/tags/Stylesheet, and inside write a css rule, like this :

h1, h2, h3, h4, h5, h6 {
color: blue;
}

If you want a header with a class, you can type

!!.big-header This is a big header

Then you can style the header with its class in a stylesheet:

.big-header {
font-size:10em;
}

Doing the same thing with a list, we see that it is actually a standard html list :
<ul><li>..</li></ul>

You can apply a class to a list item like this :

*.myclass Item one

You can also wrap the list in a style block :

@@.my-list
* Item one
* Item two
* Item three
@@

Then you can style the ul like this :

ul.my-list{
..
}

To change the bullets, you can use this :

ul li{
list-style-type: "\1F44D";
}

See list-style-type - CSS: Cascading Style Sheets | MDN
There are other ways to achieve this, with pseudo elements : List Style Recipes | CSS-Tricks - CSS-Tricks

You can edit a color palette and add your own color, e.g

header-foreground: red

Then to use it,

h1, h2, h3, h4, h5, h6 {
color: <<color header-foreground>>;
}

Do not set the type of the tiddler to text/css, otherwise the color macro wont work !

3 Likes
#3

Awesome, thank you so much! Very easy to understand your explanation, I am sure I can make it work now. Off to edit my wiki!

#4

Nothing to add to what has been offered by telumire other than suggest you give the tiddler a title something like “custom CSS” so you can find it again easily when you have 100s or 1000s of tiddlers - can’t tell you how many times I have been glad I gave mine a meaningful title.

2 Likes
#5

I’d like to piggy back off of this advice-wise, and suggest looking at other stylesheets in Tiddlywiki and emulating there format, both as a way of keeping a uniform workflow, and to passively learn where things are.

Personally, I keep my stylesheets in “$:/JMH/ui/Stylesheet/…” and split up my css on what section of the ui it’s changing or adding to.

Now, I’m still learning as well so if any more experienced users would like to make a correction or their own addendum to this, then I welcome it!

2 Likes
#6

Very comprehensive answer @telumire, bravo. Fortunately @Automeris looks like he can handle all this info too.

It does remind me how I have long sought a way to document the classes and styles in tiddlywiki or provide some shortcuts

  • Such as an inactive stylesheet (not tagged $:/tags/Stylesheet) with a list of classes and elements you can add css to if desired.

Eg “Out of the box” and untagged

h1, h2, h3, h4, h5, h6 {
}
h1 {
}
h2 {
}
h3 {
}
h3 {
}
.tc-tiddler-controls button svg {
}

This only list the elements or classes for which additional CSS will work, and could include comments;

Then in the OT you could say open the $:/custom/ui/stylesheet tiddler, tag it with $:/tags/Stylesheet and add the css to the element you want; eg:

h1, h2, h3, h4, h5, h6 {
}
h1 {
   color: red;
}
h2 {
  color: green;
}
h3 {
color: blue;
}
h3 {
}
.tc-tiddler-controls button svg {
   fill: green;
}

Of course the above should contain references to all the core elements including individual buttons, something we in the know can find and document.

#7

Just to add the result to the discussion - thanks to your advice I got the headers working within moments. The list bullets are not done yet, mostly since I need to find some time to do some additional reading. But since thanks to you I now know where to look I am sure I’ll get it done.

Also thanks to the other replies - all advice is welcome!

2 Likes