50 lines
1.0 KiB
Plaintext
50 lines
1.0 KiB
Plaintext
title: AnotherExampleStyleSheet
|
|
modifier: blaine
|
|
created: 20110211110622
|
|
modified: 20110211131015
|
|
tags: examples
|
|
creator: psd
|
|
|
|
This tiddler shows some more complex effects that can be obtained with cunning use of CSS. Not all of these will work properly on all browsers because of differences in CSS implementation, but they should fail gracefully.
|
|
|
|
You can have special formatting for a specific, named tiddler like this:
|
|
{{{
|
|
#tiddlerHelloThere .title {
|
|
background-color: #99aaee;
|
|
}
|
|
}}}
|
|
|
|
Or for the first displayed tiddler:
|
|
{{{
|
|
div.tiddler:first-child .title {
|
|
font-size: 28pt;
|
|
}
|
|
}}}
|
|
|
|
Or just for the first line of every tiddler:
|
|
{{{
|
|
.viewer:first-line {
|
|
background-color: #999999;
|
|
}
|
|
}}}
|
|
|
|
Or just for the first letter of every tiddler:
|
|
{{{
|
|
.viewer:first-letter {
|
|
float: left;
|
|
font-size: 28pt;
|
|
font-weight: bold;
|
|
}
|
|
}}}
|
|
|
|
Or just for tiddlers tagged with a particular tag (note that this won't work for tags that contain spaces):
|
|
{{{
|
|
div[tags~="welcome"].tiddler .viewer {
|
|
background-color: #ffccaa;
|
|
}
|
|
|
|
div[tags~="features"].tiddler .viewer {
|
|
background-color: #88aaff;
|
|
}
|
|
}}}
|