[gelöst] Eigene Theme für Drupal 8 Erstellen
Eingetragen von MacLeod (42)am 15.05.2018 - 12:05 Uhr in
Guten Tag Community,
habe bei der Erstellung vom eigenen Themes ein Problem.
Ich finde im ganzen Forum keine genaue Angabe, wo ich das neue Theme Erstellen sol.
Wie man es erstellt, finde ich sehr viel, aber keine genaue Verzeichnis Angabe für Drupal 8.x
mein Verzeichnis sieht etwa so aus.
/sites/default/files/
Aber ich habe in anderen Forum gelesen, das ich dass neue Theme ins Verzeichnis speichern Soll,
sites/all/themes
Aber das gibt es bei meinen Drupal 8 nicht.
Kann mir einer weiter helfen?
Gruß
MacLeod
- Anmelden oder Registrieren um Kommentare zu schreiben
Bei Drupal 8 kommen die
am 15.05.2018 - 12:16 Uhr
Bei Drupal 8 kommen die eigenen Themes direkt nach /themes, auch ein selbst erstelltes.
.
Werner
drupal-in-duesseldorf.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *
Alles Klar... Wieder zu
am 15.05.2018 - 12:30 Uhr
Alles Klar...
Wieder zu kompliziert gedacht...:-(
Danke...
hi,habe das Verzeichnis im
am 15.05.2018 - 14:17 Uhr
hi,
habe das Verzeichnis im Installations Ordner gefunden.
Habe da alle Erstellten Datein, blue_alpha.info.yml und blue_alpha.libraries.yml hochgeladen.
Aber wenn ich unter Drupal Design gehe, und es Aktualisieren,
dann zeigt er das erstellt Themen nicht an.
blue_alpha.info.yml
name = Blue_Alpha
description = Themes Erstellung
core = 8.x
engine = phptemplate stylesheets
[all][] = style.css stylesheets
[all][] = layout.css
stylesheets[all][] = print.css
regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer
blue_alpha.libraries.yml
global-styling:version: VERSION
css:
base:
css/layout.css: {}
Kannst du mir weiter helfen?
Gruß
Die theme-Dateien sollten in
am 15.05.2018 - 18:16 Uhr
Die theme-Dateien sollten in einem Ordner liegen, der bei Dir blue_alpha heißen sollte und nicht direkt im /themes Verzeichnis. Dieser Ordner gehört dann nach /themes.
.
Werner
drupal-in-duesseldorf.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *
Guten Morgen, danke das du
am 16.05.2018 - 11:16 Uhr
Guten Morgen,
danke das du geantwortet hast.
Also: ich habe Alle Themen-Datein im Ordner Alpha_Blue eingefügt.
Und am Anfang ging es nicht mit der Konfiguration was hier gepostet habe.
Alte Konfiguration
name = Blue_Alpha
description = Themes Erstellung
core = 8.x
engine = phptemplate stylesheets
[all][] = style.css stylesheets
[all][] = layout.css
stylesheets[all][] = print.css
Neue Konfiguration
name: Alpha_Blue
type: theme
description: 'Erstes Theme Erstellung'
# version: VERSION
version: '8.x-1.3'
core: '8.x'
project: 'Blue'
screenshot: images/screenshot.png
stylesheets[all][]: css/styles.css
Mit dieser Neuen Konfiguration lässt sich das Themen einbinden.
Nun habe ich nur das Problem, dass er den screenshot & stylesheets nicht einbinden lässt.
screenshot & stylesheets liegen ja im ganz bestimmten Ordner.
screenshot liegt im alpha_blue/images
stylesheets liegt im alpha_blue/css
Die meisten Infomation finde ich nur mit = und nicht mit :
= 7.x
: 8.3x 'Befehl'
soviel habe ich schon mitbekommen.
Gruß
MacLeod
Guten Morgen,dass einbinden
am 13.10.2018 - 09:19 Uhr
Guten Morgen,
dass einbinden habe ich ohne Problem hinbekommen.
Ich habe nun das Problem, dass er die css nicht ladet.
Kann mir einer sagen wo das Problem ist.
blue_alpha.info.yml
name: Blue_Alpha
description: 'Erstes Theme Erstellung'
type: theme
# version: VERSION
version: '8.x-1.3'
core: '8.x'
project: 'Blue'
screenshot: images/screenshot.png
stylesheets[all][]: css/styles.css
blue_alpha.libraries.yml
global-styling:version: VERSION
css:
base:
css/layout.css: {}
Gruß
MacLeod
In der .info.yml-Datei fehlen
am 13.10.2018 - 10:17 Uhr
In der .info.yml-Datei fehlen wesentliche Teile nämlich die Anbindung der Libraries und die Regions. Als Beispiel meine Ableitung des Seven-Themes, die ich my_seven genannt habe
name: My Seventype: theme
base theme: seven
description: 'My deviation of the Seven Theme for additional CSS'
alt text: 'My deviation of the Seven Theme for additional CSS'
package: Core
# version: VERSION
core: 8.x
libraries:
- my_seven/global-styling
regions:
header: 'Header'
pre_content: 'Pre-content'
breadcrumb: Breadcrumb
highlighted: Highlighted
help: Help
content: Content
page_top: 'Page top'
page_bottom: 'Page bottom'
sidebar_first: 'First sidebar'
regions_hidden:
- sidebar_first
Die Zeile
stylesheets[all][] = print.cssist alte Syntax und wird nicht mehr beachtet. Alle CSS-Dateien werden in den Libraries angebunden..
Werner
drupal-in-duesseldorf.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *
Guten Morgen, danke für den
am 14.10.2018 - 09:20 Uhr
Guten Morgen,
danke für den Tipp.
Aber was muss ich in der blue_alpha.libraries.yml abändern, damit meine css Datei geladen wirt?
zurzeit taucht immer wieder der Fehler auf : Auf der Website ist ein unvorhergesehener Fehler aufgetreten. Bitte versuchen Sie es später nochmal.
blue_alpha.info.yml
name: Blue Alpha
type: theme
base theme: Blue
description: 'Erstellung Theme'
package: Core
# version: VERSION
core: 8.x
libraries:
- blue_alpha/global-styling
regions:
header: 'Header'
pre_content: 'Pre-content'
breadcrumb: Breadcrumb
highlighted: Highlighted
help: Help
content: Content
page_top: 'Page top'
page_bottom: 'Page bottom'
sidebar_first: 'First sidebar'
regions_hidden:
- sidebar_first
screenshot: images/screenshot.png (wenn ich die Zeile einfüge kommt der Selben Fehler wie oben)
Deine Vorlage habe ich etwas an meine abgeändert.
Mein Verzeichnisse:
themes/blue_alpha/
themes/blue_alpha/images/
themes/blue_alpha//css/
themes/blue_alpha/js/
blue_alpha.libraries.yml
global-styling:version: VERSION
css:
base:
css/styles.css: {}
gruß
MacLeod
Tritt der Fehler auch ohne
am 14.10.2018 - 11:35 Uhr
Tritt der Fehler auch ohne Dein eigenes Theme auf?
Leitest Du Dein Theme ab, oder ist es ein vollständig neues? (in dem Fall kann es kein Base-Theme geben!!)
Falls abgeleitet, ist der Name des Base Themes korrekt? (Maschinennamen sind klein geschrieben!)
Mehr fällt mit zunächst dazu nicht ein.
.
Werner
drupal-in-duesseldorf.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *
hi, beim ersten versuch war
am 14.10.2018 - 12:16 Uhr
hi,
beim ersten versuch war es ein Ganz neues Themes erstellt. Und da kam auch der Fehler.
Jetzt habe ich einen 2. Versuch gestartet und habe eine Kopie von Bartik 8.6.1 gemacht,
und nur den Namen erstmal geändert. (Verzeichnisse & Datein) Da taucht der Fehler nicht mehr auf.
Nur ist es komisch, das dass Themes was ich kopier habe und umbenannt habe "blue"
über meinen Bildschirmrand geht. Soll heißen, dass die Linke Navigation (suche & Werkzeug) nur 1cm zu sehen ist. lach
Das Orginal wirt richtig angezeigt...
Gruß
MacLeod
Guten Morgen, woran kann es
am 16.10.2018 - 04:18 Uhr
Guten Morgen,
woran kann es liegen, das dass Themes über den Bildschirmrand geht?
Weiß einer Rat?
Gruß
Ich kann dir diese Anleitung
am 18.10.2018 - 22:47 Uhr
Ich kann dir diese Anleitung besten Gewissens empfehlen für Theme Erstellung, Orderstruktur und wie die Dateien im eigenen Theme richtig eingebunden werden:
https://www.drupal.org/docs/8/theming
Grüße Jenna
Hallo Ist deine Seite online
am 31.10.2018 - 21:31 Uhr
Hallo
Ist deine Seite online zu erreichen?
pidru
Hi, ja in der Test
am 31.10.2018 - 23:53 Uhr
Hi,
ja in der Test Umgebung.
https://drupal.watcher.bplaced.net/
Grus
Was meinst Du mit gehtt über
am 01.11.2018 - 08:27 Uhr
Was meinst Du mit gehtt über den Rand hinaus?
Guten Morgen,als ich das
am 01.11.2018 - 08:49 Uhr
Guten Morgen,
als ich das Theme erstellt habe, ist mir das erst gar nicht aufgefallen.
Dann als die Seite über 2 Monitor lief, habe ich es bemerkt.
Das Themen geht über 2 Monitore, und das ist nicht OK.(Siehe Bilder)
Und ich habe bemerkt, dass die css Datei nicht in meiner code enthalten ist, siehe Bild
Gruß
PS: meine css Datei liegt im Verzeichnis: drupal/themes/blue/css/layout.css
Wenn Du unter Konfiguration >
am 01.11.2018 - 13:17 Uhr
Wenn Du unter Konfiguration > Entwicklung > Leistung die CSS-Dateien auf "aggregiert" beläßt, kannst Du nicht sehen, ob Deine CSS-Datei eingebunden wird oder nicht. Also dort zunächst den Haken wegnehmen, die Caches leeren und danach noch mal prüfen.
.
Werner
drupal-in-duesseldorf.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *
hallo, danke für den
am 01.11.2018 - 14:24 Uhr
hallo,
danke für den Tipp...
hier alles was unter css zu finden ist.
Also sie wirt geladen die css layout.css
<title>Willkommen bei WATCHER Entwicklungsumgebung | WATCHER Entwicklungsumgebung</title>
<style media="all">
@import url("/core/assets/vendor/normalize-css/normalize.css?phijao");
@import url("/core/misc/normalize-fixes.css?phijao");
@import url("/core/themes/stable/css/system/components/ajax-progress.module.css?phijao");
@import url("/core/themes/stable/css/system/components/align.module.css?phijao");
@import url("/core/themes/stable/css/system/components/autocomplete-loading.module.css?phijao");
@import url("/core/themes/stable/css/system/components/fieldgroup.module.css?phijao");
@import url("/core/themes/stable/css/system/components/container-inline.module.css?phijao");
@import url("/core/themes/stable/css/system/components/clearfix.module.css?phijao");
@import url("/core/themes/stable/css/system/components/details.module.css?phijao");
@import url("/core/themes/stable/css/system/components/hidden.module.css?phijao");
@import url("/core/themes/stable/css/system/components/item-list.module.css?phijao");
@import url("/core/themes/stable/css/system/components/js.module.css?phijao");
@import url("/core/themes/stable/css/system/components/nowrap.module.css?phijao");
@import url("/core/themes/stable/css/system/components/position-container.module.css?phijao");
@import url("/core/themes/stable/css/system/components/progress.module.css?phijao");
@import url("/core/themes/stable/css/system/components/reset-appearance.module.css?phijao");
@import url("/core/themes/stable/css/system/components/resize.module.css?phijao");
@import url("/core/themes/stable/css/system/components/sticky-header.module.css?phijao");
@import url("/core/themes/stable/css/system/components/system-status-counter.css?phijao");
@import url("/core/themes/stable/css/system/components/system-status-report-counters.css?phijao");
@import url("/core/themes/stable/css/system/components/system-status-report-general-info.css?phijao");
@import url("/core/themes/stable/css/system/components/tabledrag.module.css?phijao");
@import url("/core/themes/stable/css/system/components/tablesort.module.css?phijao");
@import url("/core/themes/stable/css/system/components/tree-child.module.css?phijao");
@import url("/core/themes/stable/css/contextual/contextual.module.css?phijao");
@import url("/core/assets/vendor/jquery.ui/themes/base/core.css?phijao");
@import url("/core/assets/vendor/jquery.ui/themes/base/button.css?phijao");
@import url("/core/assets/vendor/jquery.ui/themes/base/resizable.css?phijao");
@import url("/core/assets/vendor/jquery.ui/themes/base/dialog.css?phijao");
@import url("/core/themes/stable/css/quickedit/quickedit.module.css?phijao");
@import url("/core/themes/stable/css/views/views.module.css?phijao");
</style>
<style media="all">
@import url("/core/themes/stable/css/toolbar/toolbar.module.css?phijao");
</style>
<style media="screen">
@import url("/core/themes/stable/css/tour/tour.module.css?phijao");
</style>
<style media="all">
@import url("/core/themes/stable/css/contextual/contextual.toolbar.css?phijao");
@import url("/core/themes/stable/css/toolbar/toolbar.menu.css?phijao");
@import url("/core/themes/stable/css/contextual/contextual.theme.css?phijao");
@import url("/core/themes/stable/css/contextual/contextual.icons.theme.css?phijao");
@import url("/core/assets/vendor/jquery.ui/themes/base/theme.css?phijao");
@import url("/core/themes/seven/css/components/quickedit.css?phijao");
@import url("/core/themes/stable/css/quickedit/quickedit.theme.css?phijao");
@import url("/core/themes/stable/css/quickedit/quickedit.icons.theme.css?phijao");
@import url("/core/themes/stable/css/toolbar/toolbar.theme.css?phijao");
@import url("/core/themes/stable/css/toolbar/toolbar.icons.theme.css?phijao");
@import url("/core/themes/stable/css/user/user.icons.admin.css?phijao");
@import url("/modules/admin_toolbar/admin_toolbar_tools/css/tools.css?phijao");
@import url("/core/themes/stable/css/shortcut/shortcut.theme.css?phijao");
@import url("/core/themes/stable/css/shortcut/shortcut.icons.theme.css?phijao");
@import url("/modules/admin_toolbar/css/admin.toolbar.css?phijao");
</style>
<style media="all">
@import url("/themes/blue/css/base/elements.css?phijao");
@import url("/themes/blue/css/layout.css?phijao");
@import url("/core/themes/classy/css/components/progress.css?phijao");
@import url("/core/themes/classy/css/components/dialog.css?phijao");
@import url("/core/themes/classy/css/components/action-links.css?phijao");
@import url("/core/themes/classy/css/components/breadcrumb.css?phijao");
@import url("/core/themes/classy/css/components/button.css?phijao");
@import url("/core/themes/classy/css/components/collapse-processed.css?phijao");
@import url("/core/themes/classy/css/components/container-inline.css?phijao");
@import url("/core/themes/classy/css/components/details.css?phijao");
@import url("/core/themes/classy/css/components/exposed-filters.css?phijao");
@import url("/core/themes/classy/css/components/field.css?phijao");
@import url("/core/themes/classy/css/components/form.css?phijao");
@import url("/core/themes/classy/css/components/icons.css?phijao");
@import url("/core/themes/classy/css/components/inline-form.css?phijao");
@import url("/core/themes/classy/css/components/item-list.css?phijao");
@import url("/core/themes/classy/css/components/link.css?phijao");
@import url("/core/themes/classy/css/components/links.css?phijao");
@import url("/core/themes/classy/css/components/menu.css?phijao");
@import url("/core/themes/classy/css/components/more-link.css?phijao");
@import url("/core/themes/classy/css/components/pager.css?phijao");
@import url("/core/themes/classy/css/components/tabledrag.css?phijao");
@import url("/core/themes/classy/css/components/tableselect.css?phijao");
@import url("/core/themes/classy/css/components/tablesort.css?phijao");
@import url("/core/themes/classy/css/components/tabs.css?phijao");
@import url("/core/themes/classy/css/components/textarea.css?phijao");
@import url("/core/themes/classy/css/components/ui-dialog.css?phijao");
@import url("/core/themes/classy/css/components/messages.css?phijao");
@import url("/themes/blue/css/components/block.css?phijao");
@import url("/themes/blue/css/components/book.css?phijao");
@import url("/themes/blue/css/components/breadcrumb.css?phijao");
</style>
<style media="all">
@import url("/themes/blue/css/components/captions.css?phijao");
@import url("/themes/blue/css/components/comments.css?phijao");
@import url("/themes/blue/css/components/contextual.css?phijao");
@import url("/themes/blue/css/components/demo-block.css?phijao");
@import url("/themes/blue/css/components/dropbutton.component.css?phijao");
@import url("/themes/blue/css/components/featured-top.css?phijao");
@import url("/themes/blue/css/components/feed-icon.css?phijao");
@import url("/themes/blue/css/components/field.css?phijao");
@import url("/themes/blue/css/components/form.css?phijao");
@import url("/themes/blue/css/components/forum.css?phijao");
@import url("/themes/blue/css/components/header.css?phijao");
@import url("/themes/blue/css/components/help.css?phijao");
@import url("/themes/blue/css/components/highlighted.css?phijao");
@import url("/themes/blue/css/components/item-list.css?phijao");
@import url("/themes/blue/css/components/list-group.css?phijao");
@import url("/themes/blue/css/components/list.css?phijao");
@import url("/themes/blue/css/components/main-content.css?phijao");
@import url("/themes/blue/css/components/menu.css?phijao");
@import url("/themes/blue/css/components/messages.css?phijao");
@import url("/themes/blue/css/components/node.css?phijao");
@import url("/themes/blue/css/components/node-preview.css?phijao");
@import url("/themes/blue/css/components/page-title.css?phijao");
@import url("/themes/blue/css/components/pager.css?phijao");
@import url("/themes/blue/css/components/panel.css?phijao");
@import url("/themes/blue/css/components/primary-menu.css?phijao");
@import url("/themes/blue/css/components/search-form.css?phijao");
@import url("/themes/blue/css/components/search-results.css?phijao");
@import url("/themes/blue/css/components/secondary-menu.css?phijao");
@import url("/themes/blue/css/components/shortcut.css?phijao");
@import url("/themes/blue/css/components/skip-link.css?phijao");
@import url("/themes/blue/css/components/sidebar.css?phijao");
</style>
<style media="all">
@import url("/themes/blue/css/components/site-branding.css?phijao");
@import url("/themes/blue/css/components/site-footer.css?phijao");
@import url("/themes/blue/css/components/table.css?phijao");
@import url("/themes/blue/css/components/tablesort-indicator.css?phijao");
@import url("/themes/blue/css/components/tabs.css?phijao");
@import url("/themes/blue/css/components/text-formatted.css?phijao");
@import url("/themes/blue/css/components/toolbar.css?phijao");
@import url("/themes/blue/css/components/featured-bottom.css?phijao");
@import url("/themes/blue/css/components/password-suggestions.css?phijao");
@import url("/themes/blue/css/components/ui.widget.css?phijao");
@import url("/themes/blue/css/components/vertical-tabs.component.css?phijao");
@import url("/themes/blue/css/components/views.css?phijao");
@import url("/themes/blue/css/components/buttons.css?phijao");
@import url("/themes/blue/css/components/image-button.css?phijao");
@import url("/themes/blue/css/components/ui-dialog.css?phijao");
@import url("/sites/default/files/color/blue-6dc46873/colors.css?phijao");
</style>
<style media="print">
@import url("/themes/blue/css/print.css?phijao");
</style>
Aber warum wirt das Theme nicht richtig angezeigt...
Gruß
Dein Theme hat nur beim
am 01.11.2018 - 17:09 Uhr
Dein Theme hat nur beim #main-wrapper eine festgelegte Breite von 1290px. Body, #page, header und footer sind also durch die Window-Größe Deines Browsers bestimmt. Wenn Deine System Konfiguration mit zwei Monitoren zuläßt, daß ein Browserfenster Platz auf zwei Monitoren bekommt, zieht sich also auch die Webseite über diesen Bereich. Da der #main-wrapper durch eine Auto-Margin rechts und links zentriert wird, liegt auch der in der Mitte des Gesamtfensters, also evtl. auch über mehr als einen Monitor. Das ist aber alles so gemäß Deines Layouts korrekt. Wo hast Du Das Problem?
.
Werner
drupal-in-duesseldorf.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *
hi,danke für die Hintergrund
am 02.11.2018 - 09:37 Uhr
hi,
danke für die Hintergrund info.
Ich hatte noch nie, dass die Webseite sich über mehere Monitore sich streckt. Und ich habe schon selbst
normale Webseiten Erstellt ohne CMS, aber das hatte ich noch nie.
Aber man lernt immer was dazu. danke.
Muss man immer die cache löschen, wenn man beim Themes was verändert?
Gruß
css Datei wirt nicht geladen
am 02.11.2018 - 13:32 Uhr
hi,
das beantworte meine Frage von ganz oben immer noch nicht.
Mein selbst erstelltes Theme, da wirt die style.css Datei nicht geladen.
sto_dgi.info.yml
name: Sto Dgi
description: Themes für Star Trek Online
base theme: stable
type: theme
core: 8.x
screenshot: images/screenshot.png
regions:
header: 'HEADER'
pre_content: 'Pre-content'
breadcrumb: Breadcrumb
highlighted: Highlighted
help: Help
content: Content
page_top: 'Page top'
page_bottom: 'Page bottom'
sidebar_first: 'First sidebar'
footer: Footer
regions_hidden:
- sidebar_first
libraries:
- sto_dgi/global-css
- sto_dgi/global-js
sto_dgi.libraries.yml
global-styling:
css:
theme:
css/style.css: {}
global-js:
js:
js/main.js: {}
dependencies:
- core/jquery
Ordnungsstruktur:
drupal/themes/sto_dgi
drupal/themes/sto_dgi/css/style.css
drupal/themes/sto_dgi/js/
drupal/themes/sto_dgi/images/screenshot.png
Kann mir jemand den Grund dafür nennen?
Gruß
GELÖST
am 04.11.2018 - 13:46 Uhr
An die ganze Community,
der Fehler wurde mit hilfe von wla gefunden.
Die 2 Datein, sto_dgi.info.yml & sto_dgi.libraries.yml
waren soweit alle in Ordnung und auch die Ordnungsstruktur.
In beiden Datein, dürfen auf keinen FALL TAB verwendet werden. Das war bei mir der Fehler, warum meine css datei nicht geladen wurden ist.
Danke nochmal für die Unterstützung wla!!!!
Gruß
MacLeod