[CSS] Optioneel kleurmenu

[Heaget]

Het is niet zo dat ik jullie hier probeer te vervelen hoor, maar ik wil dit zo goed mogelijk werkend krijgen en met jullie hulp ben ik al een heel eind gekomen.

Het volgende probleem hier.

Als ik op de homepage ben is de kleur van de menubar blauw. Dit word dmv een .png bestand aangegeven. Dit staat gewoon in een .CSS bestand. Tot dusver geen probleem, als de kleur veranderd moet worden pas je gewoon de .png aan en upload je die. Nu wil ik dat als ik naar een submenu ga de kleur van de menubar mee veranderd. Oftewel, er moet een 2de .png op de server komen waar hij dan heen verwijst. Maar ik weet niet hoe ik dat voor elkaar krijg aangezien het .CSS bestand de layout voor de hele site beheerd...

code:

#menubar { background: url(../images/menubar_bg.png) 0 0 no-repeat; }

#menubar div.menubar-2 {
    padding: 0px 20px 0px 20px;
    background: url(../images/menubar_bg.png) 100% -50px no-repeat;
}

#menubar div.menubar-3 {
    height: 50px;
    background: url(../images/menubar_bg.png) 0 -100px repeat-x;
}

Iemand enig idee of dit uberhaupt mogelijk is?

-Heaget

[mcDavid]

Dus een parent moet veranderen als je over een specifiek child hovert?

Ik ben bang dat dat toch javascript moet gaan worden...

-edit-
ik zit even de CSS3-selectors door te zoeken, maar zelfs daar kan ik eigenlijk niet zoiets in vinden. Best jammer eigenlijk, zou heel wat mogelijkheden bieden!

Als je bedoelt dat het menu per pagina een specifieke kleur heeft, dan zie hieronder idd... Andere optie is pagina-specifieke (eventueel zelfs dynamisch gegenereerde) CSS, maar ook daarvoor is aanpassing van de HTML noodzakelijk.

[ Voor 61% gewijzigd door mcDavid op 28-10-2009 12:50 ]

[Kiphaas7]

Dus als je naar een andere pagina wil dan de homepage, wil je dat je menu een andere kleur krijgt? Iets zoals hier op tweakers gebeurt?

http://tweakers.net/
http://tweakers.net/games/
http://tweakers.net/mobile/

Dit is niet alleen met css op te lossen, in zoverre dat je extra class(es) aan je html moet gaan hangen afhankelijk van welke pagina je bezoekt. Hoe je die extra classes eraan hangt, is afhankelijk van je mogelijkheden. Dat kan je met een serverside taal doen als php, of clientside met javascript. Serverside verdient de voorkeur, aangezien het dan ook werkt met javascript uit.

Ter verduidelijking, dit zou dan de html output moeten worden voor je homepage:

HTML:

<div id="menubar" class="home">Homepage></div>

En een of ander submenu:

HTML:

<div id="menubar" class="submenu-titel">Homepage></div>

Of iets dergelijks. Bovenstaande hoef je natuurlijk niet letterlijk over te nemen, het is slechts een voorbeeld hoe je het zou kunnen doen.


EDIT:
Ah, als je bedoelt wat mcDavid bedoeld, dan wordt het een heel ander verhaal.... Dan zal je inderdaad met javascript aan de slag moeten. Het is misschien mogelijk met alleen css, maar je moet met een live voorbeeldje komen. Wat mogelijk is met css om je submenu van kleur te laten veranderen (als je dat wil). De achtergrond van je container kan je echt alleen icm met javascript en css veranderen.

[ Voor 18% gewijzigd door Kiphaas7 op 28-10-2009 12:43 . Reden: reactie mcDavid ]

[mithras]

Met stylesheets kan je alleen de elementen zelf veranderen. Je kan niet met stylesheets attributen van een ander element veranderen. Dat laatste wil jij en dat is meer behaviour. Lekker doen met javascript dus

[Heaget]

code:

<div id="menubar">
    <div class="menubar-2">
    <div class="menubar-3"></div>
    </div>
    </div>

zo ziet het er nu uit.

Kiphaas7 schreef op woensdag 28 oktober 2009 @ 12:36:
Dus als je naar een andere pagina wil dan de homepage, wil je dat je menu een andere kleur krijgt? Iets zoals hier op tweakers gebeurt?

http://tweakers.net/
http://tweakers.net/games/
http://tweakers.net/mobile/

