Innan man börjar bygga ett skin i LUVIT bör man göra vissa förberedelser. Dessa är beskrivna nedan.

Transkript

1 1. Introduktion LUVITs standardutseende för portal och utbildningsmiljö vad gäller logotyp, färger, typsnitt mm kan ändras genom att skapa nya så kallade skins. Skinnen kan man sedan ladda upp i LUVIT Administration och applicera på en eller flera portalsajter. 2. Förberedelser Innan man börjar bygga ett skin i LUVIT bör man göra vissa förberedelser. Dessa är beskrivna nedan Logga Man kan sätta organisationens/företagets logga uppe i vänstra hörnet av LUVIT. För att kunna göra detta behövs en bildfil som innehåller logotypen. Bildfilen ska vara av typen gif, jpg eller png. Den bör inte vara mer än 50px hög. Bredden spelar mindre roll Färger Välj ut de färger som ska användas i LUVIT. Om organisationen/företaget inte har färdiga dokument för sin grafiska profil brukar det funka bra att utgå från dess hemsida. Om du har ett bildbehandlingsprogram och kan hantera det kan du ta en skärmdump på hemsidan och öppna den i programmet. Där kan du sedan ta reda på de exakta färgkoderna för de färger du vill använda. Har du inget bildbehandlingsprogram eller inte vet hur du använder det kan du istället använda ett verktyg som heter Instant Eyedropper. Instruktioner för hur du använder det och nedladdningslänk finns på Skinpaket För att kunna göra ett skin behöver du ett skinpaket att utgå ifrån. Skinpaketet innehåller bilder och så kallade css-filer. Det är i css-filerna du definierar vilka typsnitt, färger och bilder som ska användas. En CSS-fil kan du utan problem öppna och redigera i en vanlig text-editor, t ex Notepad. Har du inget skinpaket kontakta någon på Luvit. 3. Sätt igång När du har valt ut färger, fixat loggan och har ditt skinpaket är det dags att börja jobba med det nya skinnet.

2 Är du duktig på CSS, det språk som används för att styra gränssnittets utseende i LUVIT kan du göra i princip vilka ändringar du vill. I den här manualen kommer vi dock bara att gå igenom de vanligaste och mest grundläggade ändringar man kan tänkas vilja göra Startsidan Vi kommer här gå igenom några olika exempel på hur en startsida i LUVIT kan se ut och hur du gör för att åstadkomma ett liknande utseende. Nedan ser du hur LUVITs standard startsida ser ut. De olika delarna du kan förändra är markerade i bilden. Bilden, texten och hur de är placerade i förhållande till varandra styr du inte med skinnet. Inställningar för detta görs i administrationen av portalsajter i LUVIT Administration Logotyp Det första man vill byta ut i skinnet är antagligen loggan. Storlek,placering och vilken bildfil som ska användas styrs i filen common.css. Position:.logo-top position:absolute; left:15px; /*hur många pixlar från vänsterkanten loggan ska ligga*/ top:3px; /*hur många pixlar från toppen av sidan loggan ska ligga*/ Om din logga är lite större än standard luvit-loggan kan det vara bra att placera den nära både den övre och den vänstra kanten. Bild:.logo-top img

3 background-image:url(luvit_logo.gif); /*namnet på bildfilen med loggan*/ background-repeat:no-repeat; width:90px;/*loggans bred i pixlar*/ height:20px;/*loggans höjd i pixlar*/ Tänk på att ha bilden i ett format lämpligt för webben (gif, jpg eller png). Tänk också på att bilden är precis i den storlek den ska vara i Luvit. Vi rekommenderar att loggans höjd inte ska vara mer än 50px. Hur bred den är spelar mindre roll. Om du bara byter ut loggan och inte gör något åt topplisten och toppmenyn kommer skinnet antagligen inte att bli särskilt snyggt Toppmenyn Denna består av två gif-bilder, bg_left_topmenu.gif respektive bg_right_topmenu.gif. Dessa utgör hörnen på menyn och däremellan ligger ett fält som styrs i filen common.css. I Luvits standardskin ser dessa bilder ut så här: bg_left_topmenu.gif bg_right_topmenu.gif Vilket gör att menyn får följande utseende: Genom att variera färg och form på dessa bilder kan man styra hur hörnen på menyn ska se ut. Med runda hörn kan det se ut här: bg_left_topmenu.gif bg_right_topmenu.gif För att få helt raka hörn kan du antingen anpassa hörnbilderna eller helt enkelt inte använda dem alls. För att inte använda dem måste du göra två ändringar i filen common.css..menu-top-leftcontainer /*background-image:url("bg_left_topmenu.gif");*/ background-color:#405b6d;.menu-top-rightcontainer /*background-image:url("bg_right_topmenu.gif");*/ Genom att sätta /* i början av av en rad och */ i slutet kommenterar man bort den, innehållet ignoreras och bilderna används därmed inte.

