Templates aanpassen 1: een custom.css koppelen (Custom CSS)

uit de cursus Starten met Joomla (CMS)

Templates aanpassen 1: een custom.css koppelen (Custom 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 jouw 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

Daarvoor ga ik eerst kijken in de achterkant van het systeem,

welk Template ik precies geselecteerd heb.

Om te kijken welk Template op dit moment actief is,

Om te kijken welk Template op dit moment actief is,

Om te kijken welk Template op dit moment actief is,

ga ik naar Extensions > Templates

en ik zie dat het enige template dat aanwezig is, Starter heet

en dat dat het Default Template is.

ik kan daar op klikken

maar ik zal merken

dat er in dit geval weinig instellingsmogelijkheden zijn aan dit Template

ik Close dit venster.

Om aanpassingen aan het Template mogelijk te maken

moeten we ingrijpen in het Template zelf.

Het Template zelf bestaat uit een aantal PHP-files

en CSS-files.

En met name het laatste

het CSS-file, bepaalt de styling van de website.

daar ga ik naar kijken.

Ik minimaliseer mijn browser even

ik vind hier op mijn bureaublad de HTDOCS-map.

die klik ik open.

daar vind ik de map waar de website in zit die we

op dit moment in gebruik hebben

Les. Ik dubbelklik.

Daarin zit het hele Joomla systeem wat op dit moment functioneert.

In de map Templates

vind ik het Template

dat op dit moment in gebruik is, Starter genaamd.

Ik open deze map.

en deze files bepalen het aangezicht van het Temlplate

Als ik wil ingrijpen in het Template,

moet ik dat doen door de CSS-bladen te bewerken die ik hier zie.

en in dit geval is met name het Style-sheet

en in dit geval is met name het Style-sheet

en in dit geval is met name het Style-sheet

het basis-stylesheet dat de vormgeving van de website bepaalt.

Mijn plan is om de bestaande website ongemoeid te laten,

maar een zogenaamd Custom-stylesheet toe te voegen

een CSS-document

dat ik custom.css zal noemen

Ik doe dat eenvoudig door het huidige style

te kopiëren

en te plakken.

daar is mijn Style kopie

ik noem hem custom

en ik geef hem een plekje bij de andere css-bladen in de map css

Het nieuwe document custom.css

ga ik bewerken in een eenvoudige HTML-editor.

in mijn geval gebruik ik Sublime Text

Ik zie hier de code die eigenlijk behoort

bij het oorspronkelijke style.css

die ga ik allemaal verwijderen.

zoadat mijn custom.css

een leeg stylesheet is.

en ik bewaar het lege blad.

Vervolgens moet ik mijn Joomla template laten koppelen

met het nieuw gemaakte custom.css stylesheet.

Dat doe ik in het document index.php

in de Starter-map. Dat open ik.

Op regel zie ik de code-regel

die het document style.css

koppelt aan de website.

Die regel ga ik hergebruiken.

Ik ga hem selecteren, kopiëren en plakken.

Ik selecteer hem, ik kopieer hem,

en ik plak hem.

op regel heb ik nu een duplicaat van regel .

De naam van de koppeling

ga ik veranderen in custom

nu staat er dat ook het document

custom.css is gekoppeld aan deze template.

En let op: de koppeling staat onder de koppeling naar het stijlblad style.css

zodat wijzigingen in custom.css

voorrang zullen hebben op alle voorgaande stijlen.

Ik save.

En het document index.php sluit ik.

Het document custom.css staat klaar

om straks wijzigingen in aan te brengen.

Hoe dat werkt zie je in een volgende les.