Custom Style class document?

[armlet]

I tried to find any documents about the style classes names/scopes with brief descriptions. But I just couldn't find any.

Are there such thing out there? I have seen some examples in some snippets like these:

.tc-sidebar-header

.tc-titlebar

.tc-tiddler-title

.tc-subtitle

.tc-tag-label

.tc-tiddler-frame

body.tc-body

Also, what's the difference between 'body.tc-body' and 'tc-body'?

[Mat]

The scope or a dedicated stylesheet tiddler, i.e one tagged "$:/tags/Stylesheet" is the whole wiki.

The other route is a style block, i.e with style definitions between <style>...</style>. This affects anything on the page for as long as the tiddler is open. This makes it a bit risky because if you have several tiddlers with such style blocks then the order of the tiddlers decide which style rules if there are conflicts.

Also, what's the difference between 'body.tc-body' and 'tc-body'?

The difference is that the former has higher specificity meaning that if the former says e.g the background should be red and the other says green, the former "wins" regardless of which order they are called in. If you have two identical calls and but with different background colors then the last called wins. To learn more about this, google CSS specificity. It is not a TW feature.

<:-)

[TonyM]

armlet

A Quick answer before I go late to bed, Use the browsers developer tools > inspect and you can point at any element and see what CSS class is being used.

Regards

Tony

[armlet]

Thanks Mat for clearing my 2nd question.

By class/scope I mean the scope of the class applies. for instances, I guess that .tc-titlebar means the title of tiddlers including the buttons, .tc-tag-label means the tag label of the tiddlers. What I want to know is if there's a comprehensive list of such classes for customizing styles of the tiddlers. I understand that these classes are self-explanatory by their names, but still wondering what are all the possibilities.

I am using the way found in this to customize styles for certain tidders:
https://tiddlywiki.com/#Custom%20styles%20by%20data-tiddler-title

e.g.:

Style Tiddler:

title: anyName
tags: $:/tags/Stylesheet

<$list filter="[myStyle[style1]]">
[data-tiddler-title^="<$view field=title/>"]
.tc-tiddler-body {
    color:MediumSeaGreen;
}
</$list>

Applied Tiddlers:

title: anyName

class: myStyle

value: style1

Content of the tiddler

[Mat]

Other than the actual stylesheets (vanilla and snowwhite - do a search in the advanced search) and perhaps the palette (in the Ctrlpanel) there is no such comprehensive list. It would be a bit problematic to assemble such a list because a style definition migth be applied for different things.

As Tony noted, you should use the browser inspector tool to see what class an element is using.

<$list filter="[myStyle[style1]]">

The above does not work, or at least it is not correct, because it filters on fields named "myStyle" but field names must not contain uppercase letters. The filter might still give something as output, but it is not what you intend, which runs the listwidget contents.

value: style1

Here you're saying there is a field named "value" with the value "style1". Is this really what you're intending?

<:-)

[armlet]

Sorry, I meant to customize style by adding a field mystyle with value style1. And I just realized even though I tried to use myStyle as field name, but it was actually changed to mystyle 
and the camel case in the style tittler still works:

<$list filter="[myStyle[style1]]"> [data-tiddler-title^="<$view field=title/>"]
.tc-tiddler-body {
    color:MediumSeaGreen;
}
</$list>

So without a proper document, I have to just try to guess what class I should use. Actually this class name .tc-tag-label is found by my numerous guess and experiment with a doubt that it may not exist. I think I have tried something like .tc-tag, .tc-tagbar, .tc-tag-title, etc. Hopefully I could make better guesses over time on this, but I doubt it as I am both bad on guessing people's mind or common English wording.

But I may have to and I can live with that. :)

[Mat]

So without a proper document, I have to just try to guess what class I should use. 

As both I and Tony already said; use the browser inspector tool by right clicking on the element you're wondering about and you'll see its classes. You can also test styles there. Do a google search for how to use the browser inspector and I think you'll find it useful.

<:-)

[armlet]

I see the classes the page elements are using now. I can even access Chrome Developer Tools directly from TiddlyDesktop. I don't have to guess anymore. Thank you and Tony.