Vejledning. Tabulex Hjemmeside. Styling af sidemenuer. Side 1 af 8

Transkript

1 Tabulex Hjemmeside Styling af sidemenuer Side 1 af 8

2 Styling af sidemenuer Sidemenuerne kan styles efter alle ønsker. Du skal vælge modulet: "Styling" på det niveau, hvor det skal have virkning. F.eks. kan du som her style på øverste niveau. Herefter arver det ud på hele dit site, dvs. siden og alle undersider. Her starter al styling af sidemenuer. Side 2 af 8

3 Styling er opdelt i 4 hovedsektioner: 1. Opsætning: Dette er den ydre ramme omkring sidemenuen. Her kan du vælge at lave baggrundsfarve til hele sidemenuen eller rammekanter til hele sidemenuen. Her kan man også sætte en generel fontstørrelse for hele menuen. 2. Niveau1: Dette er menuerne på øverste niveau i sidemenuen. 3. Niveau2: Dette er de første undermenuerne på sidemenuen. 4. Niveau3: Dette er det nederste niveau, der kan styles eller under-undermenuer til sidemenuen. Princippet i arv virker også her: Hvis man sætter en værdi på et højere niveau, så arver det nedefter, medmindre værdien for det samme er sat længere nede. Eksempel: Lad os sige at du sætter fontstørrelsen på "tekst" i "Opsætning" - så arver det til alle dine undermenuer. Hvis du sætter en værdi på 2. niveau, så arver det kun til 3. niveau. Men 1. niveau vil have den generelle værdi. Lad os prøve nogle typiske eksempler: A. Fede menuer niveau2: Problem alle mine undermenuer bliver "bold" (fed), når jeg vælger et hovedmenupunkt. Løsning: Sidemenu --> niveau2 --> "Tekst normal"--> Skrift --> Sæt "Skrift: tykkelse" Sættes til "normal". Husk at gemme! Side 3 af 8

4 B. Indryk på mine undermenuer niveau2 og 3 Problem: Jeg vil gerne have mindre indrykning på menuerne. Løsning: Gå i Opsætning --> Linjer (og ikoner) --> Sæt Afstand > Afstand: venstre = "10" "px". Sæt den til 0 "px", hvis du slet ikke vil have indrykning. Værdien arver i hele menuen. Dvs. det gælder også under-undermenuer. Her sættes den generelle indrykning. C. Sidemenuen må godt være bredere Problem: Jeg vil gerne gøre plads til mere tekst i alle menulinjer og må derfor gøre sidemenuen bredere. Løsning: Sidemenu --> Opsætning --> Ydre ramme --> Størrelse --> Bredde Sæt værdien til eksempelvis 200 pixels, så har du gjort menuen 20 pixels breddere. D. Sidemenuen må godt ligge helt ude i hjørnet Problem: Jeg vil gerne have sidemenuen helt ude i hjørnet, da den skal have sin egen farve. Løsning: Sidemenu --> Ydre ramme --> Margin --> Margin-top - venstre og bund sættes til -20 "px" Sæt herefter eventuelt værdien afstand (padding) til 10 "px" i stedet. Ellers ligger menupunkterne helt ude på kanten. Side 4 af 8

5 E. Menuen skal have en lodret streg til højre Løsning: Sidemenu--> Opsætning --> Ydre Ramme --> Ramme Sæt: ramme stil højre --> Solid ramme bredde højre --> 1 "px" ramme farve højre --> Kan du evt. sætte til en lys/mørk grå (frem for sort) F. Jeg vil gerne have mit eget ikon foran menupunkterne Først skal du lave designe dit eget ikon. Ikonet skal passe med linjehøjden. Dvs. tag dit logo eller lignende og åbn det med et billedeprogram. Resize det f.eks. til 16 pixels i højden (gør billedet meget lille). Gå i sidemenu: Opsætning --> linjer og ikoner -> Baggrund Sæt: Baggrund billede: "mitlogo.jpg" Baggrund gentagelse: no-repeat Baggrund placering: top-left Sæt eventuelt: Opsætning --> linjer og ikoner -> Afstand --> Afstand: bund: "få pixels" Afstand --> Afstand: top: "få pixels" Det sidste gøres for at centrere ikonet lodret. Tip! Man kan fjerne ikonet på lavere niveau1 ved at uploade et "tomt billede" under linjer og ikoner. F.eks. 1 pixel grå. Nedenfor har vi vedhæftet disse idéer og andre ideer, som dokumentation. Side 5 af 8