Dit is niet alleen met css op te lossen, in zoverre dat je extra class(es) aan je html moet gaan hangen afhankelijk van welke pagina je bezoekt. Hoe je die extra classes eraan hangt, is afhankelijk van je mogelijkheden. Dat kan je met een serverside taal doen als php, of clientside met javascript. Serverside verdient de voorkeur, aangezien het dan ook werkt met javascript uit.

Ter verduidelijking, dit zou dan de html output moeten worden voor je homepage:

HTML:

<div id="menubar" class="home">Homepage></div>

En een of ander submenu:

HTML:

<div id="menubar" class="submenu-titel">Homepage></div>

Of iets dergelijks. Bovenstaande hoef je natuurlijk niet letterlijk over te nemen, het is slechts een voorbeeld hoe je het zou kunnen doen.


EDIT:
Ah, als je bedoelt wat mcDavid bedoeld, dan wordt het een heel ander verhaal.... Dan zal je inderdaad met javascript aan de slag moeten. Het is misschien mogelijk met alleen css, maar je moet met een live voorbeeldje komen. Wat mogelijk is met css om je submenu van kleur te laten veranderen (als je dat wil). De achtergrond van je container kan je echt alleen icm met javascript en css veranderen.

Je code begrijp ik wel, maar hoe geef ik dan aan waar hij die nieuwe .png's vandaan moet halen?

[mithras]

Heaget schreef op woensdag 28 oktober 2009 @ 12:56:

code:

<div id="menubar">
    <div class="menubar-2">
    <div class="menubar-3"></div>
    </div>
    </div>

zo ziet het er nu uit.


[...]


Je code begrijp ik wel, maar hoe geef ik dan aan waar hij die nieuwe .png's vandaan moet halen?

Wil je bij een hover (uitklappen van menu oid) de achtergrond veranderen of wanneer je pagina X bezoekt zie je achtergrond A en als je pagina Y bezoekt zie je achtergrond B?

Daarnaast zou ik menu's in <ul> stoppen, maar dat is een andere discussie

[mcDavid]

Heaget schreef op woensdag 28 oktober 2009 @ 12:56:

code:

<div id="menubar">
    <div class="menubar-2">
    <div class="menubar-3"></div>
    </div>
    </div>

zo ziet het er nu uit.


[...]


Je code begrijp ik wel, maar hoe geef ik dan aan waar hij die nieuwe .png's vandaan moet halen?

Cascading Stylesheet:

.submenu-titel-1 .menubar {background: url("plaatje1.png");}
.submenu-titel-2 .menubar {background: url("plaatje2.png");}

And so on voor alle pagina's die je hebt.

[Heaget]

Even een plaatje erbij voor de duidelijkheid.

Als je op een link in het linkermenu klikt, moet de menubar dus van kleur veranderen.

[MueR]

oh, bij een click?

Cascading Stylesheet:

#menubar a:active { color:red; }

[mcDavid]

Heaget schreef op woensdag 28 oktober 2009 @ 13:05:
Even een plaatje erbij voor de duidelijkheid.

Als je op een link in het linkermenu klikt, moet de menubar dus van kleur veranderen.

[afbeelding]

Het probleem is dus zoals Kiphaas7 het interpreteert, je wilt per pagina een andere kleur.
Dat doe je door per pagina die menubalk een andere/extra class te geven.

[Heaget]

Hehe nu zie ik door de code ff het bos niet meer. Het probleem is dus dat het geheel in Joomla staat. Met 1 layout.css, en 1 HTML bestand... Niet per pagina apart dus....

[macciez]

Als ik het goed begrijp is elk menu-item zijn eigen class?
Dan kun je toch zoals mcDavid zegt voor elke class een eigen background definieren?

Heaget schreef op woensdag 28 oktober 2009 @ 12:56:

code:

<div id="menubar">
    <div class="menubar-2">
    <div class="menubar-3"></div>
    </div>
    </div>

zo ziet het er nu uit.


[...]


Je code begrijp ik wel, maar hoe geef ik dan aan waar hij die nieuwe .png's vandaan moet halen?

Dan moet je even kijken waar de huidige .png vandaan wordt gehaald en daar zet jij je andere .pngs ook in.

Ik zou het zo doen:

code:

div#menubar .menubar2
{
   background: url('/images/plaatje2.png');
}

div#menubar .menubar3
{
   background: url('/images/plaatje3.png');
}

[ Voor 74% gewijzigd door macciez op 28-10-2009 13:57 ]

