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?
Auteur:
Patrick RuytingsDatum van inzending:
donderdag 11 april 2019 - 14:14
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
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?
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
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?
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.
Goede tip, Niek!
Bedankt.
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?
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...
En nu werkt het altijd...
Je moet de cache van je site en je browser eerst leeg maken om de veranderingen te zien.
Jo
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).
Dar zijn meerdere oplossingen voor.
width: 100%;
is de meest simpele.
https://stackoverflow.com/questions/1719452/how-to-make-a-div-always-full-screen
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.
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.
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.)
Bedankt, Niek!
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.
Succes, Jan