Eigen css bestand gebruiken

Ik heb vanuit Bootstrap 3 een sub-thema aangemaakt met de naam Seniorama.
Het nieuwe thema is geselecteerd in Drupal 8 en werkt.
Nu zou ik de CSS van Bootstrap 3 in dat nieuwe thema willen 'overrulen'.

Dit staat in het bestand /themes/Seniorama/css/style.css:

body{
background-color:blue;

color: black;

font-family: 'Tahoma';
}

En dit staat in het bestand /themes/Seniorama/subtheme.info.yml:

core: 8.x
type: theme
base theme: bootstrap

name: 'Seniorama'
description: 'Seniorama is een subthema van Bootstrap.'
package: 'Bootstrap'

regions:
navigation: 'Navigation'
navigation_collapsible: 'Navigation (Collapsible)'
header: 'Top Bar'
highlighted: 'Highlighted'
help: 'Help'
content: 'Content'
sidebar_first: 'Primary'
sidebar_second: 'Secondary'
footer: 'Footer'
page_top: 'Page top'
page_bottom: 'Page bottom'

global-styling:
css:
component:
css/style.css: {}

libraries:
- 'Seniorama/global-styling'

Toch blijft de achtergrond wit. Kan iemand mij zeggen wat ik verkeerd doe?

Drupalversie: 
8.x
Auteur: 
Patrick Ruytings
afbeelding van jo.w
Door jo.w op 11 april, 2019 - 18:08

In elke browser zit tegenwoordig een inspector om je code en css te bekijken. Gebruik die om te testen en gebruik asset injector om je css aan te passen. Waarschijnlijk heb je niet de juiste class of id.

En zet je site online in een subdirectory zodat we kunnen meekijken.

Jo

Door Patrick Ruytings op 11 april, 2019 - 18:41

Die Asset Injector is echt wat ik nodig heb! Bedankt. :-)
Nog een laatste vraagje: waar zitten de default css- en html-bestanden van een thema?

afbeelding van jo.w
Door jo.w op 12 april, 2019 - 12:17

Van de default css-bestanden moet je afblijven, als er een update van het theme komt ben je al je wijzigingen kwijt. Werk met de Asset_injector (combinatie van de css_injector en js_injector uit D7) en je behoudt je eigen aanpassingen. Je kan zelfs per gewijzigd onderdeel aparte css-bestanden maken, dus bijvoorbeeld ééntje met al je aanpassingen voor de header, ééntje met alle aanpassingen voor je content-blok, ééntje met je aanpassingen voor tekst, etc... Vergemakkelijkt het zoeken als je nadien iets wil wijzigen.

En html-bestanden zijn er al helemaal niet. Alles zit in php-bestanden (en nog wat andere types) en daar moet je écht uit blijven als je geen gedegen kennis hebt.

Ik denk dat je best eens wat tijd investeert om via het volwassenenonderwijs één of 2 Drupal-cursussen te gaan volgen. Ik weet dat het misschien wat ver is maar hier geven ze hele goeie, ook snelcursussen op 4 zaterdagen. De css voor de website is trouwens volledig met de asset-injector gedaan.

Jo

Door Patrick Ruytings op 12 april, 2019 - 18:18

Bedankt voor je antwoord! Je bent een hele grote steun voor mij en dat mag gezegd worden!

Ik ben met zelfstudie bezig:
1) https://www.standaardboekhandel.be/p/html-en-css-voor-dummies-9789045353531
2) https://www.zelfstudie.be/cursus-drupal8-theme-maken.php

Ik wil van default css bestanden afblijven maar wou er gewoon eentje open doen om te zien hoe de code gestructureerd is.

Ik weet bijvoorbeeld dat ik via volgende code info over de achtergrond kan meegeven.
body{
background-color:blue;
color: black;
font-family: 'Tahoma';
}

Ik had gehoopt dat deze manier van werken ook vlot zou lopen voor andere onderdelen.
Bijvoorbeeld voor het linker zijmenu:

left-sidebar{
opdracht;
...
}

Of voor het voetmenu:

footer{
opdracht;
...
}

Enzoverder. Maar blijkbaar klopt mijn idee niet (volledig)?

Voor wat betreft HTML: hoe kan je dan wijzigingen hieraan aanbrengen?

afbeelding van Niek Kloots
Door Niek Kloots op 12 april, 2019 - 18:43

Als je een sub-website kan maken, dan zou ik zeggen doen.
Daarna lekker met de default.css en dergelijke gaan spelen en zien wat er aan verandert.

Een niet te ingewikkeld thema om het een en ander uit te proberen is Danland
De style.css, daar is er maar 1 van en zijn er niet tig verschillende.
De templates spreken ook voor zich.
Een uitgewerkt thema, waarvoor niet jaren later nog een update nodig is.
Daarom kan je indien gewenst het thema verbouwen -zonder bang te zijn, dat bij een update je veranderingen verloren gaan- direct in de bestanden van het thema zelf.