[Heaget]

Als ik paste wat mcdavid zegt in m'n layout.css gebeurt er niks, ook niet als ik de code van Kiphaas7 in mn HTML toevoeg...

edit

paste, maar wel de locatie van de images veranderd natuurlijk

[ Voor 22% gewijzigd door Heaget op 28-10-2009 14:16 ]

[mcDavid]

Heaget schreef op woensdag 28 oktober 2009 @ 13:46:
Hehe nu zie ik door de code ff het bos niet meer. Het probleem is dus dat het geheel in Joomla staat. Met 1 layout.css, en 1 HTML bestand... Niet per pagina apart dus....

Ah kijk, nu komt de aap uit de mouw. Dit had je opzich best even in de Topicstart mogen vermelden!

Ik weet niet precies hoe het template systeem van Joomla werkt, maar het lijkt me dat het mogelijk is verschillende stylesheets te koppelen aan een pagina.

Als dat zo is, maak één stylesheet voor de totale opmaak, en losse stylesheets voor het menu. Per pagina selecteer je dan de stylesheet voor de totale opmaak plus de bijbehorende menu-stylesheet.

-edit-

Heaget schreef op woensdag 28 oktober 2009 @ 14:16:
Als ik paste wat mcdavid zegt in m'n layout.css gebeurt er niks, ook niet als ik de code van Kiphaas7 in mn HTML toevoeg...

edit

paste, maar wel de locatie van de images veranderd natuurlijk

Code die hier gepost wordt, zal over het algemeen niet zomaar te knippen/plakken zijn. Het zijn voorbeelden voor welke richting je op moet denken, geen werkende toepasbare code. We willen best helpen, maar domweg een complete oplossing uitwerken laten we maar over aan dure development-bureaus.

[ Voor 30% gewijzigd door mcDavid op 28-10-2009 14:26 ]

[DeZzL]

Je hoeft niet met verschillende templates te gaan werken in joomla! als je kleine afwijkingen per pagina wilt maken.
Als je in de index.php van template je <body> tag vervangt met:

PHP:

<?php
// Joomla! active menu item ophalen
$active = $menu->getActive();
// huidige menupositie als body class meegeven
if (!empty($active->alias)) { 
$bodyid = "id= '" . $active->alias . "'";
} 
else{
$bodyid ='';
}
?>
<body <?php echo $bodyid;?>>

... dan kun je per menuitem een andere stijl in hetzelfde template bouwen.
het bestand index.php vind je in /templates/JOUW_TEMPLATE/index.php

[ Voor 13% gewijzigd door DeZzL op 28-10-2009 15:09 . Reden: quoterotzooitje ]

[Kiphaas7]

Mijn eerste reply + mcDavid 2de reply + Dezzl 1ste reply = je antwoord.

Nog meer hulp kan je niet krijgen, tenzij wij even alle code voor jou gaan posten. Daar heb ik in ieder geval weinig trek in, omdat ik a) joomla niet goed genoeg ken en b) er geen zin in heb. Eigenlijk gaat Dezzl al verder dan strikt noodzakelijk omdat hij je de panklare code levert die nodig is om het aan de gang te krijgen in joomla, waarmee hij 1 stap verder gaat met helpen dan ik.

@Dezzl: kan je er zonder meer van uitgaan dat $active-alias veilig is, aangezien je deze gewoon echo'd? Als in, nooit en te nimmer (harmfull) html code bevat, of begint met een cijfer.


Het laatste wat je nu nog moet doen is de css classes die de code van Dezzl uitspuugt stylen in je css, aan de hand van (dus niet letterlijk overnemen!) het voorbeeld wat mcDavid je gaf....

[ Voor 5% gewijzigd door Kiphaas7 op 28-10-2009 16:36 ]

[DeZzL]

Kiphaas7 schreef op woensdag 28 oktober 2009 @ 16:32:

@Dezzl: kan je er zonder meer van uitgaan dat $active-alias veilig is, aangezien je deze gewoon echo'd? Als in, nooit en te nimmer (harmfull) html code bevat, of begint met een cijfer.

$active->aliased is altijd een sanitized en url-safe alias van de naam van het menu-item. In dit geval kun je het zonder gevaar echoën al hoewel je het jezelf af kunt vragen of het good-pratice is. Je hebt nog een goed punt: een $active->alias kan met een nummer beginnen, en een class mag in (X)HTML niet met een cijfer beginnen...