Wo sind in Drupal 9 di css files?
Eingetragen von michaelkurt (47)
am 09.01.2022 - 17:49 Uhr in
am 09.01.2022 - 17:49 Uhr in
Hallo,
habe eine Webseite mit Drupal 9 erstellt, mit Edux Theme. Bei Drupal 7 wusste ich ein wenig, wie ich das Theme verändern konnte, nun komme ich aber nicht zurecht. Moechte einige Regionen in der Größe ändern (box, padding), schaue über google chrome nach (Untersuchung der Seite), weiss dann dass ich bsp.-weise menu-wrapper verändern muss, weiss aber nicht, wo ich in den Dokumenten suchen muss. Könnt ihr mir einen Rat geben? Oder ein Tutorial empfehlen?
Vielen Dank Michael
- Anmelden oder Registrieren um Kommentare zu schreiben
Die CSS Dateien sind unter
am 09.01.2022 - 19:09 Uhr
Die CSS Dateien sind unter
/themes/contrib/Name des Themes
wenn es ein nachträglich installiertes Theme ist, und unter/core/themes/Name des Themes
bei den mit Drupal mitgelieferten.Änderungen direkt vorzunehmen ist aber nicht sehr empfehlenswert, du solltest dir dafür ein eigenes Theme machen. Dazu kannst du ein vorhandenes kopieren und dann anpassen.
Hier ein paar Seiten mit Anleitungen:
https://www.drupal.org/docs/theming-drupal
https://www.specbee.com/blogs/how-to-create-custom-drupal-9-theme
https://gole.ms/guidance/your-definitive-guide-creating-drupal-9-theme
Danke, benutze das edu theme,
am 11.01.2022 - 16:45 Uhr
Danke, benutze das edu theme, habe dies kopiert und versucht als subtheme zu benutzen. Wollte die header - slider region ändern, ein anderes Hintergrundbild. Finde aber nicht, wie ich die main-wrapper region anders stylen kann.
Es empfieht sich, eine eigene
am 11.01.2022 - 17:19 Uhr
Es empfieht sich, eine eigene CSS-Datei in die Library des Themes einzubauen. Dazu editierst Du die Datei edux.libraries.yml und fügst eine Zeile für eine eigene CSS-Datei ein z.B. my.css. Achtung eine .yml-Datei ist zickig und mag keine Tab-Characters sondern nur Blanks als Einrückung. Sorge dafür, daß Deine eigene CSS-Datei am Ende der Liste der CSS-Dateien steht. Dann kannst Du darin alle Deine Änderungen sammeln. Beispiel:
global-styling:
version: VERSION
css:
theme:
css/style.css: {}
css/my.css:{}
.......
.
Werner
drupal-training.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *
Hallo WLA habe hier beim
am 27.01.2022 - 18:08 Uhr
Hallo WLA habe hier beim Suchen Deine Antwort auf diese Frage gefunden, die ich auch hatte. Aber immer wenn ich es so probiere mit my.css, dann erscheint eine Seite, die nicht richtig geladen wird. Eigentlich müsste die Seite doch unverändert bleiben, wenn in mycss gar nichts steht oder ?
Hallo Werner, Du hattest mir
am 02.07.2023 - 15:06 Uhr
Hallo Werner, Du hattest mir damals diesen Tipp gegeben.
ich habe my.css hinzugefügt, dann eine Veränderung der Schriftgrösse vorgenommen im my.css:
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--heading-font);
color: var(--bold-color);
}
P {
font-family: var(--heading-font);
color: var(--bold-color);
font-size:2rem;
Aber dennoch ändert sich die Schriftgrösse nicht.
Anbei Screenshot von Firefox.
Die Css Datei (extern?) steht nun unter sites/default/files/css und heisst:
http://localhost/drupal10/web/sites/default/files/css/css_IBxK9gW-g4FBYW...
wenn ich darin die Änderung von p durchführe und speichere passiert aber nichts. Trotzdem bleibt die Schriftgrösse wie zuvor.
Was verstehe ich nicht?
Vielen Dank!
Die CSS-Anweisungen werden
am 02.07.2023 - 16:19 Uhr
Die CSS-Anweisungen werden über Selectoren gesteuert. h1 ist etwa so ein Selector. Meist kommen Selectoren aber als Kombinationen vor z.B. .body .node h1 { .... } Das ist ein h1 nach einer Class node, die nach einer Class body folgt. Ein solcher genauerer Selektor überschreibt dann Deine einfache h1-Anweisung. Wenn Du wissen willst, wie der aktuelle Selector für eine spezielle Stelle lautet, mußt Du mit Inspect im Firefox arbeiten. Da siehst du genau welche Selectorkombination wirksam ist. Genau diese Kombination mußt Du dann überschreiben.
.
Werner
drupal-training.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *