Unterschiedliche Farben für einzelne Menüpunkte?

[Fahdabo]

Hallo Zusammen,

bin Neuling und ich habe folgendes Problem: Ich möchte jedem Menüpunkt der Navigation (verwendet wird CSSMenü Horizontal) eine andere Farbe zuweisen.

Code: Select all

/* The wrapper clears the floating elements of the menu */
#wrapper{}

ul#primary_nav a:hover{background: #003399;color: #FFC}

/* Styling the basic apperance of the menu elements */
/*ul#nav a{float:left;width: 95px;padding: 5px 0;background: #CCCC00;text-decoration:none;color: #003399}*/
ul#primary_nav a { 
	display: block; 
	margin: 0px; 
	padding: 4px 10px;
        color: #003399;
        background: #CCCC00;
	text-decoration: none;
	}


ul#primary-nav,ul#primary-nav li{list-style-type:none;margin:0;padding:0}
ul#primary-nav{margin:0 auto;font-size: 90%}
ul#primary-nav li{;margin-right: 3px;text-align: center}
 * html body ul#primary-nav li{;margin-right: 2px;text-align: center}
ul#primary-nav a{width: 125px;padding: 5px 0;background: #CCCC00;text-decoration:none;color: #003399}
ul#primary-nav a:hover{background: #003399;color: #FFC}

Ich habe hier schon nach Lösungen gestöbert, konnte aber nichts finden. Ist das überhaupt möglich?

Und gleich noch eine Frage: Der angeklickte Menüpunkt sollte solange markiert sein, wie die Seite besucht wird.
Habe es hiermit versucht:

Code: Select all

ul#primary-nav a:active{background: #003399;color: #FFC}

Das alleine reicht aber wohl nicht?!

Muss ich hier noch was ändern?:

Code: Select all

{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
	{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
	{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
	</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
	<li class="menuactive menuparent"><a class="menuactive menuparent" {elseif $node->current == true}
	<li class="menuactive"><a class="menuactive" {elseif $node->haschildren == true}
	<li class="menuparent"><a class="menuparent" {else}
	<li><a {/if}
href="{$node->url}">{$node->menutext}</a>{/foreach}
	{repeat string="</li></ul>" times=$node->depth-1}</li>
	</ul>
</div>
{/if}

Herzlichen Dank für Hilfestellungen.

Schöne Grüße
Fahdabo

[NaN]

Im englischsprachigen Forum wurde da schon mal von Calguy etwas vorgeschlagen:

http://forum.cmsmadesimple.org/index.ph ... l#msg93720

Aktuell scheint es dazu noch keine Patentlösung zu geben.

[cyberman]

Du könntest den Seitenalias als Klassendefinition verwenden - müsste praktisch mit folgendem Eintrag funktionieren

Code: Select all

	<li class="{$page_alias}"><a {/if}
href="{$node->url}">{$node->menutext}</a>{/foreach}

Mal angenommen, eine Seite von dir hat einen Seitenalias "start". Dann kannst du den Menüeintrag dieser Seite über

Code: Select all

ul#primary-nav li.start {}

via CSS formatieren.

[Fahdabo]

Hallo,

ich war einige Tage krank, daher hier ein verspätetes Dankeschön für die Tipps!

Ich werde mich dann da mal durchprobieren.

Lieben Gruß
Esther

[cms_beginner]

Hallo,

ich habe ein ähnliches Problem (und zerbreche mir schon seit 8 Stunden den Kopf darüber...). Ich möchte ebenfalls verschiedene Farben für einzelne Menu-Einträge verwenden, allerdings möchte ich nicht $node->alias verwenden, denn ich weiss nicht, wie die Seiten in Zukunft heissen werden. Ich möchte lieber die Farbe anhand der Menu-Position vergeben, also in etwa so:

1. IrgendeinText -> Farbe1
2. IrgendeinText -> Farbe2
3. IrgendeinText -> Farbe3
4. IrgendeinText -> Farbe4

1. IrgendeinText -> Farbe1
1.1 IrgendeinText -> Farbe1
1.2 IrgendeinText -> Farbe1
1.3 IrgendeinText -> Farbe1
1.3.1 IrgendeinText -> Farbe1
2. IrgendeinText -> Farbe2
2.1 IrgendeinText -> Farbe2
2.2 IrgendeinText -> Farbe2
2.3 IrgendeinText -> Farbe2
3. IrgendeinText -> Farbe3
4. IrgendeinText -> Farbe4


Die Farbe soll also nicht Anhand des Menu-Textes oder Alias vergeben werden sondern nur Anhand der Position im Menu, d.h. alle Menu-Einträge mit der Nummer 1.x.x kriegen Farbe 1, alle mit 2.x.x Farbe 2, etc....

So was ähnliches wird hier schon diskutiert: http://forum.cmsmadesimple.org/index.ph ... |Hierarchy

Aber ich verstehe nicht, wo welcher Code eingefügt werden muss. Ich benutze den Code von minimal_menu.tpl für ein eigenes Menu-Template.

Danke für jede Hilfe

[NaN]

Ändere mal das Menü-Template folgendermaßen (alles was rot ist=hizufügen):

{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *}
{if $count > 0}

{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="" times=$node->depth-$node->prevdepth}
{elseif $node->depth prevdepth}
{repeat string="" times=$node->prevdepth-$node->depth}

{elseif $node->index > 0}
{/if}

{if $node->current == true}
url}" class="currentpage main_{$node->hierarchy|truncate:1:""}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext}

{elseif $node->parent == true && $node->depth == 1}
url}" class="activeparent main_{$node->hierarchy|truncate:1:""}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext}

{elseif $node->type == 'sectionheader'}
hierarchy|truncate:1:""}[/color]">{$node->menutext}

{elseif $node->type == 'separator'}


{else}
url}" class="main_{$node->hierarchy|truncate:1:""}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext}


{/if}

{/foreach}

{repeat string="" times=$node->depth-1}

{/if}


Somit hat jeder Menüpunkt die zusätzliche CSS-Klasse "main_[Menüposition]".
Die kannst Du dann via Stylesheet so formatieren wie du sie brauchst.
Das blöde bei diesem Beispiel ist nur, dass, sobald jemand eine neue Seite in der 1.Ebene hinzufügt, für diese Klasse noch keine CSS-Definitionen im Stylesheet sind. Die müssen dann nachträglich erstellt werden.

[cms_beginner]

Funktioniert! Super!

Riesendank!

(Heute habe ich mich durch das Menu Stylesheet gekämpft.... uff! Verstehe zwar die Struktur immer noch nicht so richtig, aber durch trial and error habe ich dann schlussendlich doch herausgefunden, welcher Eintrag was verändert und konnte sogar die CSS-Klasse "main_[Menüposition]" unterbringen)