Templates aanpassen 2: css (CSS)

uit de cursus Starten met Joomla (CMS)

Templates aanpassen 2: css (CSS)
Geef een waardering

Hallo vreemdeling,

wat leuk dat je onze site bezoekt. Bekijk gerust een paar video's en als het je bevalt kun je altijd abonnee worden.

Automatisch afspelen

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Starten met Joomla (CMS)

perm_identity Walter van Rooij | video_library 30 video's | query_builder 02:57:24

Volg nu de online cursus Joomla!

Leer hoe je complexe websites kunt maken, met diverse functionaliteiten als een contactformulier, fotogalerij, zoekfunctie tot het creëren van een meertalige website?

Met Joomla bouw je een complete en complexe website met allerlei functionaliteiten zonder dat je verstand hoeft te hebben van programmeren.

Joomla is een CMS (Content Management Systeeem)

Joomla behoort samen met WordPress en Drupal tot de meest populaire CMS systemen. Veel webbedrijven en -designers maken gebruik van een CMS om hierin complexe websites voor hun klanten te bouwen. Waarom zou je het wiel opnieuw gaan uitvinden als er CMS’en bestaan die het fundament voor de website al voor je klaarzetten.
Het grote voordeel van een CMS is dat de klant/opdrachtgever zelf zorg kan dragen voor de content van de website.

Wat ga je in deze online cursus leren?

Je leert allereerst hoe je het programma installeert op je eigen computer zodat je eerst lokaal de website kunt bouwen. Aan het einde van de cursus leer je hoe je de website migreert naar de server waarop de website gehost gaat worden. Je leert hoe je een template installeert en daarna de website gaat inrichten met artikelen, categoriën, menu-onderdelen, modules, plugins en componenten.

Je leert hoe je moet omgaan met de database waar de inhoud van de website in bijgehouden wordt. Hoe je veiligheidsmaatregelen neemt om de database en de website te backuppen. Kortom alle basisvaardigheden die je nodig hebt om een website met Joomla te bouwen, in te richten en online te zetten.

Voor wie is deze cursus bedoeld?

Wil jij leren websites te maken voor klanten en bedrijven die zelf hun site willen vullen met content? Je wilt het meteen goed aanpakken en een gebruikersvriendelijke website maken die goed gevonden kan worden. Dan maak je met Joomla een goede keuze. Je hebt geen enkele voorkennis nodig om deze online cursus te kunnen volgen. Uiteindelijk zul je wel baat hebben bij kennis van html en css. Maar dat kan ook prima na het volgen van deze cursus.

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.