Contents [Hide]
1. Mallar - Protostar och Beez3 (http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?tmpl=component&print=1&layout=default#h1-1-
mallar-protostar-och-beez3)
1.1. Protostars modulpositioner (http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?tmpl=component&print=1&layout=default#h1-1-
1-1-protostars-modulpositioner)
1.2. Modulpositionerna i Beez3 (http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?tmpl=component&print=1&layout=default#h1-2-
1-2-modulpositionerna-i-beez3)
1.3. Mer om mallar (http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?tmpl=component&print=1&layout=default#h1-3-1-3-mer-ommallar)
1.4. CSS-mallar (http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?tmpl=component&print=1&layout=default#h1-4-1-4-css-mallar)
1.5. Kopiera mallen (http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?tmpl=component&print=1&layout=default#h1-5-1-5-kopieramallen)
1.6. Varianter (http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?tmpl=component&print=1&layout=default#h1-6-1-6-varianter)
1.7. Färger (http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?tmpl=component&print=1&layout=default#h1-7-1-7-faerger)
1.8. Ändringar i varianten protostar1 (http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?
tmpl=component&print=1&layout=default#h1-8-1-8-aendringar-i-varianten-protostar1)
1.9. Ladda upp en bildfil (http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?tmpl=component&print=1&layout=default#h1-9-1-9-
ladda-upp-en-bildfil)
1.10. Media (http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?tmpl=component&print=1&layout=default#h1-10-1-10-media)
1.11. Logo (http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?tmpl=component&print=1&layout=default#h1-11-1-11-logo)
1.12. Protostar (http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?tmpl=component&print=1&layout=default#h1-12-1-12-protostar)
J3 Övning 2
I den här delen får du lära dig om mallarna Protostar och Beez3 och var modulpositionerna för
dessa är placerade, om CSS-mallar, att kopiera en mall, att använda olika mallar för olika
menyobjekt, att ändra i mallen Protostar, att ladda upp en bildfil, att lägga upp en bild som logo.
Artikeln innehåller 44 skärmurklipp.
1. Mallar - Protostar och Beez3
Vid installationen medföljer två mallar för webbplatsen: Protostar (standard) och Beez3 och två
mallar för administrationsplatsen: isis (standard) och Hathor. Du skall i de första
Joomlaövningarna använda dig av den mall (Template) som vid installationen (med en gul
stjärna) är markerad som standard (default) dvs ”Protostar”. I Joomla 2.5 var det mallarna
Beez2 och Beez5 som var standard (förvalda). Beez3 liknar mallarna för Joomla 2.5.
Det finns utöver dessa mallar flertalet gratismallar att testa. Hos Joomla24
(http://www.joomla24.com/Joomla_3x_Templates/Joomla_3x_Templates.html) kan man på ett
enkelt sätt hämta flertalet sådana. Det finns också flertalet mallar som man får betala för. Man
kan också skapa mallar själv. Det är dock inte så lätt. Det finns därför särskilda verktyg för att
skapa mallar. Det mest kända verktyget för att skapa mallar är Artisteer
(http://www.artisteer.com/).
Välj nu att skapa dig en översikt över vad man kan göra med mallarna Protostar och Beez3.
Välj därför på toppmenyn att markera Tillägg och klicka sedan på Mallar.
Sedan ska du göra en liten ändring. Klicka långt upp till höger på Inställningar och sedan ändrar
du till höger om "Visa modulpositioner" från Inaktiverad till Aktiverad.
Nu har du gjort det möjligt att på administrationsplatsen (backend) förhandsgranska mallarna
för att se modulpositionerna men också att på webbplatsen (frontend) med hjälp av en liten
ändring i
adressen
för
webbplatse
n (som
visas
längre ned)
se var en
mall har
placerat
olika
modulpositioner.
Klicka sedan på "Spara och
Stäng".
Det finns efter installationen
4 mallar - 2 mallar för
frontend och 2 mallar för
backend. Protostar är alltså
standard för frontend och
Isis är standard för backend.
Sedan byter du långt upp till
vänster från Varianter till Mallar.
1.1. Protostars
modulpositioner
I kolumnen Mall på raden under
"Protostar Detaljer och filer"
klickar du på Förhandsgranska
så visas alla mallens
modulposistioner.
Förhandsgranskningen öppnas i
ett nytt fönster som du kan
stänga efter varje granskning.
I de första övningarna i kursen
kommer mallen Protostar att
användas. Fokuseringen är inte
på olika mallar utan på själva
administrationen av en
webbplats och på att kunna
använda olika viktiga program.
Det är mallen Protostar som är den mest intressanta mallen eftersom den innehåller en del
nyheter specifika för Joomla 3 och den är ju också den förvalda mallen efter installationen. En
finess är att mallen bara har en CSS-mall vilket skall underlätta om man vill ändra på något i
mallen.
I flera övningar framåt kommer vi att använda oss av den mallen. Därför kan det vara bra att ha
åtminstone en viss kännedom om var positionerna i Protostar visas och vilka positioner som
finns. Dock kommer du säkert under kursen gång att automatiskt lära dig detta.
Nedan räknas dessa modulpositioner upp ibland med lite kommentarer. Efterhand som kursen
framskrider så kommer eventuellt kompletteringar att göras i texten nedan. Vad Style innebär
kommer att förklaras senare.
Rubrik/Logo (som inte är en modulposition) visas överst och ovanför position-1. Direkt efter
installationen visas här det som står i Globala inställningar till höger om Webbplatsens namn.
Längre ned i den här artikeln skall du lära dig hur man gör ändringar av inställningarna i mallen
Protostar. Då får du lära dig att ange en rubrik som visas här eller en Logo-bild samt en
beskrivning.
position-0 med Style: none outline visas överst. Position-0 visas till höger om en rubrik. I
position-0 är det tänkt att man skall lägga en sökmodul.
position-1 med Style: none outline visas under Rubrik/Logo och position-0. I denna position är
det tänkt att en toppmeny skall visas.
banner med Style: xhtml outline visas under position-1. Här är det tänkt att man skall kunna
visa banners.
Under banner startar det på samma rad (samma lodräta höjd) 3 positioner.
position-8 med Style: xhtml outline visas längst till vänster.
position-3
(Topp mitten)
med Style: xhtml
outline visas i
mitten. Här är
det lämpligt att
visa en bild. Om
man installerar
Joomla med
exempeldata
och väljer
exempeldatavarianten
default
så visas här en
bild med
bredden 700 px
(pixlar) och
höjden 180 px.
position-7 med Style: well outline visas till höger. I den här positionen är det tänkt att några
viktiga moduler skall visas under varandra t ex modulen Logga in och modulen Huvudmenyn
(Main menu) om man nu vill visa en lodrät meny. Kanske väljer man att bara ha en vågrät
toppmeny i modulen position-1.
Huvudområdet (main) visas under position-3. Det är här som alla artiklar och komponenter
visas. Detta område som normalt sett tar mycket plats lodrätt är alltså ingen modul. Man kan
istället säga att detta område omringas av flertalet moduler. Där visas just nu bara rubriken
Home vilket är lite missvisande för ett område som vanligtvis är ganska högt.
position-2 med Style: none outline visas direkt under huvudområdet (main). Position-2 är tänkt
för modulen brödsmulor dvs för modulen som visar var man befinner sig på webbplatsen. När
man är på förstasidan så visas här just bara ”Du är här:Förstasidan” (efter det att man i
modulen Brödsmulor har ändrat det ursprungliga Home till Förstasidan.) Det är lite lustigt att
modulen Brödsmulor visas under artiklarna. Det vanliga är att Brödsmulor visas högt upp
ovanför artiklarna. Det känns fel så i övningarna har jag flyttat upp Brödsmulor till position-3.
footer (sidfot) med Style: none outline finns under positionerna position-8, position-2 och
position-7. Den här positionen är tänkt till t ex information om copyright.
Under footer och längst till höger visas länken "Tillbaka till toppen" (som inte heller är någon
modulposition). Detta är en fast länk som besökare skall kunna använda för att snabbt gå till
översta delen av webbplatsen utan att behöva skrolla.
debug är den position som visas längst ned. Denna position är tänkt att användas enbart för
visning av av olika saker när man gör avancerade felsökningar. Den ligger därför längst ned så
att visningarna inte skall påverka den normala visningen.
Stäng nu den extra fliken (eller det extra fönstret) med visningen av modulpositionerna.
1.2. Modulpositionerna i Beez3
Eftersom du inte kommer att använda dig av Beez3 under övningarna i kursen så är det inte
lika viktigt att känna till modulpositionerna i denna mall. Nedan redogörs ända lite om mallens
uppbyggnad men du behöver inte läsa igenom stycket nedan så noga nu. Eventuellt så kan du
hoppa direkt till nästa kapitel: "Mer om mallar".
Klicka vid visningen av de olika
mallarna på Varianter och ändra
sedan Standard från protostar till
Beez3. Ändringen gör du snabbast
genom att på raden Beez3 i kolumnen
Standard klicka på den vita stjärnan så att den blir gul. (Om man inte ändrar standarden så
visas inte modulpositionerna korrekt när det gäller Beez3. T ex visas inte position-7.)
Sedan byter du till vänster från Varianter till Mallar.
I kolumnen Mall på raden under "Beez3 Detaljer och filer" klickar du på
Förhandsgranska så visas alla mallens modulpositioner.
Förhandsgranskningen öppnas i ett nytt fönster som du kan stänga efter
varje granskning.
Vänsterkolumnen i Beez3 innehåller tre
modulpositioner. Man tycker kanske att det kunde
räcka med en modulposition till vänster.
Anledningen till uppdelningen är att det finns några
finesser i beez-mallarna som vanligtvis inte ingår i
en mall. Om en finess skall fungera för en modul
då måste modulen placeras i en särskild position
som använder sig av denna finess.
Den översta är position-7 och i denna position är
inte knuten till någon finess.
I mitten finns position-4. Längst ned i
vänsterkolumnen finns position-5. Alla moduler
som placeras i position-7 fungerar som vanliga
moduler. Alla moduler som placeras i position-4 har
en finess. Först visas bara modulens rubrik men till
vänster om rubriken finns ett +. Om man klickar på
+ så visas innehållet i modulen.
Alla moduler som placeras i position-5 presenteras
som flikar.
Högerkolumnen innehåller också en finess som
inte är vanlig i andra mallar. I högerkolumnen hittar
du överst position-6 och där under position-8 och
längst ned position-3.
Finessen är att när det gäller högerkolumnen så
visas (när det finns något i kolumnen) överst en
text STÄNG INFO. Om man klickar på den så
visas inte högerkolumnen (dvs ingen av de 3
positionerna) förrän man istället har klickat på
texten ÖPPNA INFO som visas på samma plats
som STÄNG INFO.
I position-0
som ligger
överst i
Beez3 kan
man placera en sökmodul.
Ovanför position-0 finns en möjlighet för besökaren att ändra teckenstorleken.
I position-2 ovanför position-7 är det
tänkt att sökvägen som på engelska
brukar kallas breadcrumb skall visas.
I position-12 kan man lägga en modul
ovanför själva huvuddelen (main) av
webbplatsen där artiklarna visas och
där olika komponenter visas.
Längst
ned
finns
positio
n-9,
positio
n-10
och position-11 och allra längst ned position-14 och debug. I position-14 kan man lägga in
modulen Sidfot med upphovsrättsinformation och att man har copyright.
I Beez5 i Joomla 2.5 fanns position-15. Om man inte hade någon modul i den positionen så
visades överst i huvudet av mallen bilden fruits.jpg. Om man lade en modul av något slag i
position-15 så ersatte denna modul visningen av bilden fruits.jpg. I Beez3 finns inte position-15.
Stäng nu fliken (fönstret) som visar modulplatserna i Beez3.
Klicka sedan på Tillägg, Mallar och i fliken
Varianter ändrar du så att protostar återigen
blir standardmallen för webbplatsen.
1.3. Mer om mallar
Den som skapar en template (mall) kan ge vilka namn som helst till sina modulpositioner.
De modulpositioner som finns i de templates (mallar) som ingår vid installationen av Joomla
skapar troligen en viss standard för vilka namn som används i mallar som skapas av andra
tillverkare av mallar. I Joomla 1.5 fanns till vänster modulpositionen left och till höger
modulpositionen right. En del mallar till Joomla 2.5 har fortsatt med dessa namn. Ett problem
blir när man behöver fler positioner till vänster. Då har en del mallar skapat flera olika positioner
med ett namn som börjar på left.
Skaparen av Beez-mallarna Beez2, Beez5 i Joomla 2.5 och Beez3 i Joomla 3 har valt att oftast
använda namn som börjar med position och som slutar med ett nummer och det är kanske bra.
En spontan upplevelse som jag tror många har är att man frågar sig varför numren inte kommer
i ordning. Det blir svårare att hålla reda på modulpositionerna när de till vänster eller till höger
inte kommer i ordning eller varför just position-7 ligger till överst till vänster och just position-6
överst till höger. I Protostar ligger ju position-7 till höger men det beror på att i Protostar
används i första hand bara en kolumnmodul till höger.
Observera att de här modulpositionerna kan vara placerade på helt andra platser i en annan
mall (template). Det är också möjligt att flera av positionerna inte finns alls i en annan mall där
modulpositionerna har helt andra namn. Det förefaller emellertid som om beez-mallarna i
Joomla 2.5 för övriga mallar för Joomla 2.5 har skapat en liten standard som används av vissa
tillverkare. Det finns i flera gratismallar för Joomal 2.5 som i en vänsterkolumn innehåller en
modulposition med namnet postion-7 och i en högerkolumn innehåller en modulposition med
namnet position-6 men också en modulposition med namnet position-8.
De komplicerade CSS-mallar som finns i Joomla 2.5 t ex i Beez-mallarna skapar i vissa
situationer problem och vissa saker som man är van vid om man har arbetat med webbsidor
tidigare fungerar inte som tidigare. Det går t ex inte (utan att man gör flera ändringar som inte
är så lätta att hitta i flera olika CSS-mallar) i Joomla 2.5 om man använder någon av Beezmallarna
att utan vidare skapa tabeller och att sedan välja storleken på ramen eller på
utrymmet mellan olika innehåll.
Det är min förhoppning att mallen Protostar med en enda CSS-mall och andra gratismallar för
Joomla 3 som kommer att skapas skall vara enklare att ändra i.
1.4. CSS-mallar
Klicka på Tillägg och sedan på Mallar och ändra sedan ”flik” till Mallar.
Klicka på "Protostar Detaljer och filer".
Fliken Editor visas. I mitten visas bilden till vänster. Klicka på
Dokumentation för att komma till den utförliga instruktionen How to use
the Template Manager
(http://docs.joomla.org/J3.2:How_to_use_the_Template_Manager).
Tre flikar visas.
I fliken Editor visas en lista med
viktiga mappar och filer som hänger
ihop med mallen (templaten) Protostar.
Klicka på css. I bilden till vänster, som visar några av mapparna och filerna i denna lista, har ett
sådant klick gjorts. Då visas de CSS-mallar som hör ihop med mallen. När det gäller Protostar
så är det bara en fil dvs template.css. Klicka på template.css
Filen öppnas. Du
kan se att det är
en ganska stor fil
med 7396 rader
som styr
utseendet av
webbplatsen. Om
du känner till hur
CSS-mallar
fungerar så
förstår du säkert
också en del av
innehållet. Nu
kan du göra
ändringar men du
gör förstås inte nu några ändringar. När du har granskat färdigt så klickar du överst på ”Stäng
filen”.
Klicka sedan till till vänster på filen index.php.
Nu ser
du
innehållet
i den
index.ph
p-fil som
styr det
mesta i
template
n
(mallen).
I bilden till vänster visas att fr o m rad 154 så börjar modulerna att nämnas. Här kan man t ex
se vilka CSS-mallar som ingår, vilka modulpositioner som finns och var de är placerade mm.
Man bör vara försiktig när man ändrar här. En felaktig ändring kan göra att webbplatsen inte
fungerar. Om du gör ändringar så bör du därför först kopiera hela koden och klistra in den i t ex
programmet Anteckningar i din egen dator. Den ursprungliga PHP-filen finns också att hämta
bland de filer som ingår i installationspaketet för Joomla.
Ibland kan man ha behov av att ändra namn på modulerna i en mall. Det är ofta ganska enkelt.
Ofta byter man bara ut namnet i den här filen. Man måste dock tänka på att positionens namn
kanske förekommer på flera ställen i mallen. Om man t ex använder Google Chrome så visas
en numrering av alla sökträffarna. Det kan underlätta så att man inte missar positionens namn
på någon annan plats i index.php-filen. Observera att om man söker på position-1 så får man
förstås som träff också position-14 om position-14 finns.
När du är färdig klickar du överst på ”Stäng filen” utan att ändra på något.
1.5. Kopiera mallen
Nu ser du återigen sidan med Protostars huvudfiler och stilmallar.
Längst upp till vänster ser du knappen ”Kopiera mallen.
Man kan alltså
kopiera en mall
och göra små
ändringar i denna
kopia istället för att
göra ändringar i
själva
originalmallen. Du skall använda dig av denna möjlighet för att kunna se hur olika förändringar i
kopian av mallen ser ut jämfört med originalmallen. Klicka därför längst upp på ”Kopiera
mallen”. I rutan som nu visas väljer du mallnamnet "protostar1". Mallnamnet måste vara ett ord
utan mellanslag. Undvik också å, ä och ö i mallnamnet. Sedan klickar du på ”Kopiera mall”.
Meddelandet i bilden till vänster visas.
Klicka sedan på Stäng igen. så att du
lämnar visningen av de viktiga filerna när
det gäller Protostar.
Du kan göra samma undersökning som ovan också när det gäller Beez3. Då kan du se att
Beez3 innehåller 15 CSS-mallar och det kan ibland vara svårt att hitta i vilken fil som man skall
ändra om man skall ändra på något.
1.6. Varianter
När du är klar ska du överst ändra tillbaka från fliken Mallar till Varianter.
Klicka i kolumnen Variant på "protostar - Default " eller Markera framför protostar och klicka
därefter på Ändra.
Nu visas tre flikar Detaljer, Avaancerad
och Menykoppling. Klicka på Avancerad.
Här ser du vad du enkelt kan ändra på i
mallen utan att kunna något om CSSmallar.
Det du kan ändra är inte så
mycket som man skulle vilja ha möjlighet
att ändra på ett enkelt sätt. Mycket som
man kanske skulle vilja ändra på måste
man ändra i CSS-mallen. Det finns några
gratismallar som innehåller betydligt mer
möjligheter till enkla ändringar.
Det du kan ändra på i Protostar är:
Mallfärg - Förvalt är färgkoden #0088cc. Man kan klicka i färgkoden och sedan genom klick
igen ändra till en annan färg. Mallfärgen används enbart för vissa rubriker. Övriga färger på
webbplatsen ändras inte när mallfärgen ändras t ex blir vanlig text svart. Färgen för vanlig text
måste man ändra på i CSS-mallen.
Bakgrundsfärg - Förvalt är färgkoden #f4f6f7
Logo - Här kan du välja en bild. Om det finns en logo-bild så visas inte rubriken nedan men
dock visas texten som man anger vid Beskrivning.
Rubrik - Om man ovan ingenting har valt som logo och ingenting skriver här så visas i rubriken
överst i position-0 det som står i "Globala inställningar" till höger om "Webbplatsens namn".
Beskrivning - Om man skriver något här så visas det med en liten text under rubriken.
Google Font för rubriker - Förvalt är Ja
Google Font namn - Förvalt är Open+Sans
Flytande layout - Statiskt eller Flytande - Förvalt är Statisk - Statistik betyder att bredden på
webbplatsen är fast och ändras inte oavsett storleken på bildskärmens storlek och oavsett
bredden på det fönster på denna bildskärm som besökaren använder för webbläsaren.
Flytande betyder att webbplatsens bredd anpassar sig efter bredden på det fönster som
besökaren använder för webbläsaren.
Klicka nu på den tredje fliken "Menykoppling". Här kan man ange för
vilka menyobjekt som mallen skall visas. Du kan alltså välja olika
varianter av en mall eller flera mallar för olika menyobjekt. Om man
inte väljer menykoppling för någon variant så visas den variant som är
vald som standard för alla menyobjekt.
Ett exempel är att man vanligtvis har en statisk layout med fast bredd
men att man vill visa en bred tabell som inte får plats med denna
layout. Då kan man välja en särskild variant med flytande layout för just
denna visning.
Nu finns bara ett menyobjekt: Home på Main Menu och det är alltså lite för tidigt för att fundera
på om du skall använda dig av möjligheten att ha olika varianter av en eller flera mallar på din
webbplats.
Du skall inte ändra i originalmallen nu. Du skall istället testa att ändra i mallen protostar1. Klicka
därför nu på Stäng.
Innan du fortsätter så kommer först lite information om färgkoder. Om du redan känner till hur
de hexadecimala koderna fungerar när det gäller RGB-färger så kan du hoppa över nästa
kapitel om färger.
1.7. Färger
Varje färg har ett RGB-värde. Det kan vara en färg för olika texter eller en bakgrundsfärg.
RGB står för grundfärgerna: röd, grön, blå. Alla färger kan beskrivas med grundfärgerna. Varje
grundfärg har 256 steg från 0 till 255. Om en grundfärg inte alls ingår är värdet 0 och om den
ingår maximalt är värdet 255. För att ange värdet av grundfärg används det hexadecimala
talsystemet där det finns 16 "siffror". När de tio första vanliga siffrorna har tagit slut använder
man de första bokstäverna i alfabetet.
Decimala talsystemet Hexadecimala talsystemet
Decimala Hexadecimala
0 0
1 1
2 2
8 8
9 9
10 A
11 B
12 C
13 D
14 E
15 F
16 10
17 (1x16+1) 11
188 (11x16+12) BC
255 (15x16+15) FF
För att beskriva hur mycket som ingår av varje grundfärg behövs alltså 2 hexadecimala siffror.
Ett RGB-värde beskrivs på formen rrggbb där rr, gg och bb är de hexadecimala talen för
respektive grundfärg (rött, grönt, blått). Hela RGB-värdet föregås i HTML-koder av tecknet #.
Några vanliga färger
#FF0000 = Röd
#00FF00 = Grön
#0000FF = Blå
#FFFF00 = Gul
#000000 = Svart
#FFFFFF = Vit
#FF8800 = Orange
#FF00FF = Lila
#C0C0C0 = Grå
#FF00FF = Anilinröd, magenta
#00FFFF = Cyan
#A62A2A = Brun
#8C7853 = Brons
#B87333 = Koppar
#5C4033 = Mörkbrun
#2F4F24 = Mörkgrön
#871F78 = Mörk purpur
#CD7F32 = Guld
#E6E8FA = Silver
#3299CC = Himmelsblå
#BC8F8F = Skär
#FF7F00 = Alt orange
#8E236B = Katanjebrun
#A8A8A8 = Ljusgrå
#ADEAEA = Turkos
#4F2F4F = Violett
#99CC32 = Gulgrön
Du kan se några färger på en särskild färgsida (http://maltell.se/htmlkurs/faerger.htm) som jag
gjorde till en kurs redan 1996.
Det finns platser som har specialiserat sig på information om färger t ex
http://www.w3schools.com/html/html_colors.asp
(http://www.w3schools.com/html/html_colors.asp)
http://www.free-webmaster-tools.com/colorpicker.htm (http://www.free-webmastertools.
com/colorpicker.htm)
http://www.colorschemer.com/online.html (http://www.colorschemer.com/online.html)
På platsen http://colorschemedesigner.com/ (http://colorschemedesigner.com/) kan man få
hjälp med att hitta färger som hänger ihop och som man kan använda tillsammans på en
webbplats.
På platsen http://www.iconico.com/colorpic/ (http://www.iconico.com/colorpic/) kan man hämta
programmet Colorpic med vars hjälp man kan se koden för olika färger på bildskärmen.
1.8. Ändringar i varianten protostar1
Klicka först i listan över varianter i kolumnen Standard på den vita stjärnan på raden för
protostar1 så att stjärnan blir gul och därmed blir protostar1 standardmallen.
Klicka sedan i kolumnen Variant på "protostar1 - Standard (Default)" eller Markera framför
protostar1 och klicka därefter på Ändra.
Nu visas tre flikar Detaljer, Inställningar och Menykoppling. Klicka på Avancerad. Här ser du
vad du enkelt kan ändra på i mallen utan att kunna något om CSS-mallar. Du skall nu ändra på
följande:
Mallfärg - Ändra från färgkoden
#0088cc till koden #00cc88
Bakgrundsfärg - Ändra från
färgkoden #f4f6f7 till koden #f4f7f6
Klicka nu på Spara. Du har nu ändrat
till en mer grön variant och du har behållit en väldigt ljus bakgrundsfärg. Om du vill så kan du
förstås ändra till två färger som du själv tycker bättre om.
Kontrollera nu innan du fortsätter på webbplatsen
hur det ser ut. Fortsätt sedan med följande
ändringar.
Logo - Här kan du välja en bild. Vänta lite med
detta.
Rubrik - Om man ingenting skriver här
så visas i rubriken överst i position 0 det
som står i Globala inställningar till höger
om Webbplatsens namn. Välj följande
rubrik : "En övningsplats"
Beskrivning - Om man skriver något här så visas det med en liten text under rubriken. Skriv
här "Detta är en övningsplats med uppgifter gällande Joomla 3."
Google Font for Headings (Google Font för rubriker) - Förvalt är Ja - Ändra inget
Google Font Name (Google Font namn) - Förvalt är Open+Sans - Ändra inget
Fluid Layout (Flytande layout) - Statisk (Static) eller Flytande (Fluid) - Förvalt är Static (Statisk)
- Behåll tills vidare Statisk layout dvs ändra inget.
Klicka nu på ”Spara & Stäng” och kontrollera hur
webbplatsen ser ut.
1.9. Ladda upp en bildfil
Du skall nu ersätta Rubriktexten med en bild. Innan du kan göra det skall du lära dig att först
ladda ned bilder till din egen dator för att sedan ladda upp dessa bilder till webbplatsen.
En bild bör inte vara bredare än 695 pixlar om en sökmodul skall få plats till höger om bilden.
Först skall du hämta bilden logo1_b695.jpg. Bilden finns på adressen
http://maltell.se/joomla3filer/bilder/ (http://maltell.se/joomla3filer/bilder/). Gå dit och högerklicka
på bildens namn. Välj sedan att spara bilden i din egen dator. Om du använder Google Chrome
så klickar du på "Spara länk som" och därefter väljer du en lämplig mapp i din egen dator. Du
uppmanades ju ovan att skapa en sådan mapp någonstans t ex med namnet joomla3filer. Du
kommer att ladda ned fler filer senare så det är bra att ha en särskild mapp för dessa och det är
också ganska bra att även skapa undermappar till denna mapp. T ex så skapar du en
undermapp vid namn bilder och sedan laddar du ned filen till denna mapp.
1.10. Media
Klicka sedan överst på administrationsplatsen på Innehåll
och sedan på Media.
Klicka därefter överst på Inställningar.
Observera att sökvägen till bildmappen (i relation till roten) är mappen images.
Observera också att maxstorleken vid uppladdning av en bild som standard är 10 MB.
Här finns också angivet vilka filändelser
(filtyper) som är tillåtna dvs möjliga att ladda
upp. Alla syns inte i den ruta som visas.
Följande filändelser är tillåtna enligt
standardinställningarna: bmp, csv, doc, gif,
ico, jpg, jpeg, odg, odp, ods, odt, pdf, png,
ppt, swf, txt, xcf, xls, BMP, CSV, DOC, GIF,
ICO, JPG, JPEG, ODG, ODP, ODS, ODT, PDF, PNG, PPT, SWF, TXT, XCF, XLS.
Om du vill kunna ladda upp en fil som är av en annan filtyp så måste du lägga till denna i listan.
I Joomla 2.5 kunde man ha nytta av att aktivera en Flash-uppladdare. I Joomla 3 finns inte och
behövs inte Flash-uppladdaren. Det nya sättet i Joomla 3 fungerar lika bra som Flashuppladdaren.
Klicka nu på Stäng utan att ändra något.
När du åter ser Media så
ser du en filstruktur med
mappen images som rot
såsom du såg ovan.
Det finns i mappen
images 3 mappar:
banners, headers och sampledata samt en del filer.
Klicka på mappen headers.
Du skall nu ladda upp bilden.
Klicka därför nu överst till vänster på den
gröna knappen "Ladda upp".
Klicka sedan på Välj filer.
Bläddra sedan fram till filen (filerna) som du
skall ladda upp och markera den (dem) och
klicka sedan på öppna.
Nu visas det du ser i bilden till
vänster.
Klicka nu på den blå knappen "Starta uppladdning" och strax har du laddat upp filen (filerna).
Nu visas meddelandet till vänster att filen är
uppladdad i rätt mapp.
Du kan också se att bilden finns i mappen headers vars innehåll visas.
1.11. Logo
Klicka nu på Tillägg och sedan på Mallar. Klicka på varianten protostar1. Klicka sedan på fliken
Avancerad och till höger om Logo klickar du på
Välj. Överst ändrar du till mappen headers. När
du ser bilden logo1_b695... så klickar du på
denna. Bildens URL visas sedan längst ned.
Klicka sedan överst till höger på den blå knappen Infoga.
Nu ser du att bilden finns som Logo för protostar1 (men du kan inte
se hela bildens
sökväg). Om du för
musen över ögat till
vänster på raden
Logo så visas
vilken bild det är. Om du inte är nöjd och inte vill ha någon logobild så kan du klicka på krysset
längst till höger på raden Logo. Klicka nu på ”Spara & Stäng”.
Undersök webbplatsens utseende.
Logobilden visas nu längst upp istället för texten
”En övningsplats”.
1.12. Protostar
Gör nu ändringarna ovan gällande Logo och
Beskrivning också för mallvarianten protostar.
Logo: Bilden logo1_b695.jpg
Beskrivning - Skriv här "Detta är en övningsplats
med uppgifter gällande Joomla 3."
Du skall inte ändra på färgerna.
Efter ändringarna ovan så ändrar
du så att varianten protostar
återigen är standard.
Kontrollera på webbplatsen att det nu är mallen protostar som är standard.
1.13. Visa modulpositionerna på annat sätt
Efter webbadressen skriver du nu: ?tp=1. I bilden till vänster
visas hur det ser ut i Google Chrome.
Ett snedstreck skall egentligen finnas efter webbplatsens namn men oftast så visas detta inte.
Om du skriver ?tp=1 utan att först lägga till snedstrecket så läggs detta till automatiskt dvs
adressen blir nu t ex
http://butik.maltell.se/?tp=1 (http://butik.maltell.se/?tp=1)
I Google Chrome visas inte den första delen dvs protokolldelen ”http://” men denna finns där
ändå. Om man när man visar en webbsida t ex kopierar adressen och klistrar in den i något
program t ex Anteckningar eller Word så kommer protokolldelen med.
Nu visas samma överblick över vilka modulpositioner som mallen använder och var dessa
modulpositioner är placerade som du kunde se när du som inloggad på administrationsplatsen
ovan valde förhandsgranskning. Eftersom
du har gjort vissa ändringar i mallen så är
förstås dessa ändringar synliga också.
Du kan om du inte vill avslöja dina
modulpositioner för andra när du skapar
en egen riktig plats välja att i
normalsituationen inte aktivera visningen
av modulerna och att bara aktivera den en
kort stund när du själv vill studera
modulpositionerna i en eller flera mallar.

Innehåll [Göm]
1. Mallar - Protostar och Beez3 ( http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?tmpl=component&print=1&layout=default#h1-1-
mallar-protostar-och-beez3)
1.1. Protostars modulpositioner ( http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?tmpl=component&print=1&layout=default#h1-1-
1-1-protostars-modulpositioner)
1.2 . Modulpositionerna i Beez3 ( http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?tmpl=component&print=1&layout=default#h1-2-
1-2-modulpositionerna-i- beez3)
1.3. Mer om mallar ( http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?tmpl=component&print=1&layout=default#h1-3-1-3-mer-ommallar )
1.4. CSS-mallar ( http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?tmpl=component&print=1&layout=default#h1-4-1-4-css-mallar )
1.5. Kopiera mallen ( http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?tmpl=component&print=1&layout=default#h1-5-1-5-kopieramallen )
1.6. Varianter ( http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?tmpl=component&print=1&layout=default#h1-6-1-6-varianter )
1.7. Färger ( http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?tmpl=component&print=1&layout=default#h1-7-1-7-faerger )
1.8. Ändringar i varianten protostar1 ( http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?
tmpl=component&print=1&layout=default#h1-8-1-8-aendringar-i -varianten-protostar1)
1.9. Ladda upp en bildfil ( http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?tmpl=component&print=1&layout=default#h1-9-1-9-
ladda-upp -en-bildfil)
1.10. Media ( http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?tmpl=component&print=1&layout=default#h1-10-1-10-media )
1.11. Logotyp ( http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?tmpl=component&print=1&layout=default#h1-11-1-11-logo )
1.12. Protostar ( http://joomla3.maltell.se/kurs-i-3-5/25-j3-ovning-2?tmpl=component&print=1&layout=default#h1-12-1-12-protostar )
J3 Övning 2
I den här delen får du lära dig om mallarna Protostar och Beez3 och var modulpositioner för
dessa placerade, om CSS-mallar, att kopiera en mall, att använda olika mallar för olika
menyobjekt, att ändra i mallen Protostar, att ladda upp och bildfil, att lägga upp en bild som logotyp.
Artikeln innehåller 44 skärmurklipp.
1. Mallar - Protostar och Beez3
Vid installationen medföljer två mallar för webbplatsen: Protostar (standard) och Beez3 och två
mallar för administrationsplatsen: isis (standard) och Hathor.
Joomlaövningarna använder dig av den mall (Mall) som vid installationen (med en gul
stjärna) är markerad som standard (standard) dvs ”Protostar”. I Joomla 2.5 var det mallarna
Beez2 och Beez5 som var standard (förvalda). Beez3 liknar mallarna för Joomla 2.5.
Det finns utöver dessa mallar flertalet gratismallar att testa. Hos Joomla24
( http://www.joomla24.com/Joomla_3x_Templates/Joomla_3x_Templates.html ) kan man på ett
enkelt sätt hämta flertalet sådana. Det finns också flertalet mallar som man får betala för. Man
kan också skapa mallar själv. Det är dock inte så lätt. Det finns särskilda verktyg för att
skapa mallar. Det mest kända verktyget för att skapa mallar är Artisteer (
http://www.artisteer.com/ ) .
Välj nu att skapa dig en översikt över vad man kan göra med mallarna Protostar och Beez3.
Välj därför på toppmenyn att markera Tillägg och klicka sedan på Mallar.
Sedan ska du göra en liten ändring. Klicka långt upp till höger på Inställningar och sedan ändrar
du till höger om "Visa modulpositioner" från Inaktiverad till Aktiverad.
Nu har du gjort det möjligt att på administrationsplatsen (backend) förhandsgranska mallarna
för att se modulpositionerna men också att på webbplatsen (frontend) med hjälp av en liten
ändring i
adressen
för
webbplatsen
(som
visa
längre ned)
se var en
mall har
placerat
olika
modulpositionerare.
Klicka sedan på "Spara och
Stäng".
Det finns efter installationen
4 mallar - 2 mallar för
frontend och 2 mallar för
backend. Protostar är alltså
standard för frontend och
Isis är standard för backend.
Sedan byter du långt upp till
vänster från Varianter till Mallar.
1.1. Protostars
modulpositioner
I kolumnen Mall på raden under
"Protostar Detaljer och filer"
klickar du på Förhandsgranska
så visa alla mallens
modulposistioner.
Förhandsgranskningen öppnas i
ett nytt fönster som du kan
stänga efter varje granskning.
I de första övningarna i kursen
kommer mallen Protostar att
användas. Fokuseringen är inte
på olika mallar utan på själva
administrationen på en
webbplats och på att kunna
använda olika viktiga program.
Det är mallen Protostar som är den mest intressanta mallen eftersom den innehåller en del
nyheter för Joomla 3 och den är också den förvalda mallen efter installationen. Sv
finess är att mallen bara har en CSS-mall vilket ska underlätta för att man vill ändra på något i
mallen.
I flera övningar framåt kommer vi att använda oss av den mallen. Därför kan det vara bra att ha
åtminstone en viss kännedom om var positionerna i Protostar visa och vilka positioner som
finns. Dock kommer du säkert under kursen gång att automatiskt lära dig detta.
Nedan räknar dessa modulpositioner upp ibland med lite kommentarer. Efterhand som kursen
framskrider så kommer eventuellt komplettering att göras i texten nedan. Vad Style innebär
att förklaras senare.
Rubrik/Logo (som inte är en modulposition) visa överst och ovanför position-1. Direkt efter
installationen visa här det som står i Globala inställningar till höger om Webbplatsens namn.
Längre ned i den här artikeln ska du lära dig hur man gör ändringar av inställningarna i Mallen
Protostar. Då får du lära dig att ange en rubrik som visa här eller en Logo-bild samt en
beskrivning.
position-0 med Style: none outline visa överst. Position-0 visa till högre om en rubrik. I
position-0 är det tänkt att man ska lägga en sökmodul.
position-1 med Stil: inga konturvisum under Rubrik/Logo och position-0. I denna position är
det tänkt att en toppmeny skall visa.
banner med Style: xhtml outline visa under position-1. Här är det tänkt att man skall kunna
visa banners.
Under banner startar det på samma rad (samma lodräta höjd) 3 positioner.
position-8 med Stil: xhtml outline visa längst till vänster.
position-3
(Topp mitten)
med Stil: xhtml
outline visa i
mitten. Här är
det lämpligt att
visa en bild. Om
man installerar
med
exempeldata
och väljer
exempeldatavarianten
default
så visa här en
bild med
bredden 700 px
(pixlar) och
höjden 180 px.
position-7 med Style: well outline visa till höger. I den här positionen är det tänkt att några
viktiga moduler ska visa under varandra t ex modulen Logga in och modulen Huvudmenyn (
Huvudmeny) om man nu vill visa en lodrät meny. Kanske väljer man att bara ha en vågrät
toppmeny i modulen position-1.
Huvudområdet (huvud)visum under position-3. Det är här som alla artiklar och komponenter
visum. Detta område som normalt sett tar mycket plats lodrätt är alltså ingen modul. Man kan
säga att detta område omringas av flertalet moduler. Där visa just nu bara
Hem vilket är något som är ganska högt.
position-2 med Style: none outline visa direkt under huvudområdet (main). Position-2 är tänkt
för modulen brödsmulor dvs för modulen som visar var man befinner sig på webbplatsen. När
man är på förstasidan så visa här bara ”Du är här:Förstasidan” (efter det att man i
modulen Brödsmulor har ändrat det ursprungliga Home till Förstasidan.) Det är lite lustigt att
modulen Brödsmulor visa under artiklarna. Det vanliga är att Brödsmulor visa högt upp
ovanför artiklarna. Det känns fel så i övningarna har jag flyttat upp Brödsmulor till position-3.
footer (sidfot) med Stil: ingen disposition finns under positionerna position-8, position-2 och
position-7. Den här positionen är tänkt till t ex information om upphovsrätt.
Under footer och längst till höger visa länken "Tillbaka till toppen" (som inte heller är någon
modulposition). Detta är en snabb länk som besökare ska kunna använda för att snabbt gå till
översta delen av webbplatsen utan att behöva skrolla.
debug är den position som visa längst ned. Denna position är tänkt att användas för
visning av olika saker när man gör avancerade felsökningar. Den ligger därför längst ned så
att visningarna inte skall påverkas den normala visningen.
Stäng nu den extra fliken (eller det extra fönstret) med visningen av modulpositionerna.
1.2. Modulpositionerna i Beez3
Eftersom du inte kommer att använda dig av Beez3 under övningarna i kursen så är det inte
lika viktigt att känna till modulpositionerna i denna mall. Nedan redogörs ända lite om mallens
uppbyggnad men du behöver inte läsa igenom stycket nedan så noga nu. Eventuellt så kan du
hoppa direkt till nästa kapitel: "Mer om mallar".
Klicka vid visningen av de olika
mallarna på Varianter och ändra
sedan Standard från protostar till
Beez3. Ändringen gör du snabbast
genom att på raden Beez3 i kolumnen
Standard klicka på den vita stjärnan så att den blir gul. (Om man inte ändrar standarden så
visa inte modulpositionerna korrekt när det gäller Beez3. T ex visa inte position-7.)
Sedan byter du till vänster från Varianter till Mallar.
I kolumnen Mall på raden under "Beez3 Detaljer och filer" klickar du på
Förhandsgranska så visa alla mallens modulpositioner.
Förhandsgranskningen öppnas i ett nytt fönster som du kan stänga efter
varje granskning.
Vänsterkolumnen i Beez3 innehåller tre
modulpositioner. Man tycker kanske att det kunde
räcka med en modulposition till vänster.
Anledningen till uppdelningen är att det finns några
finesser som inte ingår i
en galleria. Om en finess skall fungera för en modul
då måste modulen placeras i en särskild position
som använder sig av denna finess.
Den översta är position-7 och i denna position är
inte knuten till någon finess.
I mitten finns position-4. Längst ned i
vänsterkolumnen finns position-5. Alla moduler
som placeras i position-7 fungerar som vanliga
moduler. Alla moduler som placeras i position-4 har
en finhet. Först visa bara modulens rubrik men till
vänster om rubriken finns ett +. Om man klickar på
+ så visa innehållet i modulen.
Alla moduler som placeras i position-5 presenteras
som flikar.
Högerkolumnen innehåller också en finess som
inte är vanligt i andra mallar. I högerkolumnen hittar
du överst position-6 och där under position-8 och
längst ned position-3.
Finessen är att när det gäller högerkolumnen så
visa (när det finns något i kolumnen) överst en
text STÄNG INFO. Om man klickar på den så
visa inte högerkolumnen (dvs ingen av de 3
positionerna) förrän man istället har klickat på
texten ÖPPNA INFO som visa på samma plats
som STÄNG INFO.
I position-0
som ligger
överst i
Beez3 kan
man placera en sökmodul.
Ovanför position-0 finns en möjlighet för besökaren att ändra teckenstorleken.
I position-2 ovanför position-7 är det
tänkt att sökvägen som på engelska
brukar kallas breadcrumb skall visa.
I position-12 kan man lägga en modul
ovanför själva huvuddelen (main) av
webbplatsen där artiklarna visa och
där olika komponenter visa.
Längst
ned
finns
position
n-9,
position
n-10
och position-11 och allra längst ned position-14 och debug. I position-14 kan man lägga i
modulen Sidfot med upphovsrättsinformation och att man har copyright.
I Beez5 i Joomla 2.5 fanns position-15. Om man inte hade någon modul i den positionen så
visades överst i huvudet av mallen bilden fruits.jpg. Om man lade en modul av något slag i
position-15 så ersatte denna modul visningen av bilden fruits.jpg. I Beez3 finns inte position-15.
Stäng nu fliken (fönstret) som visar modulplatserna i Beez3.
Klicka sedan på Tillägg, Mallar och i fliken
Varianter ändrar du så att protostar återigen
blir standardmallen på webbplatsen.
1.3. Mer om mallar
Den som skapar en mall (mall) kan ge vilka namn som helst till sina modulpositioner.
De modulpositioner som finns i de mallar (mallar) som ingår i installationen av Joomla
skapar troligen en viss standard för vilka namn som används i mallar som skapas av andra
tillverkare av mallar. I Joomla 1.5 fanns till vänster modulpositionen vänster och till höger
modulpositionen höger. En del mallar till Joomla 2.5 har fortsatt med dessa namn. Ett problem
blir när man behöver fler positioner till vänster. Då har en del mallar skapat flera olika positioner
med ett namn som börjar på vänster.
Skaparen av Beez-mallarna Beez2, Beez5 i Joomla 2.5 och Beez3 i Joomla 3 har valt att oftast
använda namn som börjar med position och som slutar med ett nummer och det är kanske bra.
En spontan upplevelse som jag tror att många har varit att man frågar sig varför numren inte kommer
i ordning. Det blir svårare att hålla reda på modulpositionerna när de till vänster eller till höger
inte kommer i ordning eller varför just position-7 ligger till överst till vänster och just position-6
överst till höger. I Protostar ligger ju position-7 till höger men det beror på att i Protostar
används i första hand bara en kolumnmodul till höger.
Observera att de här modulpositionerna kan placeras på helt andra platser i en annan
galleria (mall). Det är också möjligt att flera av positionerna inte finns i ett annat köpcentrum där
modulpositionerna har helt andra namn. Det förefaller emellertid som om beez-mallarna i
Joomla 2.5 för övriga mallar för Joomla 2.5 har skapats en liten standard som används av vissa
tillverkare. Det finns i flera gratismallar för Joomal 2.5 som i en vänsterkolumn innehåller en
modulposition med namnet position-7 och i en högerkolumn innehåller en modulposition med
namnet position-6 men också en modulposition med namnet position-8.
De komplicerade CSS-mallar som finns i Joomla 2.5 t ex i Beez-mallarna skapar i vissa
situationer problem och vissa saker som man är van vid om man har arbetat med webbsidor
tidigare fungerar inte som tidigare. Det går t ex inte (utan att man gör flera ändringar som inte
är så lätta att hitta i flera olika CSS-mallar) i Joomla 2.5 om man använder någon av Beezmallarna
att utan vidare skapa tabeller och att sedan välja storleken på ramen eller på
utrymmet mellan olika innehåll.
Det är min förhoppning att mallen Protostar med en enda CSS-mall och andra gratismallar för
Joomla 3 som kommer att skapas skall vara klara att ändra i.
1.4. CSS-mallar
Klicka på Tillägg och sedan på Mallar och ändra sedan ”flik” till Mallar.
Klicka på "Protostar Detaljer och filer".
Fliken Editor visum. I mitten visa bilden till vänster. Klicka på
Dokumentation för att komma till den utförliga instruktionen Hur man använder
Template Manager
( http://docs.joomla.org/J3.2 :How_to_use_the_Template_Manager).
Tre flikar visum.
I fliken Editor visa en lista med
viktiga mappar och filer som hänger
ihop med mallen (templaten) Protostar.
Klicka på css. I bilden till vänster, som visar några av mapparna och filerna i denna lista, har ett
sådant klick gjorts. Då visa de CSS-mallar som hör ihop med mallen. När det gäller Protostar
så är det bara en fil dvs template.css. Klicka på template.css
Filen öppnas. Du
kan se att det är
en ganska stor fil
med 7396 rader
som styr
utseendet på
webbplatsen. Om
du till hur
CSS-mallar
fungerar så
förstår du
också säkert och del av
innehållet. Nu
kan du göra
ändringar men du
förstår inte nu några ändringar. När du har granskat färdigt så klickar du överst på ”Stäng
filen”.
Klicka sedan till vänster på filen index.php.
Nu ser
du
innehållet
i den
index.ph
p-fil som
styr det
mesta i
mallen
n
(mallen).
I bilden till vänster visa att fr om rad 154 så börjar modulerna att nämnas. Här kan man t ex
se vilka CSS-mallar som ingår, vilka modulpositioner som finns och var de är placerade mm.
Man bör vara försiktig när man ändrar här. En felaktig ändring kan göra att webbplatsen inte
fungerar. Om du gör ändringar så bör du först kopiera hela koden och klistra in den ex
programmet Anteckningar i din egen dator. Den ursprungliga PHP-filen finns också att hämta
bland de filer som ingår i installationspaketet för Joomla.
Ibland kan man ha behov av att ändra namn på modulerna i en mall. Det är ofta ganska enkelt.
Ofta byter man bara ut namnet i den här filen. Man måste dock tänka på att positionens namn
kanske förekommer på flera ställen i mallen. Om man t ex använder Google Chrome så visa och
numrering av alla sökträffarna. Det kan underlätta så att man inte missar positionens namn
på någon annan plats i index.php-filen. Observera att man söker på position-1 så får man
förstås som träff också position-14 om position-14 finns.
När du är färdig klickar du överst på ”Stäng filen” utan att ändra på något.
1.5. Kopiera mallen
Nu ser du återigen sidan med Protostars huvudfiler och stilmallar.
Längst upp till vänster ser du knappen ”Kopiera mallen.
Man kan alltså
kopiera en mall
och göra små
ändringar i denna
kopia istället för att
göra ändringar i
originalmallen
. Du skall använda dig av denna möjlighet för att kunna se hur olika förändringar i
kopian av mallen ser ut att jämföras med originalmallen. Klicka därför längst upp på ”Kopiera
mallen”. Jag rutan som nu väljer du mallnamnet "protostar1". Mallnamnet måste vara ett ord
utan mellanslag. Undvik också å, ä och ö i mallnamnet. Sedan klickar du på ”Kopiera mall”.
Meddelandet i bilden till vänster visa.
Klicka sedan på Stäng igen. så att du
lämnar visningen av de viktiga filerna när det
gäller Protostar.
Du kan göra samma undersökning som ovan också när det gäller Beez3. Då kan du se att
Beez3 innehåller 15 CSS-mallar och det kan ibland vara svårt att hitta i vilken fil som man ska
ändra om man ska ändra på något.
1.6. Varianter
När du är klar ska du överst ändra tillbaka från fliken Mallar till Varianter.
Klicka i kolumnen Variant på "protostar - Default " eller Markera framför protostar och klicka
sedan på Ändra.
Nu visa tre flikar Detaljer, Avaancerad
och Menykoppling. Klicka på Avancerad.
Här ser du vad du enkelt kan ändra i
mallen utan att kunna något om CSSmallar.
Det du kan ändra är inte så
mycket som man skulle vilja ha möjlighet
att ändra på ett enkelt sätt. Mycket som
man kanske skulle vilja ändra på måste
man ändra i CSS-mallen. Det finns några
gratismallar som innehåller betydande mer
möjligheter till enkla ändringar.
Det du kan ändra på i Protostar är:
Mallfärg - Förvalt är färgkoden #0088cc. Man kan klicka i färgkoden och sedan genom att klicka
igen ändra till en annan färg. Mallfärgen används för vissa rubriker. Övriga färger på
webbplatsen ändras inte när mallfärgen ändras t ex blir vanlig text svart. Färgen för vanlig text
måste ändras i CSS-mallen.
Bakgrundsfärg - Förvalt är färgkoden #f4f6f7
Logo - Här kan du välja en bild. Om det finns en logo-bild så visa inte rubriken nedan men
dock visa texten som man anger vid Beskrivning.
Rubrik - Om man ovan ingenting har valt som logo och ingenting skriver här så visa i rubriken
överst i position-0 det som står i "Globala inställningar" till höger om "Webbplatsens namn".
Beskrivning - Om man skriver något här så visa det med en liten text under rubriken.
Google Font för rubriker - Förvalt är Ja
Google Font namn - Förvalt är Open+Sans
Flytande layout - Statiskt eller Flytande - Förvalt är Statisk - Statistik betyder att bredden på
webbplatsen är snabb och ändras inte oavsett storlek på bildskärmens storlek och oavsett
bredden på det fönster på denna bildskärm som besökaren använder för webbläsaren.
Flytande betyder att webbplatsens bredd anpassas efter bredden på det fönster som
besökaren använder för webbläsaren.
Klicka nu på den tredje fliken "Menykoppling". Här kan man ange för
vilka menyobjekt som mallen skall visa. Du kan alltså välja olika
varianter av en mall eller flera mallar för olika menyobjekt. Om man
inte väljer menykoppling för någon variant så visar den variant som är
vald som standard för alla meny.
Ett exempel är att man snabbt har en statisk layout bredd
men att man vill visa en bred tabell som inte får plats med denna
layout. Då kan man välja en särskild variant med flytande layout för just
denna visning.
Nu finns bara ett menyobjekt: Home på Main Menu och det är alltså lite för tidigt för att fundera
på att du ska använda dig av möjligheten att ha olika varianter av en eller flera mallar på din
webbplats.
Du skall inte ändra i originalmallen nu. Du skall istället testa att ändra i mallen protostar1. Klicka
därför nu på Stäng.
Innan du fortsätter så kommer först lite information om färgkoder. Om du redan känner till hur
de hexadecimala koderna fungerar när det gäller RGB-färger så kan du hoppa över nästa
kapitel om färger.
1.7. Färger
Varje färg har ett RGB-värde. Det kan vara en färg för olika texter eller en bakgrundsfärg.
RGB står för grundfärgerna: röd, grön, blå. Alla färger kan beskrivas med grundfärgerna. Varje
grundfärg har 256 steg från 0 till 255. Om en grundfärg inte alls ingår är värdet 0 och om den
ingår maximalt är värdet 255. För att ange värdet av grundfärg används det hexadecimala
talsystemet där det finns 16 "siffror". När de tio första vanliga siffrorna har tagit slut med
man de första bokstäverna i alfabetet.
Decimala talsystemet Hexadecimala talsystemet
Decimala Hexadecimala
0 0
1 1
2 2
8 8
9 9
10 A
11 B
12 C
13 D
14 E
15 F
16 10
17 (1x16+1) 11
188+ (11x16) (52)
16x161 (52)16x160 (52)16x161 FF
För att beskriva hur mycket som ingår av varje grundfärg behövs alltså 2 hexadecimala siffror.
Ett RGB-värde beskrivs på formen rrggbb där rr, gg och bb är de hexadecimala talen för
respektive grundfärg (rött, grönt, blått). Hela RGB-värdet föregås i HTML-koder av tecknet #.
Några vanliga färger
#FF0000 = Röd
#00FF00 = Grön
#0000FF = Blå
#FFFF00 = Gul
#000000 = Svart
#FFFFFF = Vit
#FF8800 = Orange
#FF00FF = Lila
#C0C0C0 = Grå
#FF00FF = = Cylinröd, magenta
#0an
# A62A2A = Brun
#8C7853 = Brons
#B87333 = Koppar
#5C4033 = Mörkbrun #
2F4F24 = Mörkgrön
#871F78 = Mörk purpur
#CD7F32 = Guld
#E6E8FA = Silver
#3299CC = HimmelsFblåan
#2F4F24 =7E6E8F8F0
#8F8F8 = HimmelsFblån0 SBC8F8F8F8F8F8F8F8F8
= HimmelsFblå0 SBC8FF8
A8A8A8 = Ljusgrå
#ADEAEA = Turkos
#4F2F4F = Violett
#99CC32 = Gulgrön
Du kan se några färger på en särskild färgsida ( http://maltell.se/htmlkurs/faerger.htm ) som jag
gjorde till en kurs redan 1996.
Det finns platser som har specialiserat sig på information om färger t ex
http://www.w3schools.com/html/html_colors.asp
( http://www.w3schools.com/html/html_colors.asp )
http://www.free -webmaster-tools.com/colorpicker.htm ( http://www.free-webmastertools.
com/colorpicker.htm)
http://www.colorschemer.com/online.html ( http://www.colorschemer.com /online.html )
På platsen http://colorschemedesigner.com/ ( http://colorschemedesigner.com/ ) kan man få
hjälp med att hitta färger som hänger ihop och som man kan använda tillsammans på en
webbplats.
På platsen http://www.iconico.com/colorpic/ ( http://www.iconico.com/colorpic/ ) kan man hämta
programmet Colorpic med vars hjälp man kan se koden för olika färger på bildskärmen.
1.8. Ändringar i varianten protostar1
Klicka först i listan över varianter i kolumnen Standard på den vita stjärnan på raden för
protostar1 så att stjärnan blir gul och därmed blir protostar1 standardmallen.
Klicka sedan i kolumnen Variant på "protostar1 - Standard (Default)" eller Markera framför
protostar1 och klicka sedan på Ändra.
Nu visa tre flikar Detaljer, Inställningar och Menykoppling. Klicka på Avancerad. Här ser du
vad du enkelt kan ändra i mallen utan att kunna något om CSS-mallar. Du skall nu ändra på
följande:
Mallfärg - Ändra från färgkoden
#0088cc till koden #00cc88
Bakgrundsfärg - Ändra från
färgkoden #f4f6f7 till koden #f4f7f6
Klicka nu på Spara. Du har nu ändrat
till en mer grön variant och du har behållit en väldigt ljus bakgrundsfärg. Om du vill så kan du
förstås ändra till två färger som du själv tycker bättre om.
Kontrollera nu innan du fortsätter på webbplatsen
hur det ser ut. Fortsätt sedan med följande
ändringar.
Logo - Här kan du välja en bild. Vänta lite med
detta.
Rubrik - Om man ingenting skriver här
så visa i rubriken överst i position 0 det
som står i Globala inställningar till höger
om Webbplatsens namn. Välj följande
rubrik : "En övningsplats"
Beskrivning - Om man skriver något här så visa det med en liten text under rubriken. Skriv
här "Detta är en övningsplats med uppgifter gällande Joomla 3."
Google Font for Headings (Google Font för rubriker) - Förvalt är Ja - Ändra inget
Google Font Name (Google Font namn) - Förvalt är Open+Sans - Ändra inget
Fluid Layout (Flytande layout) - Statisk (Static) eller Flytande (Fluid) - Förvalt är Static (Statisk)
- Behåll tills vidare Statisk layout dvs ändra inget.
Klicka nu på ”Spara & Stäng” och kontrollera hur
webbplatsen ser ut.
1.9. Ladda upp en bildfil
Du skall nu ersätta Rubriktexten med en bild. Innan du kan göra det ska du lära dig att först
ladda ner bilder till din egen dator för att sedan ladda upp dessa bilder till webbplatsen.
En bild bör inte vara bredare än 695 pixlar om en sökmodul ska få plats till höger om bilden.
Först skall du hämta bilden logo1_b695.jpg. Bilden finns på adressen
http://maltell.se/joomla3filer/bilder/ ( http://maltell.se/joomla3filer/bilder/ ). Gå dit och högerklicka
på bildens namn. Välj sedan att spara bilden i din egen dator. Om du använder Google Chrome
så klickar du på "Spara länk som" och därefter väljer du en lämplig mapp i din egen dator. Du
uppmanades ju ovan att skapa en sådan mapp någonstans t ex med namnet joomla3filer. Du
kommer att ladda ner fler filer senare så det är bra att ha en särskild mapp för dessa och det är
också ganska bra att även skapa undermappar till denna mapp. T ex så skapar du en
undermapp vid namnbilder och sedan laddar du ned filen till denna mapp.
1.10. Media
Klicka sedan överst på administrationsplatsen på Innehåll
och sedan på Media.
Klicka därefter överst på Inställningar.
Observera att sökvägen till bildmappen (i relation till roten) är mappen images.
Observera också att maxstorleken vid uppladdning av en bild som standard är 10 MB.
Här finns också angivet vilka filändelser
(filtyper) som är möjlig att kunna ladda
upp. Alla syns inte i den ruta som visa.
Följande filändelser är tillåtna enligt
standardinställningar: bmp, csv, doc, gif,
ico, jpg, jpeg, odg, odp, ods, odt, pdf, png, ppt,
swf, txt, xcf, xls, BMP, CSV, DOC, GIF ,
ICO, JPG, JPEG, ODG, ODP, ODS, ODT, PDF, PNG, PPT, SWF, TXT, XCF, XLS.
Om du vill kunna ladda upp en fil som är en annan filtyp så måste du lägga till denna i listan.
I Joomla 2.5 kunde man ha nytta av att aktivera en Flash-uppladdare. I Joomla 3 finns inte och
behövs inte Flash-uppladdaren. Det nya sättet i Joomla 3 fungerar lika bra som Flashuppladdaren.
Klicka nu på Stäng utan att ändra något.
När du åter ser Media så
ser du en filstruktur med
kartlagda bilder som rot
såsom du såg ovan.
Det finns i mappa
bilder 3 mappar:
banners, headers och sampledata samt en del filer.
Klicka på mappa rubriker.
Du skall nu ladda upp bilden.
Klicka därför nu överst till vänster på den
gröna knappen "Ladda upp".
Klicka sedan på Välj filer.
Bläddra sedan fram till filen (filerna) som du
skall ladda upp och markera den (dem) och
klicka sedan på öppna.
Nu visa det du ser i bilden till
vänster.
Klicka nu på den blå knappen "Starta uppladdning" och strax har du laddat upp filen (filerna).
Nu visa meddelandet till vänster att filen är
uppladdad i rätt mapp.
Du kan också se att bilden finns i mappen headers vars innehåll visa.
1.11. Logo
Klicka nu på Tillägg och sedan på Mallar. Klicka på varianten protostar1. Klicka sedan på fliken
Avancerad och till höger om Logotypen klickar du på
Välj. Överst ändrar du till mappen headers. När
du ser bilden logo1_b695... så klickar du på
denna. Bildens URL visa sedan längst ned.
Klicka sedan överst till höger på den blå knappen Infoga.
Nu ser du att bilden finns som Logo för protostar1 (men du kan inte
se hela bildens
sökväg). Om du för
musen över ögat till
vänster på raden
Logo så visa
vilken bild det är. Om du inte är nöjd och inte vill ha någon logobild så kan du klicka på krysset
längst till höger på raden Logo. Klicka nu på ”Spara & Stäng”.
Undersök webbplatsens utseende.
Logobilden visa nu längst upp istället för texten
”En övningsplats”.
1.12. Protostar
Gör nu ändringarna ovan gällande Logo och
Beskrivning också för mallvarianten protostar.
Logotyp: Bilden logo1_b695.jpg
Beskrivning - Skriv här "Detta är en övningsplats
med uppgifter gällande Joomla 3."
Du skall inte ändra på färgerna.
Efter ändringarna ovan så ändrar
du så att varianten protostar
återigen är standard.
Kontrollera på webbplatsen att det nu är mallen protostar som är standard.
1.13. Visa modulpositionerna på annat sätt
Efter webbadressen skriver du nu: ?tp=1. I bilden till vänster
visa hur det ser ut i Google Chrome.
Ett snedstreck skall egentligen finnas efter webbplatsens namn men oftast så visa detta inte.
Om du skriver ?tp=1 utan att först lägga till snedstrecket så läggs detta till automatiskt dvs
adressen blir nu t ex
http://butik.maltell.se/?tp=1 ( http://butik.maltell.se/? tp=1 )
I Google Chrome visa inte den första delen dvs protokolldelen ”http://” men denna finns
ändå. Om man när man visar en webbsida t ex kopiera adressen och klistrar in den i något
program t ex Anteckningar eller Word så kommer protokolldelen med.
Nu visa samma överblick över vilka modulpositioner som används och var dessa
modulpositioner är placerade som du kunde se när du som inloggad på administrationsplatsen
ovan valde förhandsgranskning. Eftersom
du har gjort vissa ändringar i mallen så är det
förstås dessa ändringar synliga också.
Du kan om du inte vill avslöja dina
modulpositioner för andra när du skapar
en egen riktig plats att välja att i
normalsituationen inte aktivera visningen
av modulerna och att bara aktiveras en
kort stund när du själv vill studera
modulpositionerna i en eller flera mallar.

Lär dig mer: om W3C - The World Wide Web Consortium som leder utvecklingen och "rekommenderar" standarder, om olika webbläsare, bildskärmsupplösningar, webbservrar, verktyg för att skapa och redigera webbsidor.

Läs mer: Webbproduktion