Defining CSS: some TW-aspects quesions

[Yakov]

So, defining the CSS.

1. As I can see, CSS in the shadowed tiddlers is wrapped in the

/*{{{*/ ... /*}}}*/

brackets. Is it necessary to add them to the StyleSheet tiddler? What
function do they do?

2. Can I write anything aside CSS in the StyelSheet tiddler? Why? See,
when I write some CSS which emphasise some semantics (terms, not clear
things, whatever) I write comments in CSS and after all some things
tend to need some discussion.. As I can see, only hypertext after the
CSS is permitted. Also, if I place two pieces of CSS in different /
*{{{*/ ... /*}}}*/ wrappers, the second one doesn't work. Perhaps the
analyser (is it called "parser"?) of the StyleSheet is described
somewhere?

3. Is it possible to make other stylesheets in other tiddlers and
include them with the @import dirrective? The same thing, I'd rather
describe semantic classes representation, a "standard view" [standard
for me], specific styles for the current TW-document in different
tiddlers, so..

Yours, Yakov.

[TonG]

Hi Yakov,

Although not required in StyleSheet /*{{{*/ ... /*}}}*/ , it shows
the styles as a code block (yellow background) for easier reading. See
[1]
For comments in StyleSheet see [2]

You can include other "stylesheets"in StyleSheet by transclusion, see
[3]

Enjoy,

Ton

[1] http://tiddlywiki.org/wiki/Dev:Comments
[2] http://tiddlywiki.org/wiki/Escaping
[3] http://tiddlywiki.org/wiki/StyleSheet

[Tobias Beer]

I would also think that that might be important that you put those
wrappers on newlines (!)...

/*{{{*/
.emphasis {font-weight:bold;}
/*}}}*/

...so that the TiddlyWiki rendering engine parses your tiddler text
correctly and displays your css as well structured, monospaced
wrappers in ViewMode while also creating the corresponding "style"
elements in the DOM.

Cheers, Tobias.

[Yakov]

Thanks, that's it. One more question, thought. Those comments-based
wrappings (/*{{{*/) make me think that StyleSheet is rendered as usual
CSS - but in this case I don't understand why

/*{{{*/
[some CSS]
/*}}}*/
/*{{{*/
[more CSS]
/*}}}*/

works so that "more CSS" is not applied. Any ideas?

Also this seems to mean that I can use any other wrapper like

/*{{myClass{*/
[CSS]
/*}}}*/

or

/*"""*/
[CSS]
/*"""*/

I think I'll try some such tricks.

[passingby]

Style defs can live in other tiddlers. For example one style tiddler
that I think everyone must need is http://www.tiddlytools.com/#StyleSheetShortcuts.
I just copy this tiddler into a TW and then include it in into
StyleSheet tiddler by writing "[StyleSheetShortcuts]]" in it (without
the quotes of course). But beware that defs included later override
the defs included earlier.

[PMario]

On Nov 10, 6:57 pm, Yakov <yakov.litvin.publi...@gmail.com> wrote:
> Thanks, that's it. One more question, thought. Those comments-based
> wrappings (/*{{{*/) make me think that StyleSheet is rendered as usual
> CSS - but in this case I don't understand why
>
> /*{{{*/
> [some CSS]
> /*}}}*/
> /*{{{*/
> [more CSS]
> /*}}}*/
>
> works so that "more CSS" is not applied. Any ideas?

The above example will work. But may be your real CSS wont. If you'd
provide a link to a short testcase (real CSS) it would help.

> Also this seems to mean that I can use any other wrapper like
>
> /*{{myClass{*/
> [CSS]
> /*}}}*/

I wouldn't do this. The first */ will be rendered. If you need a
different style change the <pre> or/and <code> definitions in your
StyleSheet.

> /*"""*/
> [CSS]
> /*"""*/
>
> I think I'll try some such tricks.

See above.

=======
If you do something like this
/*{{{*/
.button { display: block;}
/*}}}*/
some comment
/*{{{*/
.button { display: block;}
/*}}}*/

It will not work, because "some comment" is no comment! The browser
treats everything, which is not covered inside /* ... */ as CSS
commands, and "some comment" is not valid. Most of the time, the rest
of the tiddler is ignored, by the >>browser<<

The only thing, that tw does, is, that it renders something like this
/*{{{*/
.button { display: block;}
/*}}}*/

as a <pre> block, to get a better view. But the above has to be valid
CSS !!!

-m

[Yakov]

> The above example will work. But may be your real CSS wont. If you'd
provide a link to a short testcase (real CSS) it would help.

Yeah, I probably made some mistake. I tested it once more and it
worked.

>> /*{{myClass{*/
>> [CSS]
>> /*}}}*/

>I wouldn't do this. The first */ will be rendered.

True. Moreover, all the /**/ before and after CSS are shown. The CSS
is rendered correctly, but myClass is not applied. Anyway, one of the
biggest reasons to use CSS was to skip scrolling which is on the
bottom of the CSS, but cutting it into parts solves this. Editing
<pre> isn't good since it is widely used apart the CSS.

Basing on this, one more important question, though: are there any
mechanisms of making hypretext-based CSS, like, say, CSS based on
tags? It would be beatiful a solution - to represent all the [[food
recipes]] tiddler with some style customized namely for tiddlers with
such tag, wouldn't it? Or

pre "in StyleSheets" { background-color: white; }

...

>If you do something like this
>/*{{{*/
>.button { display: block;}
>/*}}}*/
>some comment
>/*{{{*/
>.button { display: block;}
>/*}}}*/

>It will not work, because "some comment" is no comment!

Sure, but

/*{{{*/
.button { display: block;}
/*}}}*/

/***
some comment
***/

/*{{{*/
.button { display: block;}
/*}}}*/

works perfectly. Man, even the following works!! With some undesired
nonsense though, but some tweaking may help..

/*{{{*/
CSS1
/*}}}*/
/***
tw-comments!
<<slider chkSliderCSSSectionInStyleSheet [[StyleSheet##CSS-section]]
"second part" "">>
/%
!CSS-section
1
***/
/*{{{*/
.title { color: green;}
/*}}}*/
/***
2
/%%/
3
***/

An extra "/%" hides "%/" that's shown in the opened slider. As for
nonsence, the "1", "2", "3" make a bit more clear what's going on, but
I don't understand it fully.

[PMario]

Hihi,
I like your experiments.

If you want to see some cracy use of this, have a look at [1]
TiddlerMap, TiddlerMapTabs and TiddlerMapSlider (which is part of the
right sidebar)
The CSS can be found in StyleSheet.

The whole stuff is done with transclusions, sections, slices and
invisible content.

http://apm-plugins.tiddlyspot.com/#TiddlerMapTabs%20TiddlerMap%20TiddlerMapSlider

have fun!
mario

[Yakov]

See also a report about this things:
https://groups.google.com/group/tiddlywiki/browse_thread/thread/3598c4f9c8b4becd

On 14 ноя, 00:13, PMario <pmari...@gmail.com> wrote:
> Hihi,
> I like your experiments.
>
> If you want to see some cracy use of this,  have a look at [1]
> TiddlerMap, TiddlerMapTabs and TiddlerMapSlider (which is part of the
> right sidebar)
> The CSS can be found in StyleSheet.
>
> The whole stuff is done with transclusions, sections, slices and
> invisible content.
>

> http://apm-plugins.tiddlyspot.com/#TiddlerMapTabs%20TiddlerMap%20Tidd...