Custom CSS i Joomla!

Du kan lave din egen styling af alle elementer på din hjemmeside. Vil du fx kunne vise et rundt billede eller have en særlig effekt på links i din tekst? Du kan også ændre på hvordan dine moduler ser ud  – det hele definerer du i filen 'custom.css' som du selv opretter under din template. 

Og det er ikke så svært! Du skal igang med at lære lidt om CSS og hvordan du forbinder de enkelte elementer med den kode du skriver. I dette eksempel lærer du at lave et kvadratisk billede om til et cirkel rundt billede. Du lærer også at style et helt almindeligt link i din tekst som ikke findes andre steder på nettet.

Men først skal vi lige en tur ned i dine template filer.

Opret filen custom.css

Først skal du oprette filen 'custom.css'. Klik på Udvidelser > Skabeloner – din template er markeret med en gul stjerne. Til højre for din template står dit skabelon navn – klik på navnet – nu er du det sted hvor alle de filer der bruges af din template befinder sig. Du skal passe på hvad du ændrer i – med mindre du er helt sikker på hvad du gør!

Klik på knappen Ny fil for at oprette custom.css.

I pop-up vinduet skal du markere mappen CSS i venstre side > tast navnet på filen 'custom' i feltet Filnavn > vælg filtypen css i næste felt og klik Opret.

Nu vender du tilbage til din skabelon filoversigt og står automatisk på din nye fil – klar til at lægge din egen CSS kode ind.

Redigér i custom.css filen

Nu kan du gå igang med at lægge din CSS kode ind. Start med at finde en struktur på din kode så du nemt kan finde frem til de ændringer du laver.

Du kan skrive en bemærkning i koden der fortæller noget om din ændring:

/* Bemærkninger skal stå inde i mellem disse tegn */

Sørg fx også for, at gruppere de forskellige elementer og områder du styler på. Det kan løses på denne måde:

/* Styling af html elementer */

/* Styling af <div> elementer */

/* Styling af moduler */

På den måde er det nemmere at overskue koden – for det er ikke her du kommer særlig tit.

Cirkel rundt billede

Start med at sætte et billede ind i din artikel. Den bedste virkning får du ved at beskære billedet som et kvadratisk billede. På den måde er du helt sikker på at centrum i billedet også bliver centrum i det runde billede.

samtale bowle

Inden du klikker Opdate skal du klikke på fanen Advance og ud for Classes taster du navnet på din CSS class – det kan fx være 'img-circle'.

Nu er du klar til at definere CSS koden for class'en img-circle i din custom.css fil. Klik Udvidelser > Skabeloner og klik på linket til skabelonfilerne til højre for din template.

Klik på CSS mappen og på filen custom.css. Indsæt nedenstående kode i filen og klik Gem og luk.

/* round image */
.img-circle {
border-radius: 50%;
}

Den første linie er din egen bemærkning. I koden begynder du med et punktum foran det class navn som du valgte 'img-circle' herefter et mellemrum og så taster du to {} også kaldet tuborg-klammer eller curly brackets på engelsk. Din CSS kode skal til enhver tid stå imellem de to {}.

En CSS kode består af en eller flere 'statements' hvilket betyder at du skal skrive og definere et statement af gangen adskilt af semikolon. I dette eksempel skal du kun skrive ét statement som er 'border-radius: 50%;

For at du kan overskue koden er det en god idé at skrive ét statement pr linie.

Når du publicerer din artikel med dit kvadratiske billede – er billedet nu blevet cirkel rundt.

samtale bowle