6 Dokumentation ########################################## O P S Æ T N I N G ########################################## Opsætning: Ydre ramme (.leftmenucontainer) **** Helt til venstre/top **** Margen > Margen:top = "-20" "px" Margen > Margen:venstre = "-20" "px" Margen > Margen:bund = "-20" "px" Afstand > Afstand:top = "20" "px" Afstand > Afstand:venstre = "20" "px" Afstand > Afstand:bund = "20" "px" Afstand > Afstand:højre = "20" "px" **** Mere plads i bredden **** Størrelse > Størrelse:bredde = "180" "px" **** Baggrundsbillede **** Baggrund > Baggrund:billede = "min_sidemenu_baggrund.jpg" Baggrund > Baggrund:gentagelse = "repeat-x" **** Baggrundsfarve **** Baggrundsfarve > Baggrundsfarve = "#FF0000" **** Lodret linie til højre **** Ramme > Ramme:bredde:højre = "1" "px" Ramme > Ramme:stil:højre = "solid" Ramme > Ramme:farve:højre = "red" Side 6 af 8

7 Opsætning: Linier (og ikoner) (.leftmenucontainer ul li) **** ikoner **** Baggrund > Baggrund:billede = "mit_sidemenu_ikon.jpg" Baggrund > Baggrund:gentagelse = "no-repeat" Baggrund > Baggrund:placering = "top left" Afstand > Afstand:top = "6" "px" Afstand > Afstand:bund = "3" "px" **** baggrundsbillede **** Baggrund > Baggrund:billede = "mit_sidemenu_gradient.jpg" Baggrund > Baggrund:gentagelse = "repeat-x" **** Linie under menupunkterne **** Ramme > Ramme:bredde:bund = "1" "px" Ramme > Ramme:stil:bund = "solid" Ramme > Ramme:farve:bund = "red" **** Punktopsætning **** (Avanceret) Liste > Liste:type = "disc" **** Ingen indrykning på undermenuer **** Afstand > Afstand:venstre = "10" "px" **** Mere indrykning på undermenuer **** Afstand > Afstand:venstre = "20" "px" Opsætning: Tekster normal (.leftmenucontainer ul li.no a) Skrift > Skrift:tykkelse = "normal" Skrift > Skrift:farve = "00FF00" Tekst > Tekst:understregning = "none" Opsætning: Tekster aktiv (.leftmenucontainer ul li.cur a) Skrift > Skrift:tykkelse = "bold" Skrift > Skrift:farve = "0000FF" Tekst > Tekst:understregning = "underline" Side 7 af 8

8 ########################################## N I V E A U 1, 2 og 3 ########################################## Niveau 1: Linie (og ikon) (.leftmenucontainer ul.level_1 li) **** Fjern linie under menuteksten (niveau 2 og 3) **** Ramme > Ramme:bredde:bund = "0" "px" **** Fjern ikon **** Margen > Margen:venstre = "0" "px" Baggrund > Baggrund:billede = "" Baggrund > Baggrund:gentagelse = "no-repeat" **** Fjern indryk **** Afstand > Afstand:top = "0" "px" Ramme > Ramme:bredde:bund = "0" "px" **** Baggrundsfarve **** Baggrundsfarve > Baggrundsfarve = "#F0F0F0" Niveau 1: Tekst normal (.leftmenucontainer ul.level_1 li.no a) Skrift > Skrift:tykkelse = "normal" Skrift > Skrift:farve = "00FF00" Tekst > Tekst:understregning = "none" Niveau 1: Tekst aktiv (.leftmenucontainer ul.level_1 li.cur a) Skrift > Skrift:tykkelse = "bold" Skrift > Skrift:farve = "0000FF" Tekst > Tekst:understregning = "underline" Niveau 1: Tekst mus over (.leftmenucontainer ul.level_1 li a:hover) Skrift > Skrift:tykkelse = "bolder" Skrift > Skrift:farve = "FF0000" Tekst > Tekst:understregning = "overline" Side 8 af 8