It IS a bit confusing at first glance! I'll take a stab at explaining some
bits, too.
The TiddlyWiki core does indeed contain some CSS. You don't have to go
digging in the source HTML to find it, though, because it's parsed and
viewable through the TW interface as four "shadow tiddlers" —
StyleSheetLayout (positioning), StyleSheetColors (colors), StyleSheetPrint
(printer-friendly styles), and StyleSheetLocale (for language-specific
customizations). You'll find these in an empty TiddlyWiki by going to the
Timeline in the lower right and clicking the "More" tab, then the
"Shadowed" tab.
There's also a fifth shadow tiddler, named simply "StyleSheet," which is
empty by default. It's there for users to add their own custom classes and
styles.
A couple of things about shadow tiddlers: When you open and edit one, it
gets elevated from "shadow tiddler" to a full-fledged, honest-to-gosh
user-created tiddler. (In that sense, the shadows are like templates.)
Full-fledged tiddlers show up in searches, whereas shadow tiddlers don't.
And when a full-fledged tiddler is present, the shadow doesn't even get
rendered as part of the working TiddlyWiki in your browser. The shadow,
however, remains in its original state as a "fallback." If you delete a
full-fledged tiddler you've created and there's a shadow tiddler with the
same name, the TW will now use the shadow.
This is why you should make changes in StyleSheet but leave the other four
shadow tiddlers untouched. (They contain the basic styles for TiddlyWiki;
in the cascade, they come first. What you add in your user-created
StyleSheet tiddler is applied afterward. So if there's a style in
StyleSheetColors that you've redefined in StyleSheet, your definition will
override the one in StyleSheetColors through the magic of cascading.)
About StyleSheetColors: If you pop it open, you'll notice that it doesn't
define colors as RGB or hex values. Instead, it uses a peculiar syntax
like this:
color:[[ColorPalette::PrimaryLight]];
That [[ColorPalette::PrimaryLight]] bit is a reference to a "slice" in the
tiddler "ColorPalette." Slices are name-pair values that can be written in
any tiddler as a pipe-created table. E.g.
|PrimaryLight|#FFFF00;|
When you reference [[ColorPalette::PrimaryLight]], TiddlyWiki pulls in the
value ("#FFFF00;") of the slice "PrimaryLight" from the tiddler
"ColorPalette."
This is all a nifty way of letting TW users modify their color scheme
without having to tweak the CSS directly. You don't have to change the
colors of individual elements, either. If you have a color scheme you
like, you can edit the ColorPalette tiddler and have all the "PrimaryLight"
bits reassigned to your new "PrimaryLight" color.
—
With regard to the plugins and styles: A lot of plugins create CSS "on the
fly" and append it to the StyleSheet tiddler. You don't see it there and
can't edit it because the plugin is basically telling the browser "treat
StyleSheet as if it contains all the things it really does PLUS these
plugin-specific styles." That bit is all Javascript magic; it doesn't get
turned into HTML that's saved in tiddlers.
Not that ALL plugins do that, mind you. As you've noticed, some come with
full-fledged tiddlers that have plugin-specific styles.
—
So how do those get referenced (the "extra" CSS that live in their own
tiddlers)?
It turns out you can easily "transclude" styles into the SheetSheet by
using the same syntax that creates prettylinks. If, for example, you go to
the bottom of StyleSheet and add this:
/*{{{*/
[[StyleSheetAdjustments]]
[[StyleSheetShortcuts]]
/*}}}*/
... then your TiddlyWiki will load:
1. all the CSS from the shadow tiddlers
2. all the CSS from StyleSheet
1. including the CSS from StyleSheetAdjustments
2. ... and the CSS from StyleSheetShorts
3. any CSS from plugins
(Even the plugins that have their own full-fledged StyleSheetPluginName
tiddlers include some code telling TW to append the contents of that
tiddler to StyleSheet.)
—
That's — a lot of talking! I hope it makes sense and is somewhat helpful.
Once you wrap your brain around TiddlyWiki's CSS peculiarities — it's
really quite elegant! — be sure to check out this walkthrough Eric did at
last week's TiddlyWiki Classic Clinic on templates, stylesheets, and themes:
https://www.youtube.com/watch?v=WEt3ynOvf-Y
;)
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/groups/opt_out.