4 För att området mellan hörnbilderna, alternativt menyns bakgrundsfärg om du inte använder hörnen, ska se bra ut måste du sätta dess färg i common.css. Använder du hörnbilderna blir det naturligtvis snyggast om man ger mellanrummet samma färg som bilderna..menu-top-linkcontainer padding:5px 5px 5px 5px; margin-left:10px; margin-right:10px; background-color:#89b4c9; /*Här sätter du färgkoden för färgen mellan hörnbilderna*/ Om du vill att toppmenyn varken ska ha hörn eller bakgrund kan det se ut så här: Detta åstadkommer man genom att gömma hörnbilderna och inte sätta någon bakgrundsfärg..menu-top-linkcontainer padding:5px 5px 5px 5px; margin-left:10px; margin-right:10px; /*background-color:#fff;*/ Skulle du vilja justera menyns placering gör du det i:.menu-top right:0px; /*Hur långt från högerkanten ska menyn placeras*/ top:0px; /*Hur långt från toppen av sidan ska menyn placeras*/ Beroende på vilken färg du valt på menyn kan färgen på länkarna behöva ändras för att de ska synas bra. Det vanligaste är att länkarna är vita (färgkod= #fff) eller svarta (färgkod=#000)..menu-top a color:#fff; /*Grundfärg för länkarna i menyn*/ border-right:1px solid #fff;/*färgen på strecken mellan länkarna i menyn, sätt till samma som grundfärgen*/.menu-top a:link color:#fff; /*Sätt till samma som grundfärgen*/ text-decoration:none; /*Ändra none till underline om du vill att länkarna ska vara understrukna*/.menu-top a:visited color:#fff; /*Sätt till något annat än grundfärgen om du vill att besökta länkar ska ha en annan färg.*/ text-decoration:none; /*Ändra none till underline om du vill att besökta länkar ska vara understrukna*/.menu-top a:hover color:#ddd; /*Sätt till något annat än grundfärgen om du vill att länkarna ska ändra färg när man för muspekaren över dom.*/ text-decoration:none; /*Ändra none till underline om du vill att länkar ska vara understrukna när man för muspekaren över dom.*/.menu-top a:active

5 color:#fff; /*Sätt till samma som grundfärgen*/ text-decoration:none; Topplisten Topplisten förändrar du genom att göra ändringar i bildfilen body_bg.gif. Vill du helt ta bort topplisten öppnar du body_bg.gif i ett bildbehandlingsprogram och gör hela bilden vit. Vill du ha topplisten i en annan färg öppnar du body_bg.gif och byter färg på den färgade delen högst upp. Du kan också ändra höjden på topplisten genom att ändra storlek på den färgade delen. Detta kan vara bra om du har en lite högre logga och du vill ha listen som bakgrund till denna. Om du fyller hela body_bg.gif med en färg får det följande effekt: Login-yta Du kan byta bakgrundsfärg på login-ytan. Detta gör du i filen main.css. /*Login bar*/.login-bar

6 top:90px; height:28px; border-top:1px solid black; /*Här kan du ändra färg på den övre linjen.*/ border-bottom:1px solid #89A1B8; /*Här kan du ändra färg på den nedre linjen.*/ background-color:#ffcc33; /*Lägg till den här raden och sätt den färg du vill ha.*/ Tänk på att färgen på login-ytan hänger med in i portalen efter inloggning. Ändrar du färgen på login-ytan kan det också tänkas att du behöver ändra färg på texten för att den ska synas ordentligt. För att göra detta måste du lägga till nedanstående stycke i filen main.css..login-container td color:#fff; /*Färgen på texten i login-ytan*/ Powered by-loggan Om man har en bakgrund som inte är vit blir Powered by Grade-loggan inte så snygg och då vill man kanske dölja den. Egenskaper för denna logon finns också i common.css, i taggen:.symbol-right img background-image:url(../../images/luvit_poweredby_portal.gif); position:absolute; right:25px; top:70px; margin:0px; padding:0px; width:115px; height:12px; Dölj loggan genom att efter height lägga till: visibility:hidden; Paneler Beroende på vilka inställningar du gjort för en viss portalsajt så visas ett antal olika paneler på dess startsida. Utseendet för dessa paneler ställer du in i filen common.css i sektionen som börjar med /*PANELS*/..panel border:1px solid #777; /*Bredd, typ och färg för ramen runt en panel*/ background-color:#fff; /*Panelernas bakgrundsfärg*/ Utseendet på panelernas huvud styr du i headertype-1, headertype-2 osv. Vilken eller vilka paneler en viss headertype gäller står i css-filen. Ofta vill man att alla paneler ska se likadana ut, då gör man samma inställningar för alla headertypes.

