Templates aanpassen 2: css (CSS)

Deze les gaat over het maken van aanpassingen

aan je Template

Het uiterlijk van een Joomla-site

wordt bepaald door het Template wat je gebruikt

en het Template is in dit geval

een eenvoudig Template

dat we zelf gemaakt hebben

op basis van Google's Materialize.

Het is heel logisch dat je in een

Template soms dingen aantreft

die je niet bevallen.

Bij voorbeeld het gebruik van het lettertype

of de kleur van je kopteksten.

We gaan kijken hoe we zelf wijzigingen kunnen

aanbrengen aan het Template

In een vorige les hebben we een custom.css stijlblad gemaakt

wat we gekoppeld hebben aan de index.php van ons template

in deze les zie je hoe je de aanpassingen aan je website maakt.

Ik ben hier in de voorkant van mijn website

Ik ben hier in de voorkant van mijn website

Ik ga laten zien hoe ik een wijziging maak aan een koptekst.

Ik heb een bewuste keuze gemaakt om als browser Firefox te gebruiken,

omdat Firefox van die mooie Webdesigner-tools aan boord heeft.

Ik ga ze je laten zien.

Ik ga ze je laten zien.

om te beginnen neem ik een artikel, artikel

waar ik een goed zicht heb op een geïsoleerde kopregel

Die wil ik graag blijvend aanpassen qua styling

Daarvoor gebruik ik in Firefox

de web-ontwikkelaars tools

en specifiek: de inspector.

De inspector van Firefox geeft me een paneel

waarbij ik de code van de pagina zie

en daarnaast, rechts,

de css-scripts

die zorgen van de styling van de bewuste codes.

Handig is met name het gereedschap 'de element-kiezer'.

helemaal links in beeld. Ik selecteer hem

en ik ga nu in de pagina naar het object

dat ik wil aanpassen.

Ik klik

en ik kan nu zien

dat het element h heet,

dat is de HTML-code voor een koptekst,

aan de andere kant van het paneel, hoe die h gestyled is.

Wat ik nu kan doen is -met de MAC- control-klikken in dit paneel,

of -met de PC- rechter muis-klikken, en een nieuwe regel toevoegen.

Dat geeft me een nieuwe coderegel voor de styling van het h element.

De styling die ik wil aanbrengen plaats ik tussen de accolades.

De kleur bijvoorbeeld, voor tekst, heet in css color:# en daarna

en daarna de zes karakters tellende kleurcode

bijvoorbeeld: ff staat voor rood.

en ik zie: het reageert.

ik zou nog een

specificatie kunnen aanbrengen, bijvoorbeeld het lettertype.

of, in css-termen, de font-family:

zou ik kunnen veranderen in

Georgia.

en je ziet: het werkt.

De code die ik op dit moment heb aangebracht,

is natuurlijk niet definitief, want ik heb hem immers nergens bewaard.

en ik kan hem ook niet bewaren in Firefox.

Maar ik kan hem wel kopiëren en plakken

in mijn css-blad

custom .css. En dat ga ik doen.

Ik kopieer mijn nieuw gemaakte regel h,

en ik switch naar Sublime text,

waar ik de code plak in het nieuwe lege custom.css blad

Daar Save ik, ik ga terug naar de website, en daar Refresh ik.

en ik zie: de verandering is blijvend.

Wat ik in het css-codedeel van dit scherm kan zien

is dat er inderdaad een kleur rood gedefinieerd is

in stijlblad custom.css op regel .

Door code te plaatsen in mijn custom.css-file

kan ik het hele template kortom van kleur, van typografie en van vorm veranderen.