[opgelost] problemen met kleuren menuitems

[macvork]

macvork.nl (ter verduidelijking

Hoe moet ik de div waarin {menu} staat een class meegeven. Hoe moet ik die dan noemen, ik wil namelijk dat "wie" de kleur "68A916" krijgt. Heb het nu zo geprobeerd:

<div class="page-alias" id="menu"> {menu} </div>

Ik snap alleen niet helemaal hoe ik die van in de CSS moet plaatsen zodat het systeem herkend dat het woordje "wie" die kleur moet worden.

Misschien is dit een hele domme vraag maar dit is voor het eerst dat ik werk met cms made simple....

[frankmanl]

Ik zie zo niet hoe dat zou kunnen binnen één menu, maar misschien zou je als work around twee keer het menu kunnen aanroepen, waarbij je in het eerste alleen de wie-pagina toont, in de tweede alle andere.
Dus iets als

Code: Select all

<div class="afwijkende_kleur">{menu includeprefix="wie"}</div>
{menu excludeprefix="wie"}

wie is dan de alias van je pagina Wie.
Vervolgens definieer je in je menu-stylesheet een class .afwijkende_kleur met kleur #68A916.
Iets in die richting...

Frank

[staartmees]

je vraag is mij niet erg duidelijk, maar bedoel je misschien dat de link van de actieve pagina de kleur #68A916 moet krijgen? In dat geval moet je in het stylesheet de volgende aanpassing maken

#menu a:active {
text-decoration: underline;
color: #68A916;
}

[M@rtijn]

Als ik de vraag goed begrepen heb is hier volgens mijn de beste en makkelijkste manier om in je menutemplate een class mee te geven aan het <span> element.

Code: Select all

<span class="{$node->menutext}">

Dan kan je in stylesheet simpelweg het volgende opnemen:

Code: Select all

.wie {color:#68A916;}
.wat {color:#000000;}
.waarover {color:#FE2EF7}
enz. 

[macvork]

<div id="menu"><span class="{$node->menutext}"> {menu}</span> </div>

Dit heb ik nu in mijn opmaak gezet, in de gebruikte Stylesheet heb ik vervolgens neergezet wat u voorgedaan heeft, maar dan gebeurd er niets. Ik weet zeker dat ik iets fout doe of iets niet begrijp maar ik zie niet wat.

om heel eerlijk te zijn snap ik ook de "$node->menutext" niet. Die "$node". wat doet die?

[RonnyK]

De logica is bedoeld om in de MENU-template op te nemen, bij de generatie van het menu... Niet in de PAGE-template....

Als je {menu} aanroept, dan roep je menu aan met het standaard menu-sjabloon. Die kun je importeren in de database, en vervolgens aanpassen middels classes e.d. Vervolgens kun je ipv {menu} aanroepen {menu template="je-template"} en de elementen krijgen de logica mee die je in de menu template hebt gedaan...

Wat je nu doet is een class-aanroep om het gehele menu plaatsen, waarmee je natuurlijk niet styling PER menu-element krijgt.

Ronny

[macvork]

Nu heb ik dit in mijn menu toegevoegd:

<span class="{$node->menutext}">


In mijn CSS heb ik dit gezet, maar ik ben er niet van overtuigd dat de menu werkt vanuit de door mij gemaakte CSS, daarom heb ik dit ook gezocht naar de css die het menu gebruikt maar ik weet niet zeker welke dat is.

.wie {color:#68A916;}
.wat {color:#cf0000;}
.waarover {color:#2ee600;}
.waardering {color:#ba7520;}
.contact {color:#ffd21f;}

Moet ik verder nog iets toevoegen?

Bedankt voor jullie hulp!!!

[Rolf]

Persoonlijk zou ik class='{$node->alias}' toevoegen.
Niet om verwarring te maken maar omdat de menutekst wel eens hoofdletters en spaties kan bevatten. De pagina alias is daarom een betere parameter...

Zorg er in ieder geval voor dat de extra CSS code is geplaatst in een stylesheet die ook gekoppeld is aan het gebruikte HTML sjabloon. Bij voorkeur gewoon in de navigatie stylesheet.

Als je een link hebt naar de website dan kunnen we even meekijken.

Grtz. Rolf

[macvork]

macvork.nl

[Rolf]

Een eenvoudig menu template

Code: Select all

{if $count > 0}
<ul>
{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}
<li class='{$node->alias}'><a {if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}>{$node->menutext}</a>
{elseif $node->type == 'sectionheader'}>{$node->menutext}</a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
<div class="clearb"></div>
{/if}

Hiermee krijg je:

Code: Select all

<ul>
<li class='home'><a href="http://localhost/1.10.3-full/" title="Home Page, shortcut key=1">Home</a></li>
<li class='how-cmsms-works'><a href="http://localhost/1.10.3-full/index.php?page=how-cmsms-works" >How CMSMS Works</a></li>
<li class='default_templates'><a href="http://localhost/1.10.3-full/index.php?page=default_templates" >Default Templates Explained</a></li>
<li class='default-extensions'><a href="http://localhost/1.10.3-full/index.php?page=default-extensions" >Default Extensions</a></li>
</ul>
<div class="clearb"></div>

grtz. Rolf

[M@rtijn]

Macvork, je moet de code toevoeging wel in het menu template gebruiken!

Ga in je cmsms admin naar het tabblad 'opmaak', kies voor 'menubeheer'.

Als je al een keer iets hebt veranderd aan je menu template, kan je klikken op dit template om deze te wijzigen.
Ik vermoed echter dat dit de eerste keer is dat je in dat gedeelte komt, dus:
klik op het icoontje helemaal rechts van het template dat je gebruikt (deze zal dan een groen vinkje hebben bij 'standaard').
Hiermee importeer je het template opnieuw. Er wordt gevraagd om een naam op te geven en daarna zet je het zojuist gecreëerde template op 'standaard'.
Open het template en scroll naar beneden. Zoek naar

Code: Select all

<span>{$node->menutext}</span></a>

en verander dit naar

Code: Select all

<span class="{$node->alias}">{$node->menutext}</span></a>

Klaar!

@Rolf: natuurlijk, hoofdletters, niet aangedacht. Alias is inderdaad de betere keuze hier

[macvork]

Alle menu items kleuren nu perfect als het menu item geselecteerd is, dus als de pagina wat open staat dan is de kleur juist, alle andere zijn dan echter paars in plaats van de juiste kleur. Ik wil dat die kleuren altijd zo zijn, niet alleen als je het item geselecteerd hebt. En de pagina waarop je bent moet onderstreept zijn... dit lukt echter nog niet. Ik heb in mijn css wel de active op onderstreept staan maar dat helpt nog niet echt, moet ik waarschijnlijk ook ergens in Menu aanpassen maar kan niet echt vinden waar (wat ik moet aanpassen in menu).