Highlighting a Menu Item in The Main Menu

[Digital Doctor]

I'm using a multiple panel menu in my TW.
I plan on having 10 menu items in each panel.

I would LOVE to be able to highlight a particular
item, or a few items on a panel. How do I go
about doing this?

I'd like for the item to have a diferent color background,
and perhaps different text color, than the other items.

An example of the existing panel is at:
http://obama.digitaldr.org

Thanks.

RC

[wolfgang]

Hi Rafiki,

here you can find most basic text formating options - including
different text colors or highlighting:

http://www.tiddlywiki.com/#ExtendedFormatting

Regards,

W.

[Rafiki Cai]

W.

Thanks for the link.  I've frequented there several times in the past,
especially for straight-forward text formatting.

However, my impression is that formatting within a MainMenu is a bit
different than within a tiddler display area.

For example:

!@@bgcolor:#ff0000;color:#ffffff;padding:3px 16px;''Plan A''@@

The above code easily renders a heading, with black bkgd and
white font.

Yet when I tried it within the context of a menu tab [[The Race Speech]],
it didn't quite take. 

@@bgcolor:#ff0000;color:#ffffff [[The Race Speach]]@@

-----------

I need that 'something more' to finesse it; which is why I pinged the group.

RC

--
"The ONENESS of The Allness is the key that we seek. When will we all catch on?"

[FND]

> @@bgcolor:#ff0000;color:#ffffff [[The Race Speach]]@@

Looks like a missing semicolon before the actual content.
But since your TWs have this odd appearance, they're very bothersome to
debug.

-- F.

[Eric Shulman]

> here you can find most basic text formating options - including
> different text colors or highlighting:
>
> http://www.tiddlywiki.com/#ExtendedFormatting

In this particular case, the text that Rafiki wants to color are
actually TiddlyLinks, so the usual
@@color:#f00;background-color:#00f;text goes here@@
syntax doesn't work. This is because the CSS styles for links takes
precedence over the style for regular text.

To create a specially-colored link, you have to define a CSS class (in
[[StyleSheet]), like this:
.redOnBlue a { color:#f00; background-color:#00f; }

Then, you can use the 'custom class wrapper' syntax to apply the style
to the desired link:
{{redOnBlue{TiddlerName}}}

Note: depending upon other custom CSS styles that might be defined for
"a" elements, you may need to add the "!important" modifier so the
color assignments override any other CSS rules that are being applied,
like this:
.redOnBlue a { color:#f00 !important; background-color:#00f !
important; }

HTH,
-e

[Rafiki Cai]

Thank You, Prof. Shulman.  Your student is most appreciative,
once again.

The Classroom eagerly awaits the appearance of the Comment Project.

---------------

FND, in what way, pray tell, do you find my TW to have an 'odd'
appearance.  I thought to be pretty straight-forward: a menu and
a fairly brief amount of copy in the tiddler display.  Not a lot of
fancy effects.  I'm puzzled by your comment.

RC

[FND]

> FND, in what way, pray tell, do you find my TW to have an 'odd'
> appearance. I thought to be pretty straight-forward: a menu and
> a fairly brief amount of copy in the tiddler display. Not a lot of
> fancy effects. I'm puzzled by your comment.

Sorry, that was indeed a bit cryptic.
I understand you want to hide all editing features, make it look like it
was a regular website. But that makes it hard to edit, obviously, which
includes debugging.
I believe I'd pointed you to a number of possible solutions in the past
( PresentationPlugin, PublisherPlugin, SwitchThemePlugin etc.).

-- F.

[Rafiki Cai]

This is the styling that I'm choosing:
.whiteOnBlue a { color:#FFFFFF; background-color:#000088; }

This is my attempted application of it:
{{whiteOnBlue{The Race Speech}}}

------------

I do not get the desired affect, only plain text in the menu tab.
Where am I going astray?

RC

[Rafiki Cai]

I will, again, ponder your suggestions.

But the vast majority of my editing, with
such a simple layout, is done within the
StyleSheet or ViewTemplate.

I don't see how accessing those two are
such a major task.

But like I said, I will revisit the suggest
resources you shared.

RC

[Eric Shulman]

> FND, in what way, pray tell, do you find my TW to have an 'odd'
> appearance. I thought to be pretty straight-forward: a menu and
> a fairly brief amount of copy in the tiddler display. Not a lot of
> fancy effects. I'm puzzled by your comment.

Here's a few things that make it unusual and a bit more difficult to
debug:

* The MainMenu has tabbed content
* The tiddler toolbar is gone
* The sidebar is gone

All of which makes it very difficult to determine what plugins, custom
templates, stylesheets, etc. are installed...

Normally, even when these elements are hidden, it is possible to view
the list of tiddlers by adding "#SideBarTabs" to the URL. But, in
your document

* The entire TW document is wrapped in a fixed-width iframe, which
prevents the #TiddlerName 'paramifier' usage from working!

In an attempt to bypass this, I tried viewing the page source to find
the name of the "real" TW document, and then constructed a URL using
*that* filename, e.g.,
http://obama.digitaldr.org/index2.htm#SideBarTabs

But... even that doesn't work, because you've apparently also deleted
some of the *shadow tiddlers* from the TW core code (by using a text
editor?)

I'd say that, given all of these non-standard elements, "bothersome"
is actually a bit mild of an assessment... :-)

-e

[Eric Shulman]

> .whiteOnBlue a { color:#FFFFFF; background-color:#000088; }

> {{whiteOnBlue{The Race Speech}}}

> I do not get the desired affect, only plain text in the menu tab.
> Where am I going astray?

Tiddler names containing spaces are not WikiWords, and need be
surrouned by [[...]] to make them into links.

-e

[Rafiki Cai]

From that I would reason:
{{whiteOnBlue[[The Race Speach]]}}

But no amount of brackets at the end
of the syntax seems to work right.

RC

[Eric Shulman]

> From that I would reason:
> {{whiteOnBlue[[The Race Speach]]}}

There two different kinds of brackets being used here:

First: a 'custom class wrapper' surrounding the content:
{{classname{...}}}

note: the correct pattern is
open-open-classname-open-content-close-close-close,
while you wrote:
open-open-classname-content-close-close

Then, for your purposes (linking to a tiddler whose title contains
spaces, the content uses the 'TiddlyLink' syntax:
[[...]]

Putting it together:
{{classname{[[title with spaces]]}}}

-e

[Rafiki Cai]

Thanks Eric.  Got it.

RC