Main CSS classes

[Luis Gonzalez]

I am studying the css classes Tiddlywiki use to format its elements. I made a little mindmap but I think I forgot many important classes.

Can you help me to complete them?

Thanks!

[A Gloom]

After I get back up, I'll have to find the list I made of all the class names from Vanila theme

[PMario]

On Friday, November 15, 2019 at 12:12:53 PM UTC+1, Luis Gonzalez wrote:

I am studying the css classes Tiddlywiki use to format its elements. I made a little mindmap but I think I forgot many important classes.

Interesting. There are many classes, which are applied to TW elements, but can't really used for styling eg: tc-reveal

open https://tiddlywiki.com/#%24%3A%2Fthemes%2Ftiddlywiki%2Fvanilla%2Fbase in edit mode and you'll find a lot of them, which are used for styling at the moment.

-mario

[PMario]

hi, fixed link:

[@TiddlyTweeter]

Ciao Luis

• Looking at the diagram there is a problem. Some of the vital styling created by the Vanilla Theme (i.e. "hard-coded" basic CSS in TW) are often cascades ... i.e. ".class1 .class2 .class3 etc.", not a single class. So I'm not sure that single classes will capture the actual final styling so well.

• I think its great what you trying to do. IF I were doing it I would concentrate on the styling of the main "divs" -- the fundamental layout of the "page". The styling of elements within divs is pretty straightforward and less of a complex issue, IMO.

• You might find helpful looking at Thomas Elmiger's "Bricks Plugin" that systematically deconstructs Vanilla. Its good in that its a modular approach that assists understand the CSS in Vanilla, as well as replace it. 

Best wishes

TT

[Ton Gerner]

Hi,

On Friday, November 15, 2019 at 4:04:56 PM UTC+1, PMario wrote:

hi, fixed link:

open https://tiddlywiki.com/#%24%3A%2Fthemes%2Ftiddlywiki%2Fvanilla%2Fbase in edit mode and you'll find a lot of them, which are used for styling at the moment.

Every TW contains the Vanilla base stylesheet in readable form. See: Control panel > Info > Advanced > Stylesheets, expand $:/themes/tiddlywiki/vanilla/base

Cheers,

Ton

[A Gloom]

Ton,

Marvelous reveal! class names can be copied and pasted from that...

[Chuck R.]

I'll just toss in the styling I use on my TW. Just put it in the stylesheet for TW5 and start playing with the colors or other settings to see what each element does.

/* Comment */

img {max-width:100px; }

h1,h2 {top-border:1px solid gray; } /* Put border above H1 and H2 elements for better visual separation /*

.tc-titlebar {border-top:2px solid black;}

.tc-tiddler-controls {border-top:2px solid red;}

.tc-titlebar h2 { font-size: 14pt; display: inline; font-weight: bold; }

.tc-tiddler-body h1 {margin-bottom: 3pt; border-top: 1px solid lightgray;}

.tc-tiddler-body h2 {margin-bottom: 3pt;}

.tc-tiddler-body ul, ol {margin-top: 3pt;}

.tc-tiddler-frame { padding-top: 2px; padding-bottom: 2px; padding-right: 1em padding-left: 3pt; }

.tc-story-river {padding-right: 1pt; padding-left:3pt; }

.tc-sidebar-scrollable {padding-left: 1pt; }

/* Below is for date in "Recent" list on sidebar */

.tc-menu-list-item { color: #404040; }

[A Gloom]

Nice!  I can possibly use that for an visual guide to the TW structure-- after I do a guide for tiddler manager and after I finish Rags Grimoire TW (making great progress, I may have possibly done things with the sidebar that no one else has done before)