Mandag, 24 oktober 2011 10:46

Få din frihed tilbage - lær at bruge CSS!

Skrevet af 

Hvis man jævnligt arbejder med Joomla støder man hurtigt på begrænsninger hvad designet angår. Man er bundet af de rammer ens template lægger for en. Der er kæmpe forskel på hvor omfattende konfigurationsmulighederne for en template er alt efter hvem der har designet den.

Tit og ofte kan det godt betale sig at give en skilling for sin template og købe den hos en stor udbyder af templates. Disse firmaer har professionelle programmører til at designe deres templates for dem. Dels er du sikker på at det er robust og valideret kode og dels er det nemmere at konfigurere og justere gennem administrationspanelet.

Men faktisk er det sådan at man kan komme rigtig langt med selv en gratis template hvis man tillægger sig en smule CSS kompetencer, og evt. anskaffer sig et program i stil med Adobe Fireworks eller Photoshop til at redigere de image filer der følger med templaten.

De 3 følgende hjemmesider er alle bygget op omkring den samme template. Det eneste jeg har gjort for at få dem til at se ud som de gør, er ved at ændre i CSS koden. Det er faktisk den samme template som den tidligere udgave af Joomlatutorials byggede på.

  • www.haldlighting.com
  • www.hellebuch.dk
  • www.rsinvest.dk

CSS filen kan du typisk finde under følgende destination på din FTP-server: "Templates/templatenavn/css/template.css"

Brug de rigtige programmer!

CSS sproget er på ingen måde svært i forhold til andre programmeringssprog. Du kan med stor fordel anskaffe dig et udviklingsprogram som Adobe Dreamweaver eller Codelobster (sidstnævnte er gratis og for de lidt mere nørdede).

Dreamweaver har den fordel at du kan se et preview af den kode du har lavet inden du uploader det til FTP serveren.

Ligeledes foreslår programmet mulige attributes når du starter på at indtaste en CSS style. Hvis jeg eksempelvis indtaster ”mar” popper en liste op med:

Margin-top, margin-bottom, margin-left, margin-right osv.

Så kan man blot klikke på en af mulighederne og så genereres koden automatisk. Desuden gør programmet også opmærksom på hvis du har lavet en syntaksfejl. På denne måde bliver du hurtig familiær med hvilke CSS styles der findes og hvordan de virker.

Det er svært - men kun i starten

Når du har arbejdet en del med CSS kan du lynhurtigt skrue og tweake på en template efter behag og få den til at se ud præcis som du ønsker. Alle CSS kommandoer ligner hinanden og det er virkelig ikke ret svært at have med og gøre. Du kan læse mere om CSS og lære hvordan det fungerer her: w3schools.com

Den måde jeg selv har lært CSS på at ved at finde en gratis template som udgangspunkt. Det behøver ikke være en Joomla installation, men det ville da være oplagt at vælge en af dem der ligger der standard. Sæt et par menupunkter og et par sider op. Ikke noget du skal bruge til noget, men bare så du har noget at arbejde med.

Dernæst finder du template.css filen og begynder at skrue på de forskellige variabler og ser hvilke konsekvenser det giver på hjemmesiden når du gemmer filen.

Et andet lille tip som jeg bruger rigtig meget og som man kan få meget gavn af når man er skrap til CSS er manipulering af ens artikler. I TinyMCE editoren er der et lille ikon der hedder HTML. Hvis der er nogle tabeller eller lignende som du ikke kan få til at opføre sig som du gerne vil kan du gå ind og tvinge en CSS style gennem html panelet så det bliver præcis som du vil have det.

Mit navn er Mikael Hostrup og jeg blogger til daglig på mikaelhostrup.dk om alt relateret til Joomla og SEO. Her kan du findes masser af indlæg i samme genre.

Derudover ejer og driver jeg et firma hvor man kan købe en billig hjemmeside. Firmaet hedder AzureX.

Læst 11842 gange Senest ændret Mandag, 24 oktober 2011 10:48

Skriv en kommentar

Sørg for du indtaster de påkrævede oplysninger (*).
HTML kode er ikke tilladt.