On Sunday, May 17, 2015 at 7:27:20 AM UTC-7, Andy Arnold wrote:
>
> I've spent 40+ years writing code and converting files & databases. This
> problem should be easy, but it has me stumped.
>
> I have a TWC tiddler (StyleSheetCustom) that defines some new css style
> names. The new css defines fore/background color combinations as single
> words. It also combines several font family terms into a single term
> (loco26). Here's a few lines...
> .backYellow{color: #000; background:yellow;}
> .backGainsboro{color: #000; background: #DCDCDC;}
> .backYellow30{color: #8B3A3A; background: yellow; font-size:30px;}
>
> and I have another tiddler (Motive Power Paint) that uses the new css...
> * {{backYellow30{ {{loco26{ C}}}{{loco18{APON
> }}}{{loco26{V}}}{{loco18{ALLEY}}}{{loco26{ R}}}{{loco18{AILROAD }}} }}}
>
> The idea is to show 'CAPON VALLEY RAILROAD' in a common type face and a
> common fore/background color pair with the C V R in a larger font-size than
> the rest of the phrase.
> I only want to do this for a few tiddlers; so I'm not looking for a
> theme-level solution.
> Can someone please send me to some links, etc. that have example
> solutions?
>
Your stylesheet definitions are OK as-is. Just paste them into a new
tiddler in your TW5 document, and add the tag "$:/tags/Stylesheet" so that
the core will recognize it as CSS definitions.
However, the syntax for *using* the CSS classnames in inline content has
changed from TWC to TW5.
The TWC classwrapper syntax is:
{{classname{...content...}}}
The TW5 classwrapper syntax is:
@@.classname content@@
(note: the dot (.) before the classname and the space separating the
classname from the content are important!)
For your particular use-case, it's just a tiny bit trickier because you are
*nesting* the classes, and in "inline" mode, the @@ syntax doesn't nest.
However, you can easily work around this by using HTML for the outer
wrapper, like this:
<span class="backYellow30">
@@.loco26 C@@@@.loco18 APON@@
@@.loco26 V@@@@.loco18 ALLEY@@
@@.loco26 R@@@@.loco18 AILROAD @@
</span>
Note also that, for this particular use case, you can use the
"::first-letter" pseudo-element in your CSS definitions to achieve the same
results (first letter of each word in a larger font)
.loco2618
{ font-size:18pt; }
.loco2618::first-letter
{ display:inline-block;font-size:26pt; }
Then, you can use it like this:
<span class="backYellow30">
@@.loco2618 CAPON@@
@@.loco2618 VALLEY@@
@@.loco2618 RAILROAD @@
</span>
enjoy,
-e
Eric Shulman
ELS Design Studios
TiddlyTools - "Small Tools for Big Ideas!"
InsideTiddlyWiki: The Missing Manuals
YOUR DONATIONS ARE VERY IMPORTANT!
HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...
http://TiddlyTools.github.com/fundraising.html#MakeADonation
Professional TiddlyWiki Consulting Services...
Analysis, Design, and Custom Solutions:
http://www.TiddlyTools.com/#Contact
--
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.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/b04196aa-aa36-49cd-9e15-8c14b8e1a645%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
