Easy Way To a Palette of Colors (for text highlighting)

[Digital Doctor]

Greetings to ALL:

The command @@text@@ will render text highlighted in Yellow.

I'd like to have a wider palette of colors to choose from,
particularly
light shades of red, green, blue.

Is there a plugin, that can make this easy; or are there some macros
or style sheet code that will accomplish this (i.e., ## equals blue,
&& equals green).

RC

[Eric Shulman]

> The command @@text@@ will render text highlighted in Yellow.
>
> I'd like to have a wider palette of colors to choose from,
> particularly
> light shades of red, green, blue.

@@color:#RGB;text@@

will set the text color to the specified RGB value. For example:

@@color:#F00;this is red@@
@@color:#c0ffee;this is fluorescent green@@
@@color:#bbeeff;this is turquoise@@
@@color:#babb1e;this is burnt umber@@

> Is there a plugin, that can make this easy; or are there some macros
> or style sheet code that will accomplish this (i.e., ## equals blue,
> && equals green).

http://www.TiddlyTools.com/#StyleSheetShortcuts
includes several simple color "wrapper classes":
{{gray{...}}}
{{red{...}}}
{{green{...}}}
{{blue{...}}}

You can, of course, create any number of additional color class
definitions to suit your purposes.

This may be helpful in choosing the best RGB values:
http://www.TiddlyTools.com/#ColorChart

Note: the @@ syntax described above actually allows you to specify ANY
number of CSS attributes inline, separated by semi-colons:

@@attribute:value;attribute:value;...;attribute:value;content to
show@@

Note also that, unlike the {{classname{...}}} wrapper, the @@...@@
syntax CANNOT be nested.

enjoy
-e

[Nicolas Syssoieff]

