css, Drupal

Drupal thema wijzigen via CSS

Soms wil je een kleine wijziging aanbrengen in een bestaand thema. Je wil één of meerdere stijlelementen wijzigen of een nieuwe stijlelement toevoegen. Kleuren, padding, fonts, etc…

OPMERKING

Als je via de “Inspect” functie van een browser de CSS code van een element bekijkt wordt er verwezen naar een css bestand met een rare lange naam bv van de vorm:
/sites/default/files/css/css_klrjiFmnJTAaqNkq2aWjCnYNTQ22_7ob8_wk5N2mKX0.css?plddw9

DIT IS GEEN FYSIEK CSS BESTAND MAAR EEN GE-CACHED BESTAND.
Het heeft géén zin om hierin wijzigingen aan te brengen want bij een “Clear cache” worden deze bestanden toch gewist !
Je moet op zoek gaan naar de originele bestanden. Deze staan in de map:
/themes/bootstrap_mint/

WERKWIJZE

1. Aggregate CSS afzetten tijdens het aanpassen

Configuration->Performance->
Aggregate CSS files: UIT
Aggregate JavaScript files: UIT

2. Géén wijzigingen aanbrengen in oorspronkelijke thema

Dit heeft géén zin want het wordt overschreven bij een update

3. Ga naar de map /themes/bootstrap_mint/css/

Daar staan 4 bestanden en voeg meteen een nieuw toe:

  • base.css
  • maintenance-page.css
  • media.css
  • style.css
  • pieter.css

In dit bestand zullen we nieuwe of gewijzigde stijlelementen opnemen.

4. Open het bestand /themes/bootstrap_mint/css/bootstrap_mint.libraries.yml

Zoek de regels:

global-components:
Version: VERSION
css:

theme:

css/base.css: {}
css/style.css: {}
css/media.css: {}
css/pieter.css: {}

Voeg daar onderaan dus een extra regel toe: css/pieter.css: {}
Daardoor wordt onze eigen “pieter.css” dus ook geladen.
Bestand “bootstrap_mint.libraries.yml” opslaan en upload.

5. Voeg een nieuw stijlelement toe of wijzig een bestaand

Doe bv. als volgt:

In een drupal-html-pagina: (via “Full HTML”)
<p class=”pieter”>Links</p>

In pieter.css
.pieter { color: red; text-decoration: underline;}

Ander voorbeeld: we wensen de padding rond images in het bootstrap thema te vergroten omdat anders de tekst er tegen plakt. We willen dat niet voor ALLE images doen maar enkel voor degene die behoren tot de klasse “align-left”.

Een element ziet er dan uit als: <img src=”…” class=”align-left”>

De bijhorende CSS is:(dus enkel voor img-elementen met klasse=align-left)

img.align-left:
{
padding-right:10px;
}

6. Configuration->Performance->”Clear Cache” -> Save configuration

Anders zal “pieter.css” en “bootstrap_mint.libraries.yml” niet geladen worden en lijkt het alsof het niet werkt !