Oppdatert 7 juli 2010
Enkle tips med template og favicon i Joomla
Dessverre så har jeg funnet svært lite hjelp ved søk på Joomla i Norge, så derfor laget jeg denne siden
og håper den kan være til nytte for noen.
Er du interessert i søkevennlig url SEF, les mer her.
Hvordan få Favicon Joomla
Favicon er en fin liten ting å ha i nettleseren. Den blir ditt varemerket for hjemmesiden din for siden din.
Se øverst i nettleseren og du skal da kunne se mitt favicon.
Sørg for å fjerne det faviconet som allerede følger med Joomla templaten når du har installert en ny template. (Ikke sikkert det er noen der).
Lag så et nytt favicon i ditt grafikkprogram eller bruk et bilde du liker. Standard størrelse er 16x16 eller 32x32.
Når du har laget bildet ditt kan du gå til f.eks. til Dynamic DriveFavIcon Generator og de gjør om bildet ditt til favicon.
Mitt favorittsted er http://www.html-kit.com/favicon/, som også lar deg lage ditt favicon transparent.
Hos html kit har jeg laget noen faviconer også med animasjoner tilhørende mitt domenenavn.
Du finner flere favicon generator, så bare google litt..
Blir ditt favicon feil og du har lastet det opp i rotfolderen din, så er det ikke bare å endre det med å lage et nytt bilde.
Jeg vil anbefale at du fjerner faviconet ditt fra rotfolderen og lager et nytt favicon.
Det kan du gjøre f.eks. gjøre her hos favicon.cc
Når du er fornøyd med ditt nye favicon så legger du det i rotmappen til den templateten du bruker og dermed kan du lage
forskjellige favicon til andre templater.
Grunnen til at det ikke bør legges i rotfolderen, er at Joomla 1.5 ikke har noen favicon der fra før.
Jeg prøver å gardere meg også med å skrive inn to forskjellige koder i html filen før </head>.
Eksempel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml xml:lang="" lang="" >
<head>
<jdoc:include type="head" />
<link rel="shortcut icon" href="/templates/favicon.ico" /> (Denne koden skal være der fra før).
En av disse to kodene kan du prøve å legge til som ekstra
<link rel="shortcut icon" href="/favicon.ico"/>
<link rel="shortcut icon" href="http://ditt.domene/templates/templatenavn/favicon.ico"/>
Test deg fram med forskjellige metoder og ikke gi opp, da Joomla kan være litt problematisk med nytt favicon.
Samme metode er det hvis du har en vanlig hjemmeside, men fjern / skråstreken bak ico hvis du ikke har laget siden din med XHTML.
Vær oppmerksom på at Google kan ha litt problemer med å godta nytt favicon når du bruker Joomla,
mens Mozilla Firefox som regel fanger det nye faviconet ditt opp med en gang.
Prøv å slett leserhistorikken din i nettleseren Internet Explorer.
Du kan gjøre det samme med Mozilla sin nettleser hvis det skulle ta tid før du ser ditt nye favicon.
Det finnes en component til dette fra Phoca, som gjør at du kan lage ditt eget favicon i backend. Les mer hos Phoca favicon.
Forandre Joomla templaten og header.
Når du surfer rundt på nettet og ser en side du liker, så klikk på kilde og du vil da finne ut navnet på templaten,
men husk den kan være forandret litt og da særlig med header.
Du ønsker nok å sette litt mer ditt eget preg på din templaten?
Først må du vite hvor templaten er og den ligger under Joomla og mappen heter templates.
Under der finner du de som er standard som følger med hele Joomla installasjonen.
Standard mallene heter ja-purity, rhuk_milkyway og beez.
Hvis du skal begynne å endre på CSS eller HTML kodene i Joomla så må du gå inn i backend under utvidelser eller
extensions og velger den templaten du skal forandre på.
Hvis du ikke er så dyktig med koder, så vil jeg anbefale at du finner deg en template med header.
Dette kan du gjøre enkelt med å forandre, slik at du får ditt eget bilde eller flash hvis du ønsker det.
Du går inn i mappen der templaten din ligger og ser under images.
Som regel så heter bildet header og er da i png, jpg eller gif format.
Kall headeren som tilhører templaten noe annet, slik at du har en kopi og vet eksakt størrelsen.
Husk at du må ha et bilderedigeringsprogram og du finner flere alternativer under mine hjemmesidetips.
Etter dette så laster du opp den nye headeren din i templaten du bruker.
Templaten ligger i mappen som kalles templates og de har alle vært sitt navn, så åpner du mappen til den templaten du bruker
og under der er det enda en mappe som heter images.
Husk å laste opp Binære hvis du bruker FTP og ikke cPanel.
Hvis du endrer navnet på header som er i jpg format til for ekspempel png, så må du også endre koden i CSS filen. (Klikk på bildene og de forstørres).
Først må du velge den template i backend på Joomla som du ønsker å forandre. Her har jeg markert ett rødt merke på templaten JA_Purity. (Kun eskempel).
Etter dette velger du redigere template css.
Finn denne koden til JA_Purity hvis du ønsker å forandre logo til GIF eller JPG format.
/* HEADER
--------------------------------------------------------- */
#ja-headerwrap {
background: #333333;
color: #CCCCCC;
line-height: normal;
height: 80px;
}
#ja-header {
position: relative;
height: 80px;
}
.ja-headermask {
width: 602px;
display: block;
background: url(../images/header-mask.png) no-repeat top right;
height: 80px;
position: absolute;
top: 0;
right: -1px;
}
#ja-header a {
color: #CCCCCC;
}
h1.logo, h1.logo-text {
margin: 0 0 0 5px;
padding: 0;
font-size: 180%;
text-transform: uppercase;
}
h1.logo a {
width: 208px;
display: block;
background: url(../images/logo.png) no-repeat;
height: 80px;
position: relative;
z-index: 100;
}
Problemer med å få meny til å vises på høyre side?
Du kan også oppleve med templaten at lenkene ikke vises hvis du har disse på høyre side.
Dette gjelder da for besøkende, som kan ha en skjermstørrelse på f.eks. 800x600.
Det jeg vil anbefale er at du tar en titt på CSS malen og se om det står overflow: hidden;
Hvis så er tilfelle bør du endre koden til overflow: y-scroll; (ikke godkjent av W3C) Du kan bruke overflow: auto; overflow:hidden, eller overflow: scroll;
Et annet problem er hvis du finner en template som kan være for gammel i forhold til Joomla 1.5, da viser den feil i nettleser eller du
får ikke installert den i backend.
Har du lyst til å begynne og lage din egen Joomla template så har sitesiground.com tutorial på en enkel template
eller du kan prøve net.tutsplus.com
Footer:
Jeg ville også ha mitt domene i footer og da går du inn i templaten din i backend på Joomla og velger rediger HTML,
du blar deg ned til footer og finner denne koden. Innenfor der det står Copyright legger du inn det du ønsker.
<div class="Footer-text">
<p>Copyright og her er ditt domene<br/>
All Rights Reserved.</p>
Mer om moduler og plugins på denne siden.
Farget scrollbar
Vel, nå liker jeg å endre litt mer på templaten og da særlig farget scrollbar (synes kun i Internet Explorer).
Du går inn på utvidelser og velger maler. Deretter går du inn i den templaten du bruker og velger enten malen med css eller HTML.
Grunnen til at jeg legger til to forskjellige metoder er at den første kan være vanskelig å få til å fungere i enkelte templater,
da velger du den andre metoden. Husk at du vil ikke få godkjent koden hos W3C
Dette er eksempel på svart og hvit scrollbar.
Til CSS dokunentet bruker du denne koden helt øverst i mallen.
html,
body
{ scrollbar-arrow-color: #FFFFFF;
scrollbar-3dlight-color: #000000;
scrollbar-highlight-color: #FFFFFF; scrollbar-face-color: #000000;
scrollbar-shadow-color: #FFFFFF;
scrollbar-darkshadow-color: #000000; scrollbar-track-color: #FFFFFF;
}
I HTML dokumentet bruker du denne koden, som skal legges inn like etter starten på body taggen.
<!--[if IE]>
<style type="text/css">
body,
html{
scrollbar-arrow-color: #FFFFFF;
scrollbar-3dlight-color: #000000;
scrollbar-highlight-color: #FFFFFF; scrollbar-face-color: #000000; scrollbar-shadow-color: #FFFFFF;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #FFFFFF;
}</style>
<![endif]-->
Page Transition i Joomla
En annen ting du også kan gjøre er å lage Page Transition i Joomla. Dette er vel mest aktuellt for oss som lager grafikk og andre ting.
Gå inn på backend på Joomla og velg utvidelser, for så å velge maller. Etter dette haker du av din template og klikker på rediger HTML.
Før slutt taggen </head> er legger du inn denne koden:
<meta http-equiv="Page-Enter"
content="revealTrans(Duration=2.0,Transition=8)">
<meta http-equiv="Page-Exit"
content="revealTrans(Duration=4.0,Transition=2)"/>
Du trykker på bruk og tester hjemmesiden din i Internet Explorer.
Nå skulle sidene dine gå i sirkel ut og inn ettersom du følger lenkene dine.
Det finnes en modul til dette også, men den må du betale for. Her hos http://www.spiralscripts.co.uk siden hvis du vil ta en titt.
Hos Gelono finner du virkelig bra gratis templater. Her finner du http://www.gelono.com/
Et av de bedre stedene å lete etter template synes jeg er her på denne siden more than 2200 templates.
Du kan og sjekke ut free templates her hos themesbase.com eller dezinedepot.
|
Favicon og template