Just a question here : what is the cleanest way to use these StyleSheetShortcuts ? (As in : where should I define these or add the code to make all of this as clean as possible and be able to use them widely in the whole TW ?

Thanks !
-Nicolas

[FND]

> what is the cleanest way to use these StyleSheetShortcuts

This kind of custom CSS code usually goes into the StyleSheet (shadow)
tiddler:
http://www.tiddlywiki.org/wiki/Customization

HTH.

-- F.

[Eric Shulman]

> Just a question here : what is the cleanest way to use these
> StyleSheetShortcuts ? (As in : where should I define these or add the code
> to make all of this as clean as possible and be able to use them widely in
> the whole TW ?

First, import
http://www.TiddlyToosl.com/#StyleSheetShortcuts
into your document

Then, add the following in your StyleSheet:
[[StyleSheetShortcuts]]

When the [[...]] syntax is used in a stylesheet tiddler, instead of
creating a TiddlyLink as it does in 'normal' tiddler content, the
referenced tiddler's *source* is automatically *included* into the
style definitions from the current tiddler, and the combined CSS
source is then submitted to the browser for processing.

This allows you to quickly add custom definitions to your
[[StyleSheet]] without having to copy/paste to replicate the actual
CSS definitions. To see how this works, check out
http://www.TiddlyTools.com/#StyleSheet
which simply includes [[StyleSheetAdjustments]] and [[Edge of Night]]
(the default style).

enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios

enjoy,
-e

[Nicolas Syssoieff]

Thanks Eric,

It's even easier than I thought, and simultaneously I just understood something that had been obscure until now : how [[MptwStyleSheet]] alone, defined in the StyleSheet tiddler, could be rendered as actual CSS and not generate a simple PrettyLink.

This is great !
Thanks a lot.
-Nicolas

[Eric Shulman]

> It's even easier than I thought, and simultaneously I just understood
> something that had been obscure until now : how [[MptwStyleSheet]] alone,
> defined in the StyleSheet tiddler, could be rendered as actual CSS and not
> generate a simple PrettyLink.

Note:
Although *applying* the stylesheet will process [[...]] by *including*
the source of another tiddler, when you are *viewing* a stylesheet
tiddler (i.e., displayed in the story column as a regular tiddler),
the [[...]] syntax is still *rendered* as a PrettyLink, which is
really convenient for clicking-through to each part of the combined
stylesheet definition.

-e

[Nicolas Syssoieff]

Hi again Eric,

Is it not only when some tags are not there ?

For me, when StyleSheet is not tagged, the behavior you describe is true.
However, when tagged with "css", the Style Sheet shows :
[[MptwStyleSheet]]
[[StyleSheetShortcuts]]
in a nice yellow code-like rectangle (Mptw classic design for code)

-Nicolas

[Coby]

It would be cool if the text-color button in QuickEdit could come
configured with a (dropdown) list of default highlight colors.
Thanks,

Coby

On Jan 15, 9:49 am, "Nicolas Syssoieff" <nicolas.syssoi...@gmail.com>
wrote:

> Hi again Eric,
>
> Is it not only when some tags are not there ?
>
> For me, when StyleSheet is not tagged, the behavior you describe is true.
> However, when tagged with "css", the Style Sheet shows :
> [[MptwStyleSheet]]
> [[StyleSheetShortcuts]]
> in a nice yellow code-like rectangle (Mptw classic design for code)
>
> -Nicolas
>

[Eric Shulman]

> It would be cool if the text-color button in QuickEdit could come
> configured with a (dropdown) list of default highlight colors.

OK... instead of invoking a simple text prompt dialog for you to type
in an RGB value, the "color" QuickEdit button now displays a droplist
containing the 216-color "web safe" palette RGB values, and uses the
background of each droplist items to display the corresponding color!!

There's also an entry in the list to "enter a custom RGB value" so
that you can use ANY color you want, not the the "web safe" ones.

Get the update here:
http://www.TiddlyTools.com/#QuickEdit_format
(note: requires QuickEditPackage)

[tigger6333]

I have found that this
http://aiddlywiki.sourceforge.net/wikibar_demo_2.html
has worked well for me.

Is it the sort of thing you mean?

I like the colour palette that appears and shows the colours rather
than the
hex codes. It seems to be the natural way to work.

Hope it helps.
Cheers
Tigg

[tigger6333]

ooops
Sorry.
Wrong link.
http://trac.tiddlywiki.org/browser/Trunk/association/serversides/cctiddly/plugins/wikibar.js?rev=2612
Scroll to the bottom for text download.

:)
Cheers
Tigg

On Jan 16, 7:03 pm, tigger6333 <tigger6...@gmail.com> wrote:
> I have found that thishttp://aiddlywiki.sourceforge.net/wikibar_demo_2.html

[wolfgang]

Thanks tigger, for bringing to notice this brand new update of
WikiBar!

Though now, with the latest addition to QuickEditToolbar, there are
only few reasons left to install such a huge plugin as Wikibar.
CSSStripper or the option to specify rows and columns for inserted
tables would be reasons for me. But that are use cases too specific
for them ever becoming included into QuickEditToolbar - I guess...

Therefore, much thanks to Eric for this latest - even more powerful -
addition than the one similar in Wikibar, too, .

Regards,

W.

On 16 Jan., 11:16, tigger6333 <tigger6...@gmail.com> wrote:
> ooops
> Sorry.
> Wrong link.http://trac.tiddlywiki.org/browser/Trunk/association/serversides/ccti...

[wolfgang]

> Thanks tigger, for bringing to notice this brand new update of
> WikiBar!
>

Sorry, I was mistaken! By using a Bookmarklet from this side:

http://www.bookmarklets.com/tools/data/index.phtml

This version in the repository is actually the same good old Wikibar
of 2005.

W.

[Eric Shulman]

> OK... instead of invoking a simple text prompt dialog for you to type
> in an RGB value, the "color" QuickEdit button now displays a droplist
> containing the 216-color "web safe" palette RGB values, and uses the
> background of each droplist items to display the corresponding color!!

I've done some more work on the QuickEdit color button... it now
presents TWO droplists to pick colors from: one for setting text
color, the other for setting background color. It also has a "sample"
display that shows the two colors combined and an "ok" button to
accept that combination once you are satisfied.

Picking a text color sets that color in the sample AND in the text of
the background droplist. Similarly, picking a background color sets
that color in the sample AND in the background of the text color
droplist. This allows you to quickly scroll through each droplist to
browse for the *combination of colors* that works best for your
purposes.

Get the updates here:
http://www.TiddlyTools.com/#QuickEdit_format
http://www.TiddlyTools.com/#QuickEdit_color (new tiddler)

[Eric Shulman]

> I've done some more work on the QuickEdit color button... it now
> presents TWO droplists to pick colors from: one for setting text
> color, the other for setting background color. It also has a "sample"
> display that shows the two colors combined and an "ok" button to
> accept that combination once you are satisfied.

Updated again...

The sample now shows a wikified preview of the currently selected
source (if any) from the tiddler edit field... so you can get a much
better sense of what your content will look like!! If there is no
current selection in the tiddler editor, sample text
("AaBbCcDdEeFfGgHhIiJj 1234567890") is displayed.

Get the update here:
http://www.TiddlyTools.com/#QuickEdit_color

[Dave Parker]

Hello, Eric I have a question about this.

I put in the whole package (used to have just the plugin and the
toolbar I think) and I have this

<div macro='tiddler QuickEditToolbar'></div>

in my edit template, but since I added all those individual tiddlers
in my toolbar has disappeared when I edit anything. Any suggestions?
(sorry, I couldn't find any documentation)

Dave Parker

[wolfgang]

You'll further need QuickEditToolbarCommand tiddler and the command
itself in the EditTemplate next to the toolbar macro. In my case it
looks like this:

<span class='toolbar' macro='tiddler QuickEditToolbarCommand'></span>

W.

[Eric Shulman]

> <div macro='tiddler QuickEditToolbar'></div>
>
> in my edit template, but since I added all those individual tiddlers
> in my toolbar has disappeared when I edit anything. Any suggestions?

Just a guess, but you probably need to either:

A) Use the QuickEditToolbarCommand to toggle the display of the
toolbar

and/or

B) add the following to a [[CookieJar]] tiddler:
config.options.chkShowQuickEdit=true;

HTH,
-e

[Dave Parker]

This worked: config.options.chkShowQuickEdit=true;

Thanks muchly!

DP