http://familiekloots.nl
hobby: https://noww.nl, https://dldsa.nl en http://openwaterswimming.eu

Door Patrick Ruytings op 17 april, 2019 - 18:31

Goede tip, Niek!

Bedankt.

Door Patrick Ruytings op 14 april, 2019 - 16:59

Ik heb via Firefox gekeken naar de CSS-code van mijn linkerzijmenu.
Ik heb die bijgewerkt met Asset Injector.

Als ik dan ga kijken naar het resultaat is het prima!
Maar als ik als administrator uitlog, is de aanpassing verdwenen.

Heb je een tip voor mij?

Door Patrick Ruytings op 14 april, 2019 - 17:47

Mijn uitleg klopt niet volledig. Ik heb vastgesteld als je naar de site www.seniorama.one gaat, de kleur eerst onveranderd blijft. Maar als je op een willekeurige link in het menu klikt, is de kleur wel zoals gewenst. Vreemd...

Door Patrick Ruytings op 14 april, 2019 - 18:34

En nu werkt het altijd...

afbeelding van jo.w
Door jo.w op 16 april, 2019 - 14:35

Je moet de cache van je site en je browser eerst leeg maken om de veranderingen te zien.

Jo

Door Patrick Ruytings op 17 april, 2019 - 18:29

Bedankt, Jo!

Ik ben nog aan het zoeken naar de CSS-code om de header en de footer schermbreed te tonen (volledige breedte van het scherm).

afbeelding van Niek Kloots
Door Niek Kloots op 28 april, 2019 - 10:04

Dar zijn meerdere oplossingen voor.
width: 100%;
is de meest simpele.
https://stackoverflow.com/questions/1719452/how-to-make-a-div-always-full-screen

http://familiekloots.nl
hobby: https://noww.nl, https://dldsa.nl en http://openwaterswimming.eu

afbeelding van Niek Kloots
Door Niek Kloots op 11 april, 2019 - 21:19

Dat is niet bij elk thema hetzelfde.
Kijk maar eens voor de css.

Het core thema Bartik heeft bijv. de css op drupal-8.6.5\core\themes\bartik\css met twee sub-mappen en enkele andere bestanden, maar een ander core thema Seven op drupal-8.6.5\core\themes\seven\css heeft 4 sub-mappen zonder andere bestanden.

Dus zal je het gebruikte thema moeten noemen voor een juist antwoord.

http://familiekloots.nl
hobby: https://noww.nl, https://dldsa.nl en http://openwaterswimming.eu

Door Patrick Ruytings op 12 april, 2019 - 18:21

Ik wil ook jou uitdrukkelijk bedanken voor je bijstand!

Ik heb een sub-theme aangemaakt van het thema Bootstrap 3 en ik heb dat thema de naam Seniorama gegeven.

afbeelding van Niek Kloots
Door Niek Kloots op 12 april, 2019 - 18:42

Als je dat thema Bootstrap in zijn huidige vorm goed vind, dan zou ik die niet meer updaten.
Daarna zou je gewoon in het hoofdthema aanpassingen kunnen doen zonder daarvoor een module te moeten gebruiken.
Ik heb dat voor mijzelf toegepast bij het door mij gebruikte thema stoolk.
(Hetgeen een aangepaste Danland thema is.)

http://familiekloots.nl
hobby: https://noww.nl, https://dldsa.nl en http://openwaterswimming.eu

Door Patrick Ruytings op 17 april, 2019 - 18:30

Bedankt, Niek!

afbeelding van jo.w
Door jo.w op 18 april, 2019 - 12:26

Een tip Patrick: schrijf je in voor de snelcursus Drupal over 5 zaterdagen in Lokeren: https://drupal8.support/drupal8cursus

De onderste is de snelcursus. Ik ken de lesgever van de eerste en de laatste, de middelste weet ik niet wie die geeft. Het zijn cursussen voor iemand die al wat van Drupal kent.

Jo

afbeelding van belba
Door belba op 28 april, 2019 - 07:05

Ivm het aanpassen van de HTML. Dit kan perfect in TWIG template die verantwoordelijk is voor de weergave. Je kan er je code wijzigen of gewoon extra gewenste HTML code schrijven. Toegegeven dat dit reeds gevorderd is, maar als je verder gaat in het themen van Drupal krijg je er vroeg of laat mee te maken. Persoonlijk vind ik Twig makkelijk aan te leren, toch wat de basis betreft.

Bookmark and Share

Drupal is een geregistreerd merk van Dries Buytaert. | Powered by Pantheon.

Drupal.be/Drupal.nl is de website van de Nederlandstalige Drupalgemeenschap.

onomatopee