Body-bakgrunn og current mulig?

[Ratleto]

Jeg sitter og lager en webside som skal ha forskjellig bakgrunnsfarge for tre forskjellige deler. Joomla står for output'n, og der har jeg id="current" og class="active" som dukker opp når en meny/link er aktiv.

 

Så tenkte jeg å bruke (en av) disse til å skifte bakgrunnsfarge. Nå jeg har prøvd forskjellige kombinasjoner av

body #meny1 #current {
background: #1e3c1e;
}

uten at dette fungerer. Denne ligger (selvfølgelig) under "body"-taggen i fila.

 

Er det mulig å få til det jeg vil...?

[Haraldson]

Det er fullt mulig. Du kan ikke vise oss siden? Litt vanskelig å si hva som er galt ut fra det der.

[Ratleto]

www dott åpnetreffsteder dott org skråstrek test

 

Jepp, med å.

 

Skal ha forskjellig bakgrunn til de forskjellige treffstedene.

 

Edit: CSS-fila med body-taggene, er i template.css

Endret 27. mai 2008 av Ratleto

[RulleRimfrost]

Her skifter du vel kun #current. Joomla har en index.php pr template, så det første som slår meg er at du muligens kan gjøre det med javascript, som setter background ved onload basert på meny-id. Jeg er ikke stødig nok i java, men noe ala {document.getElementById('body').style.background='red';} basert på en meny-id...

[Ratleto]

Noen som har en ren CSS-løsning, og ikke med javascript?

[Haraldson]

Hvor får du #meny1 fra?

 

.menu #current a burde fungere. Det er jo allerede en active state i hovedmenyen...?

[Ratleto]

Hvor får du #meny1 fra?

 

.menu #current a burde fungere. Det er jo allerede en active state i hovedmenyen...?

 

Jeg brukte meny1 bare som eksempel. Si at det er #heimdal som skal ha ny bakgrunnsfarge i body. Hvordan blir det da?

[Haraldson]

For det første; må menyen skrives ut med en egen <ul> med en <div> rundt for hvert menypunkt?

 

For gjeldende kode vil du for eksempel kunne sette en bakgrunn på #heimdal #current a. Dette blir veldig spesifikt, og det beste hadde vært om du hadde løst hele menyen med EN <ul> og gitt den aktive <li>-en en klasse .active. #main-menu .active { blabla }. Så kunne du eventuelt kombinere .active-klassen med spesifikke navn for de forskjellige menypunktene, slik at du fortsatt kan ha forskjellige farger.

 

... class="<?php som henter ut om menypunktet er aktivt eller ikke if(active == true){ echo 'active'; } ?>-heimdal" ...

 

Det er bare et forslag, og ville ha gitt deg klassenavn som .active-heimdal og .active-sommerstua.

[Ratleto]

For det første; må menyen skrives ut med en egen <ul> med en <div> rundt for hvert menypunkt?

 

For gjeldende kode vil du for eksempel kunne sette en bakgrunn på #heimdal #current a. Dette blir veldig spesifikt, og det beste hadde vært om du hadde løst hele menyen med EN <ul> og gitt den aktive <li>-en en klasse .active. #main-menu .active { blabla }. Så kunne du eventuelt kombinere .active-klassen med spesifikke navn for de forskjellige menypunktene, slik at du fortsatt kan ha forskjellige farger.

 

... class="<?php som henter ut om menypunktet er aktivt eller ikke if(active == true){ echo 'active'; } ?>-heimdal" ...

 

Det er bare et forslag, og ville ha gitt deg klassenavn som .active-heimdal og .active-sommerstua.

 

Jeg måtte bruke 3 menyer for at bakgrunnen i knappene skulle få hver sin farge. Og da er det Joomla som bestemmer hvor mange ULer som brukes. Dette er vanskelig å endre.

 

Skjønner ikke helt hva du mener jeg, dessverre. Du har skjønt at jeg vil at "body background-color" skal byttes idet #heimdal får aktiv-klasse eller current-id?

 

I Joomla kan jeg sette heimdal-klassen annerledes. Enten som ul id (slik som det står nå), ul klasse, eller egen div klasse som starter før alle ul'ene, og slutter etter dem.

[Haraldson]

Nei, fikk ikke med meg at bakgrunnsfargen skulle gjelde for body. Dette kan du ikke løse med ren CSS, i hvert fall ikke når det skal fungere i også eldre nettlesere som IE6.

 

Et forslag til løsning med JS kan jo være noe slikt;

 

var heimdalIsActive = document.getElementById('heimdal').getElementsByClassName('active');
var sommerstuaIsActive = document.getElementById('sommerstua').getElementsByTagName('active');
if(heimdalIsActive.length > 0) {
body.style.backgroundColor = '#FF0000';
} else if(sommerstuaIsActive.length > 0) {
body.style.backgroundColor = '#00FF00';
} else if( etc. ) {

}

Det går sikkert an å gjøre det mer generisk, og.

[Ratleto]

Tusen takk for alle svarene.

 

Men hva om vi ikke bryr oss om IE6 da? Går det an med CSS da?

 

Og hva med å ikke bruke JS, men PHP til oppgaven, dersom det ikke går an å få til i CSS?

[Haraldson]

Jeg vet ikke hvor fleksibelt Joomla er her, men når du får henta ut active i menyen bør du jo kunne hente ut dette i rammeverket ditt også, og gi forskjellige ID-er rett på body-taggen for eksempel. Derfra er det jo enkelt nok.

 

Jeg mente jeg hadde sett avanserte CSS-selektorer som tredde i kraft dersom et annet gitt element var barn av det første, men jeg fant ikke noe slikt nå. Da kunne du jo ha sjekket på om .active var barn av #heimdal f.eks., og basert deg på det for å gi body en bakgrunnsfarge. Ser ut som det blir litt feil vei i hierarkiet foreløpig.

[Ratleto]

Takk for tipsene, Haraldson. Jeg sjekka med det norske Joomla-forumet, og fikk noen svar der som bør løse problemet.