[TYPO3] Select a color according to the active level 1 menu item

Wed Feb 15 18:34:09 CET 2006

Hi,

On 2/15/06, Joerg Wagner - DigiLog multimedia <usenet at digilog.de> wrote:
> Hi all!
>
> I want to adjust colors of parts of the page according to the top menu item
> that is currently selected.
> In other words:
> The site has say 5 menu topics on level 1 and the content of all pages
> should be colored according to the level 1 menu topic that is currently
> selected (even if a subpage of it is selected). A kind of color scheme for
> basic website categories.
>
> I am chewing on TSref for hours now, but haven't even got a clue, what the
> right approach for this problem is.
> I would have to get an ordinal numbering of the top menu items and then
> determine which number the currently active top menu item has.
> Then I could select a color (I have defined them in TS Constants) according
> to this number.
>
> Any help is welcome - even if it is only hints which approach to take.
> Many thanks!
>

TYPO3 is not the bottleneck here, it's your thought process ;^)

How would you achieve this goal if you were building static pages? You
should think about how you'd achieve this using html/css--since using
a CMS or server-side language only ever outputs html/css--and THEN go
to the TSref.

In any case, there are multiple ways:

1. Extension templates in each of the top-level pages calling
different stylesheets:

page.stylesheet = path/to/stylesheet.css

2. Put a unique id into each top level page's body element and define
the colours in your css file:

TS:

### CONSTANTS field:
###
### Set up the css ids for the body element in the Constants field:
### Ref: TSref Conditions [1]
###

[PIDinRootline = 1]
pageId = lorem
[PIDinRootline = 2]
pageId = ipsum
[PIDinRootline = 3]
pageId = dolor
[PIDinRootline = 4]
pageId = sit
[PIDinRootline = 5]
pageId = amet
[global]

### SETUP field:
###
### Then, build the body element accordingly (in the Setup field!):
### Ref: TSref 'Page' object [2]
###

page.bodyTagCObject = HTML
page.bodyTagCObject {
  value = <body id="{$pageId}">
}

CSS:
/* Assumes a div with the id 'content' in every page: */

#lorem #content {
  border:2px solid #090;
}

#ipsum #content {
  border:2px solid #900;
}

Besides these two simple methods, there are probably 2346 others that
you could think up, but these should get you started...

-Christopher

[1] http://typo3.org/documentation/document-library/references/doc_core_tsref/current/view/4/1/
[2] http://typo3.org/documentation/document-library/references/doc_core_tsref/current/view/7/5/