seperate styles in tiddlers

[jk]

hi all, i was wondering if there was a way to include tiddlers
with extra style rules in my main Stylesheet tiddler.

it would be nice to be able to divide it into several parts
(tw's defualt stylesheets are divided into colors, layout,
etc). i would like to divide my styles up too-- then if i
wanted to export a certain set of styles to another wiki,
i could just import a single tiddler containg that set. but
i need a way to include it in the regular Stylesheet tiddler.

thanks,

stephen

[Eric Shulman]

> hi all, i was wondering if there was a way to include tiddlers
> with extra style rules in my main Stylesheet tiddler.

yes. Just use the [[TiddlerName]] syntax within the body of your
[[StyleSheet]].

When you *view* the stylesheet, this will appear as a simple
TiddlyLink... but, when the stylesheet is *used* by TW, the referenced
tiddler's content is automatically inserted into the stylesheet, and
then the *combined* content is passed on to the browser for use in
rendering.

> it would be nice to be able to divide it into several parts
> (tw's defualt stylesheets are divided into colors, layout,
> etc). i would like to divide my styles up too-- then if i
> wanted to export a certain set of styles to another wiki,
> i could just import a single tiddler containg that set. but
> i need a way to include it in the regular Stylesheet tiddler.

Precisely the intended purpose... allowing "mix-and-match" styles to
be used in a variety of "themes". For example:
http://www.TiddlyTools.com/#StyleSheetShortcuts
is a collection of convenient CSS 'shortcuts' for quickly applying
various text styles, alignments, sizes, colors, etc.

This syntax can also be used to quickly switch themes, even without a
separate plugin: instead of putting custom CSS definitions directly
into [[StyleSheet]], put the CSS for each theme into a separate
tiddler and just include the desired theme in the StyleSheet.
Switching themes is as easy as changing the [[TiddlerName]] referenced
in StyleSheet to a different title. Examples on TiddlyTools:
http://www.TiddlyTools.com/#Plain
http://www.TiddlyTools.com/#Blackout
http://www.TiddlyTools.com/#Textures
http://www.TiddlyTools.com/#Woodshop
http://www.TiddlyTools.com/#[[Edge%20of%20Night]]
http://www.TiddlyTools.com/#[[Let's%20Get%20Tanked!]]

Also, if you DO want to switch themes 'on-the-fly', you can use this
plugin:
http://www.TiddlyTools.com/#SelectStylesheetPlugin
which presents a listbox/droplist control containing the various
themes (tagged with "stylesheet"). Select a theme and it is
automatically applied. Note: this does NOT change the default
[[StyleSheet]] tiddler contents. The selected stylesheet is tracked
by a cookie (txtStyleSheet), and is re-applied each time you reload
your document (unless you clear the cookies, of course!)

You can try this plugin live on TiddlyTools: simply go to
http://www.TiddlyTools.com
and then, in the default [[Welcome]] tiddler, select the "themes"
tab. In the upper right corner of that tab is a drop list of themes
to choose from...

enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios

[jk]

awesome! ^^
so much easier then expected!
i appreciate all the extra tips.

as for the css shortcuts, you could take a
set of those in a new tiddler, and then include it
in a theme, right?

i am a little confused about the StyleSheetShortcuts.
you don't mean the tiddler as a whole is not intended to be included,
but rather some of it can be used in a new tiddler which inturn can be
included in a theme, right?

thanks again eric for your generous help.

[Eric Shulman]

> as for the css shortcuts, you could take a
> set of those in a new tiddler, and then include it
> in a theme, right?

I usually just include the whole set by using:
"[[StyleSheetShortcuts]]"

Of course, you *could* split it up into separate tiddlers for
different subsets of styles, but why bother? The entire set isn't
that big, and it avoids having to keep track of which subsets are
installed...

-e

[jk]

oh, so those are just a bunch classes to be used with html,
such as in PageTemplate?

i was thinking about shortcuts to be used *when*
writing css.

after you informed about how a TiddlyLinks content is
referenced i took a look at how the ColorPalette works.
it uses "::" to reference content _within_ a tiddler.
so instead of typing a color name every time, you can
define custom colors in ColorPalette.

(the "::" reminds me of the pseudo selector in css)

so i got to thinking, why not make a tiddler for
commonly used css values.

e.g, say i use font-size 1.5em a lot.
i could make a new tiddler called "commonStyles":

FontMed: font-size:1.5em

and in my stylesheet:
h2 {
[[commonStyles::FontMed]];
}

another example:

commonStyles:
border1: border:4px dotted black

stylesheet:
p {
[[commonStyles::border1]]
}

that's pretty basic. but you could make shortcuts for more
complicated css to. the ones above are shortcuts for
property+value, but you could do it for just a value (e.g.
ColorPalette) or for a whole style rule!

[FND]

> oh, so those are just a bunch classes to be used with html,
> such as in PageTemplate?
> i was thinking about shortcuts to be used *when*
> writing css.

