Tag-based CSS?

82 views
Skip to first unread message

Yakov

unread,
Nov 13, 2010, 9:27:29 AM11/13/10
to TiddlyWiki
TW allows wide use of CSS. It's almost as simple as in common web-
pages (yet some things like style of macros need some tweaking).

But TW also has rich hypertext structure based on tags, fields,
sections and slices. My question is: what additional tools there are
to make CSS based on these things.. and tiddler title.

Some examples which may show this is of some interest:

- "title" class allows to define the style of the titles of tiddlers;
but are there any possibilities to change the style of a title of one
distinct tiddler? (1)

- style based on tags seems just a right thing because it makes an
accent while reading (2)

- let's imagine that there are some tiddlers with any kind of code. It
is natural to see it in monospace. But it is also natural to _edit_
them in monospace. The "editor" class makes it possible to chage the
font of all tiddlers' editor view, like this

.editor { font-family: monospace; }

but it would be better to get this only in those tiddlers that are
marked with the "code" tag. (3)

Actually, title-based and tag-based CSS is desired most of all; fields
are somewhat with not easy access, sections seem to be a bit eclectic
for CSS ("!" section doesn't wrap all the "!!" sections below it) and
style of slices can be made based on the table CSS. On the other hand,
the necessity of adding "{{myClass{ }}}" or "@@someCSS @@" to the
title is a bit strange since this alters the name of the section too;
the same thing with the slices.

Afterall, I must admit, some things that I've mentioned are about very
deep customization and are not that necessary (like the style of
slices) while the others are still of big interest (like tag-based
style).

So, any ideas/existing solutions/comments?

PS Yeap, fields are of some interest anyway: for instance, some style
based on the "author" field value or on the "date modified" (for
emphasizing that a tiddler is hot/very old/time doesn't matter).

PPS I also imply that solutions for style defining can be used for
navigation/aggregation later as mechanisms of rendering this things
are quite similar, as I understand.

PMario

unread,
Nov 13, 2010, 10:40:51 AM11/13/10
to TiddlyWiki
TaggedTemplateTweak may be of interest.
http://www.tiddlytools.com/#TaggedTemplateTweakInfo

have a look at StyleSheetColor and StyleSheetLayout shadow tiddlers.

-m

Alex Hough

unread,
Nov 13, 2010, 12:37:45 PM11/13/10
to tiddl...@googlegroups.com
you can set the format of a tiddller using its tag [1] . eg

div[tags~="welcome"].tiddler .viewer {
background-color: #ffccaa;
}

ALex



[1] http://tiddlywiki.com/#AnotherExampleStyleSheet


--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To post to this group, send email to tiddl...@googlegroups.com.
To unsubscribe from this group, send email to tiddlywiki+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/tiddlywiki?hl=en.


colmjude

unread,
Nov 14, 2010, 7:19:49 AM11/14/10
to TiddlyWiki
You can also use the ThemedTiddlerPlugin that looks for a theme field
set on a tiddler.
You can get it here
http://whatfettle.com/2008/07/ThemedTiddlerPlugin/

This is good to use if you want to change the structure of the tiddler
as well as the style of it.

Another option is to use my AddClassPlugin, which adds a class to a
tiddler so that you can apply CSS only to the tiddlers that have that
class. This is how the stickynotes[1] space works.
You can get it from
http://colmbritton.tiddlyspace.com/#AddClassPlugin

Then you just need to add
Class: <div class='editor' macro='edit classname'></div>
to your editTemplate and you can now add any class you want to a
tiddler

Hope that helps,
Colm

[1] - http://stickynotes.tiddlyspace.com

On Nov 13, 5:37 pm, Alex Hough <r.a.ho...@gmail.com> wrote:
> you can set the format of a tiddller using its tag [1] . eg
>
> div[tags~="welcome"].tiddler .viewer {
> background-color: #ffccaa;
>
> }
>
> ALex
>
> [1]http://tiddlywiki.com/#AnotherExampleStyleSheet
>
> > tiddlywiki+...@googlegroups.com<tiddlywiki%2Bunsu...@googlegroups.com>
> > .

Eric Shulman

unread,
Nov 14, 2010, 7:49:13 AM11/14/10
to TiddlyWiki


On Nov 14, 4:19 am, colmjude <colmj...@gmail.com> wrote:
> You can also use the ThemedTiddlerPlugin that looks for a theme field
> set on a tiddler.

TaggedTemplateTweak already does this, using a field named
'template' (you can also config the plugin to use a different field
name).

> This is good to use if you want to change the structure of the tiddler
> as well as the style of it.

Indeed... that is precisely what TaggedTemplateTweak does. It allows
you to specify alternative templates (i.e, the tiddler *structure*)
for any tiddler, by using a three-tiered fallback as a *prefix* on
ViewTemplate/EditTemplate: first the tiddler's title is tried, then
the value from a custom 'template' field (if present), and then tag
values (one at a time)

Thus, a tiddler named "TiddlerTitle" can have a unique alternative
*structure* (and styles, of course), simply by creating:

TiddlerTitleViewTemplate
TiddlerTitleEditTemplate

If no corresponding title-specific templates are defined, and the
tiddler has a 'template' field with a value of "FieldValue", then it
will use:

FieldValueViewTemplate
FieldValueEditTemplate

If there is still no matching template(s) found, then each *tag* of
the tiddler is tried, in turn, as a prefix:

TagValueViewTemplate
TagValueEditTemplate

for more details, see:
http://www.TiddlyTools.com/#TaggedTemplateTweak
http://www.TiddlyTools.com/#TaggedTemplateTweakInfo

enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios

Yakov

unread,
Nov 18, 2010, 12:03:34 PM11/18/10
to TiddlyWiki
This is amazing, thanks a lot. This also leads to a question about
fields, and I'll make a new thread for this.
https://groups.google.com/group/tiddlywiki/browse_thread/thread/29742f8a233b806e?hl=ru
Reply all
Reply to author
Forward
0 new messages