7 Du kan välja mellan att sätta en solid bakgrundsfärg eller använda en bild. Med en bild kan du åstadkomma lite mer effekter. Användning av bild: /* communication centre, browsertest, "forgot password"-panel */.headertype-4 background-image:url(bg_red_bar.gif); Bilden som används ovan skapar en fade-effekt. Bilden ser ut så här. Naturligtvis kan du öppna den i ett bildbehandlingsprogram och göra förändringar. Användning av solid färg: /* communication centre, browsertest, "forgot password"-panel */.headertype-4 background-color:# );

8 3.2. Portalen efter inloggning Det du främst behöver fundera på när det gäller portalen efter inloggning är huvudmenyns utseende. Detta styrs i main.css : Placering av själva meny-containern: #div-mainmenu top:69px; /*Avstånd från toppen av sidan*/ left:12px; /*Avstånde från vänsterkanten*/ Precis som när det gäller panelerna kan du använda en solid färg eller bild som bakgrundsfärg i menyn. Användning av bild: /*menu item*/ li.mainitem background-repeat:repeat-x; background-image:url("bg_red_bar.gif");/*menyns bakgrundsbild*/ font-size:12px; /*Storlek på text i menyn*/ font-weight:bold;/*sätt till normal om du inte vill att menytexten ska vara fet*/ color:#fff; /*Textfärgen på de menyalternativ som går att fälla ned */ border:1px solid #EFEFEF;/*Färg på strecken mellan menyalternativen*/ border-right-width:0px;

9 Användning av solid bakgrundsfärg: /*menu item*/ li.mainitem background-repeat:repeat-x; background-color:# ;/*Menyns bakgrundsbild*/ font-size:12px; /*Storlek på text i menyn*/ font-weight:bold;/*sätt till normal om du inte vill att menytexten ska vara fet*/ color:#fff; /*Textfärgen på de menyalternativ som har undermenyer*/ border:1px solid #EFEFEF;/*Färg på strecken mellan menyalternativen*/ border-right-width:0px; Textfärgen för de menyalternativ som inte har undermenyer ställer du in i: /*menu links*/ a.mainitem-link color:#fff; text-decoration:none; /*Grundfärg*/ a.mainitem-link:link color:#fff; text-decoration:none; /*Sätt till samma som grundfärg*/ a.mainitem-link:visited color:#fff; text-decoration:none; /*Sätt till samma som grundfärg*/ a.mainitem-link:hover color:#efefef; text-decoration:none;/*färg som används när man har muspekaren över menyalternativet*/ a.mainitem-link:active color:#fff; text-decoration:none; /*Sätt till samma som grundfärg*/ Du ska också ställa in utseendet för de undermenyer som kan fällas ut. Undermenyernas utseende: /*submenus*/ #mainmenu li ul background-color:white; /*Undermenyernas bakgrundsfärg*/ border:1px solid #999; /*Bredd, typ och färg på ramen runt undermenyerna*/ /*submenu links*/ a.subitem-link:link text-decoration:none; /*Sätt none till underline om du vill ha länkarna understrykna*/ a.subitem-link:visited text-decoration:none; a.subitem-link:hover color:#069; text-decoration:none;/*färg på länkarna när man har musen över dem*/ a.subitem-link:active text-decoration:none; Skulle du sätta en bakgrundsfärg på undermenyerna som kräver någon annan färg på länkarna sätter du det så här: /*submenu links*/ a.subitem-link:link color:#fff; text-decoration:none; a.subitem-link:visited color:#fff; text-decoration:none; a.subitem-link:hover color:#efefef; text-decoration:none; a.subitem-link:active color:#fff; text-decoration:none; Paneler Hur man ställer in utseendet för paneler har redan beskrivits i avsnitt