I believe they're meant to be used for inline formatting:
{{foo{lorem ipsum dolor sit amet}}}
(cf. http://www.tiddlywiki.org/wiki/Wiki_Markup#Custom_Styling)

> after you informed about how a TiddlyLinks content is
> referenced i took a look at how the ColorPalette works.
> it uses "::" to reference content _within_ a tiddler.

Yup; those are called slices:
http://www.tiddlywiki.org/wiki/Tiddler_Slices

HTH.

-- F.

[jk]

oh, i see. both very useful
thanks again F

[jk]

> yes. Just use the [[TiddlerName]] syntax within the body of your
> [[StyleSheet]].

there is one flaw with this, however. if you make changes
in [[TiddlerName]]'s code, it won't take affect until you
refresh tw or edit the [[StyleSheet]] tiddler. also, it doesn't
work if you link {{{preformated}}} css.

> I believe they're meant to be used for inline formatting:
> {{foo{lorem ipsum dolor sit amet}}}

btw, is there any way to use selectors with inline styles?

[FND]

> there is one flaw with this, however. if you make changes
> in [[TiddlerName]]'s code, it won't take affect until you
> refresh tw or edit the [[StyleSheet]] tiddler.

Yes, I don't think there's much we can do about that (though it's been a
while since I've looked at that code, so I might be wrong).

> it doesn't work if you link {{{preformated}}} css

That seems to work fine for me:

StyleSheet
---------------
/*{{{*/
#displayArea {
background-color: #eee;
}
[[StyleSheetCustom]]
/*}}}*/
---------------

StyleSheetCustom
---------------
/*{{{*/
.tiddler {
border: 1px solid #888;
margin-bottom: 1em;
}
/*}}}*/
---------------

Or is this not what you meant?

> btw, is there any way to use selectors with inline styles?

Inline styles as in @@property:value;text@@? Nope.
As for {{custom{classes}}}, you can use CSS selectors in your
StyleSheet, where the custom class is defined - that's probably not what
you mean though!?

-- F.

[jk]

> That seems to work fine for me:

it's working now... odd. i was pretty sure it didnt work last time.

> As for {{custom{classes}}}, you can use CSS selectors in your
> StyleSheet, where the custom class is defined - that's probably not what
> you mean though!?

yeah, i wanted to be able to target certain elements.
i wrote a bunch of style definitions for the tabs i was talking about
in my previous thread. ("tabs in cascading slider")

for instance:
a.tab {color:#fff;}

since i wanted the tabs to share the same styles whether they were in
a slider
or not, i figured i could put my styles in the SideBarTabs tiddler
itself and
that it would override the slider's styles. so since there was no way
of doing
that with two ways mentioned in the wiki, i resorted to using the
<style> tag
within html code. this is what it looked like:

<html><style>
a.tab {color:#fff;}
</style></html>

<<tabs
txtMainTab
"Nav" "navigation" TabNav
"Timeline" "timeline" TabTimeline
"All" "all tiddlers" TabAll
"Tags" "all tags" TabTags
"More" "more lists" TabMore
>>

but the styles for the sliderPanel still overrode it (the
text was blue, not white-- it matched the style of links in the
the options slider). i assume the tiddler first styles the tabs
so they're #fff, but then that tiddler is sent to the
SideBarOptions slider and the link color changes back to blue
(btw, the slider in my SidebarOptions looks like this:
<<slider chkSliderContents [[TabsContent]] 'contents »' 'contents'>>)

i also tried sticking a custom class in front as a descendant selector
(e.g. .customClass a.tab)-- and then wrapping the contents of
SideBarTabs
with that-- but the style of links in a slider still overrode the
white color..

sorry for a long and confusing post. ~_~

[Eric Shulman]

> i also tried sticking a custom class in front as a descendant selector
> (e.g. .customClass a.tab)-- and then wrapping the contents of
> SideBarTabs
> with that-- but the style of links in a slider still overrode the
> white color..

The problem is "CSS specificity". The default (shadow)
[[StyleSheetColors]] contains:

#sidebarOptions input {border:1px solid [[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel {background:
[[ColorPalette::PrimaryPale]];}
#sidebarOptions .sliderPanel a {border:none;color:
[[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel a:hover {color:
[[ColorPalette::Background]]; background:
[[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel a:active {color:
[[ColorPalette::PrimaryMid]]; background:
[[ColorPalette::Background]];}

these rules are more specific than the rules you are constructing, and
thus takes precedence.

HTH,

[jk]

i see... since the defualt style narrows in more, my styles
are ignored >_<


stephen

[JayFresh - http://jayfresh.wordpress.com]

> i see... since the defualt style narrows in more, my styles
> are ignored >_<
>

Hi jk,

Not sure if you are still in need of specificity help, but this is
quite a good introduction:
http://snook.ca/archives/html_and_css/understanding_c/

and this is the Star Wars way:
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

The general idea is that:
- an ID selector ALWAYS overrides a class selector
- a class (or pseudo-class) selector ALWAYS overrides an element
selector
- pseudo-elements (e.g. p.first-letter), combinators (e.g. >, +) and
the universal selector (*) do not affect a rule's specificity


J.