[gelöst] Bartik Subtheme css überschreiben
Eingetragen von scaexp (88)am 10.11.2016 - 15:15 Uhr in
Hallo,
ich benutze das Bartik Theme als Subtheme und möchte eine benutzerdefinierte css wie custom.css zum überschreiben einbauen. Kann mir jemand detaillierte Hilfe dazu geben.
Beste Grüße
Karl-Heinz
- Anmelden oder Registrieren um Kommentare zu schreiben
Du mußt eine neue Library in
am 10.11.2016 - 15:50 Uhr
Du mußt eine neue Library in [themename].info.yml eintragen und dann in [themename].libraries.yml eintragen, was zu Deiner Library gehört und wo die CSS-Datei zu finden ist. Sieh Dir den Aufbau dieser beiden Dateien in Bartik dazu an.
.
Werner
drupal-in-duesseldorf.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *
Ich habe es so verstanden: In
am 10.11.2016 - 17:26 Uhr
Ich habe es so verstanden:
In der info.yml habe ich den Eintrag mit dem subtheme skho ergänzt:
name: skho
type: theme
base theme: bartik
description: 'A flexible, recolorable theme with many regions and a responsive, mobile-first layout.'
package: Core
# version: VERSION
# core: 8.x
libraries:
- bartik/global-styling
- skho/global-styling
ckeditor_stylesheets:
- css/base/elements.css
- css/components/captions.css
- css/components/table.css
- css/components/text-formatted.css
In der libraries.yml habe ich den Eintrag custom.css ergänzt:
global-styling:
version: VERSION
css:
base:
css/base/custom.css: {}
css/base/elements.css: {}
component:
css/components/block.css: {}
css/components/book.css: {}
css/components/breadcrumb.css: {}
css/components/captions.css: {}
css/components/comments.css: {}
css/components/contextual.css: {}
css/components/demo-block.css: {}
# @see https://www.drupal.org/node/2389735
css/components/dropbutton.component.css: {}
css/components/featured-top.css: {}
css/components/feed-icon.css: {}
css/components/field.css: {}
css/components/form.css: {}
css/components/forum.css: {}
css/components/header.css: {}
css/components/help.css: {}
css/components/highlighted.css: {}
css/components/item-list.css: {}
css/components/list-group.css: {}
css/components/list.css: {}
css/components/main-content.css: {}
css/components/menu.css: {}
css/components/messages.css: {}
css/components/node.css: {}
css/components/node-preview.css: {}
css/components/page-title.css: {}
css/components/pager.css: {}
css/components/panel.css: {}
css/components/primary-menu.css: {}
css/components/search-form.css: {}
css/components/search-results.css: {}
css/components/secondary-menu.css: {}
css/components/shortcut.css: {}
css/components/skip-link.css: {}
css/components/sidebar.css: {}
css/components/site-branding.css: {}
css/components/site-footer.css: {}
css/components/table.css: {}
css/components/tablesort-indicator.css: {}
css/components/tabs.css: {}
css/components/text-formatted.css: {}
css/components/toolbar.css: {}
css/components/featured-bottom.css: {}
css/components/password-suggestions.css: {}
css/components/ui.widget.css: {}
# @see https://www.drupal.org/node/2389735
css/components/vertical-tabs.component.css: {}
css/components/views.css: {}
css/components/buttons.css: {}
css/components/image-button.css: {}
css/components/ui-dialog.css: {}
layout:
css/layout.css: {}
theme:
css/colors.css: {}
css/print.css: { media: print }
Ich habe es bei einem von Zen
am 10.11.2016 - 18:35 Uhr
Ich habe es bei einem von Zen abgeleiteten Theme (hospizkw) so gelöst:
im hospizkw.info.yml:
libraries:
- hospizkw/base
.....
- hospizkw/wla
und in hospizkw.libraries.yml:
.......
wla:
css:
component:
components/asset-builds/css/wla.css: {}
.
Werner
drupal-in-duesseldorf.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *
Danke für deinen Vorschlag.
am 11.11.2016 - 11:45 Uhr
Danke für deinen Vorschlag. Ich komm trotzdem keinen Schritt weiter. Hab mir auch den Thread : https://www.drupal.org/node/2359981#comment-9264107 vorgenommen, auch damit komm ich nicht an mein Ziel.
Beste Grüße
Karl-Heinz
Dann nimm das angehängte
am 12.11.2016 - 12:51 Uhr
Dann nimm das angehängte Theme. Das ist eine einfache Ableitung von Bartik und heißt my_bartik. Es hat eine eigene CSS-Datei addon.css und ist bereits dafür eingerichtet, diese CSS-Datei mit SASS und Compass zu erstellen, aber das kannst Du ja ignorieren.
.
Werner
drupal-in-duesseldorf.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *
Habe das subtheme my_bartik
am 13.11.2016 - 11:00 Uhr
Habe das subtheme my_bartik installiert und beispielsweise in der addon.css die header Hintergrundfarbe geändert. Ich kann im Entwicklertool die Änderung sogar sehen, wird aber nicht umgesetzt. (Flash all caches durchgeführt).
Dann hast Du die Definition
am 13.11.2016 - 12:08 Uhr
Dann hast Du die Definition nicht präzise genug gemacht. Sieh Dir mit den Entwickler Tools von Chrome oder dem Firebug von Firefox an, welche Anweisung Deine überschreibt und wie die aufgebaut ist. Wenn Du es genau so setzt, sollte Deine Definition wirksam sein.
Man muß sich mit den Selektoren im CSS beschäftigen, damit man genau die Stelle beeinflußt, die man ändern will. Trotzdem kann es passieren, daß eine andere Anweisung "genauer" für den Browser ist. Dann muß man die eigene Definition anpassen.
.
Werner
drupal-in-duesseldorf.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *
Hallo Werner, besten Dank für
am 13.11.2016 - 23:29 Uhr
Hallo Werner,
besten Dank für deine Geduld mit mir. Ich habe tatsächlich eine css Anweisung übersehen und zwar von der color.css war noch eine gradient Anweisung drüber. Es war meine Nachlässigkeit. Das Ganze funktioniert auch mit meinem Subtheme jetzt.
Beste Grüße
Karl-Heinz