10 Mina kurser Egenskaper för detta (ej rubriken som hanteras som en vanlig panel) styrs i main.css: /* My courses */ h4.panelsubheader font-size:11px;/*textstorlek*/ font-weight:normal; background-color:#efefef; /*Bakgrundsfärg*/ border-bottom:1px solid black; /*Bredd, typ och färg på ramen*/ Bakgrund Man kan ändra bakgrundsfärgen, den röda i bilden nedan. Det görs i main.css. body background-color:#f2f5f7; /*Bakgrundsfärg*/ background-image:url(body_bg.gif); background-repeat:no-repeat;

11 4. I läromiljön 4.1. Inloggad-yta I läromiljön finns en egen klass i main_education.css som styr denna. Color finns inte från början och måste läggas till om man vill ändra färgen på texten: login-bar position:absolute; right:20px; top:50px; z-index:999; white-space:nowrap; color:#006600; /*Textfärg på inloggad*/ 4.2. Menyn Alla egenskaper för menyn i utbildningsmiljön finns i main_education.css. Bakgrundsfärgerna för den här menyn sätts på samma som panelhuvuden och menyn i portalen.

12 Grundfärgen och färgen på menylänkarna sätts i : /* Toolbar */.toolbar ul.level-0 a padding:5px; background-image:url(bg_darkblue_bar.gif); /*Om du vill använda bakgrundbild*/ /*background-color:# 405b6d;*/ /*Om du vill använda solid färg*/ color:#fff; /*Här sätter du färgen på menylänkarna*/ Hover -färgen, den som visas när man för muspekaren över ett menyalternativ, sätts i:.toolbar ul.level-0 a:hover background-image:url(bg_yellow_bar.gif); /*Om du vill använda bakgrundsbild*/ /*background-color:# 405b6d;*/ /*Om du vill använda solid färg*/ /*color:#fff;*/ /*Om du vill sätta en färg på menylänkarna i hover -läge*/ Färgen för undermenylänkar sätter man i:.toolbar ul.level-1 a,.toolbar ul.level-2 a padding:0; background-image:none; color:#000; /*Färg på undermenylänkar*/ Vill man att undermenylänkarna ska få en annan färg när man för muspekaren över dem sätts det i:.toolbar ul.level-1 a:hover background-image:none; color:#000; /*Färg på undermenylänkar i hover -läge*/ Navigationsträdet Egenskaper för navigationsträdet sätts i main_education.css.

13 Vald nod (blå på bilden):.treeitem-selected background-color:#405b6d; /Bakgrundsfärg för vald nod*/ color:#fff; padding:2px; cursor:default; Hover över nod (grå på bilden):.treeitem-over background-color:#ccc; /Bakgrundsfärg när man för muspekare över en nod*/ padding:2px; cursor:pointer; Framsteg och resultat m.m. Egenskaperna för Framsteg och resultat, Publika grupper, Filer mm ligger i common.css: Den mörkblå färgen på bilden sätts i: /* Data tables */ table.maindatatable th, tr.maindatatable-header td background-color:#405b6d; /*Bakgrundsfärg till kolumnrubrikerna*/ color:#fff;/*textfärg för kolumnrubrikerna*/

14 5. Typsnitt Standard typsnitt i LUVIT är Verdana. Vill man ändra detta görs det i filen common.css. /*Main font style*/ p,input,textarea,body,select,td,th font-family:verdana, Arial, Helvetica, sans-serif; font-size:11px; 6. Länkar Utseendet för länkar i LUVIT sätts I filen common.css. Standard är att länkar är svarta och understrukna. a:link color:#000000; text-decoration:underline; a:visited color:#000000; text-decoration:underline; a:hover color:#666; text-decoration:none; a:active color:#000000; text-decoration:underline; 7. Att applicera skinnet När du är klar med ditt skin gör du en zip-fil av alla filer. Zip-filen laddar du i LUVIT Administration under Serveradministration->LUVIT Portal-> Portal skin. Gör du förändringar i ditt skin kan du alltid göra en ny zip-fil och ladda upp den i skinnet du redan skapat. För att applicera skinnet på en portalsajt går du in i Serveradministration->LUVIT Portal- >Portalsajter. Där klickar du på aktuell portalsajt och sätter sen ditt nya skin i rullgardinslistan Skal. 8. Avslutning För att göra mer avancerade anpassningar av skinnet kontakta Grade. En bra introduktion till css finns på