Drupal 8 - eigenes Theme - wie beginnen?
Eingetragen von DrupalFan (1646)am 30.05.2016 - 19:59 Uhr in
Es gibt zwar viele Anleitungen, wie man in Drupal 8 ein eigenes Theme erstellt, aber dennoch stellt sich irgendwann folgendes Frage:
Bartik und Seven sind gute Drupal 8 Themes, es gibt auch weitere gute Drupal 8 - Themes zum Downloaden.
Möchte man nun sein eigenes Theme schreiben, wie geht man dann am besten vor, wenn man vorhandene Möglichkeiten von vorhandenen D8-Themes nützen möchte um möglichst wenig "themen" zu müssen.
Eine Möglichkeit ist es, Bartik als base theme zu verwenden:
meintheme.info.yml:
name: Mein Theme
description: 'Drupal 8 Theme'
type: theme
base theme: bartik
core: '8.x'Oder gibt es weitere sinnvolle Vorgangsweisen, um schnell sein eigenes Drupal 8 Theme zu entwickeln möglichst basieren auf einem Standard-Theme (wenn möglich aus dem Core)? Anforderungen: resonsive Design, Einfachheit (Themes für Spezielle Anwendungen/Designs gibt es ja sowieso zum Download, hier geht es um die Einfachheit, wo aber dennoch nur das Frontend der eigenen Seite per CSS angepasst werden soll).
Und Zusatzfrage:
Macht es Sinn, Bartik als "base theme" zu verwenden, wenn Seven als Verwaltungstheme verwendet wird?
Danke.
- Anmelden oder Registrieren um Kommentare zu schreiben
Generell ist es schlau
am 30.05.2016 - 22:03 Uhr
sich ein Basistheme auszusuchen, das dem Ziel schon recht nahe kommt.
Davon macht man Untertheme, das nur die Dinge überschreibt, die man anders machen möchte.
Ein fundiertes HTML- und CSS-Wissen ist dafür wichtig.
Da TWIG ohne PHP-Code auskommt, braucht man sich damit nicht auseinandersetzen.
Der Befehlssatz von TWIG ist klein. Ein bisschen damit beschäftigen sollte man sich aber auch.
Welches Drupal 8 Theme
am 30.05.2016 - 22:49 Uhr
Welches Drupal 8 Theme (möglichst im Core enthalten) kommt dem oben gesetzten Ziel nahe?
Hast Du schon mal ein Drupal 8 Theme basierend auf einem Core Theme erstellt? Welche Drupal 8 Themes hast Du bisher schon eingesetzt?
Es gibt im Packt Verlag das
am 31.05.2016 - 08:33 Uhr
Es gibt im Packt Verlag das Buch (auch als ebook) "Drupal 8 Theming with Twig", das alles abdeckt, was Du so brauchst. Es ist allerdings in Englisch geschrieben.
Base Themes - welche verwendet ihr?
am 31.05.2016 - 08:54 Uhr
Danke für diesen Buchvorschlag.
Drupal 8 Theming with Twig
Table of Contents
Drupal 8 Theming with Twig
Credits
About the Author
Acknowledgments
About the Reviewer
www.PacktPub.com
eBooks, discount offers, and more
Why subscribe?
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
1. Setting Up Our Development Environment
Installing an AMP (Apache, MySQL, PHP) stack
Introducing MAMP
Downloading MAMP
Installing MAMP
A quick tour of MAMP PRO
General settings for MAMP PRO
Host settings
Installing Drupal 8
Downloading Drupal 8
Creating our document root
Creating our host entry
Creating a new database for Drupal
Using phpMyAdmin
Completing Drupal 8 installation
Choosing a language
Choosing a profile
Verifying requirements
Database configuration
Configuring the site
Site maintenance account
Regional settings
Update notifications
Reviewing the new admin interface
Exploring the admin menu
Previewing the interface
Exploring Drupal 8 folder structure
The core folder
The modules folder
The sites folder
The themes folder
Using the project files
Downloading and extracting the exercise files
Database backup
Export settings
Database restore
Using Google Chrome to inspect elements
Summary
2. Theme Administration
What is a theme?
Exploring the Appearance interface
Drupal's core themes
Bartik
Seven
Stark
Classy
Theme states
Installed themes
Uninstalled themes
Default theme
Installing and uninstalling themes
Step one – installing a theme
Step two – uninstalling a theme
Theme settings
Toggling the display of page elements
Logo image settings
Shortcut icon settings
Theme-specific settings
Using prebuilt themes
Installing a new theme
Installing from a URL
Uploading a module or theme archive to install
Manually installing a theme
Cleaning up our themes folder
Managing content with blocks
Exploring the Block layout
Blocks and regions
Demonstrating block regions
Placing blocks into regions
Configuring a block
Managing the title
Managing visibility settings
Content types restriction
Page restriction
Role restriction
Creating a custom block
Managing custom blocks
Exploring the custom block library
Exploring block types
Managing fields
Managing display
Summary
3. Dissecting a Theme
Setting up a local development environment
Managing sites/default folder permissions
Configuring settings.local.php
Disabling CSS and JS aggregation
Disabling render and page cache
Disabling test modules and themes
Default themes versus custom themes
Folder structure and naming conventions
Managing configuration in Drupal 8
Reviewing the new info.yml file
Metadata
Libraries
Defining a library
Overriding libraries
Extending libraries
Attaching a library
Using Twig to attach a library
Using the preprocess functions to attach a library
Regions
The role of templates in Drupal
How templates work
Where to find templates
Creating our first basic theme
Step One – creating a new folder
Step two – create an info file
Step three – copy core templates
Step four – include a screenshot
Step five – installing our theme
Step six – Welcome to Twig
Introducing Twig
Enabling Twig debug
Twig fundamentals
Commenting variables
Setting variables
Printing variables
Dumping variables
Filters
Control structures
Template variables
The role of the theme file in Drupal
Preprocessors and hooks
Overriding variables
Summary
4. Getting Started – Creating Themes
Starter themes
Creating a Bootstrap starter
Understanding grids and columns
Setting up a theme folder
Adding a screenshot
Configuring our theme
Installing our theme
Working with libraries
Adding assets
Creating a library reference
Including our library
Creating a Jumbotron
Step one – managing block content
Step two – hiding the page title
Rethinking our layout
Adding regions
Managing the block content
Using Twig templates
Creating a homepage template
Creating region templates
Working with the Theme layer
Using Devel to print variables
Printing variables from a function
Subthemes
Adding the theme folder
Including a screenshot
Configuring our theme
Installing our theme
Touring Classy
Overriding a library
Summary
5. Prepping Our Project
Walking through the design mockup
Homepage layout
Defining homepage regions and user interaction
Basic page layout
Defining interior regions
Landing page layout
Blog detail layout
Contact page
Search results
Restoring our database snapshot
Creating a custom theme
Setting up theme folders
Adding a screenshot
Creating our configuration file
Installing our theme
Setting up our regions
Setting up our assets
Adding additional assets
Handling default files
Summary
6. Theming Our Homepage
Creating our HTML wrapper
Introducing web fonts
Creating our homepage
Using page templates
Working with static content
Implementing our Header Top region
Creating our Social Icons block
Installing Font Awesome library
Refactoring Header Top region
Implementing our Header region
Adding a logo
Enabling Site branding
Printing our Header region
Creating Block templates
Implementing our search form block
Placing our search form block
Creating a search form block template
Adding custom JavaScript
Creating an input element template
Working with menus
Creating a menu template
Creating System Menu block template
Creating a sticky header
Implementing our Headline Region
Creating our Headline View and Block
Adding our Headlines Block
Printing our Headline region
Configuring FlexSlider library
Attaching a library using Twig
Enable FlexSlider
Implementing Parallax
Adding a scroll effect
Enabling the scroll script
Attaching ScrollTo library using Twig
Implementing our Before Content region
Creating our Services block
Creating our Features block
Refactoring Before Content region
Implementing the footer
Creating our custom blocks
Refactoring our main footer
Footer first
Footer second
Footer third
Footer bottom left
Footer bottom right
Summary
7. Theming Our Interior Page
Reviewing the About Us mockup
Creating our interior page template
Adding our Global Header
Implementing our page title
Working with static HTML
Adding new regions
Reassigning the Page title block
Printing the Title Bar region
Creating a block template
Implementing our main page structure
Creating a Node template
Implementing our Team members section
Prepping our Team Member View
Creating our Team Member View
Managing our Team Members listing block
Formatting Views with CSS
Adding CSS classes to Views
Using Twig variables to rewrite field content
Rearranging View fields
Adding a View header
Refactoring the After Content region
Adding our global footer
Fixing JavaScript errors
Summary
8. Theming Our Blog Listing Page
Reviewing the Blog Listing mockup
Creating our blog listing
Adding a new display mode
Managing the display
Enabling fields
Field label visibility
Formatting fields
Creating a Post Listing view
Using Content Display modes with views
Managing our Post Listing block
Implementing our Node template
Adding CSS classes to Twig
Working with content variables
Using the without filter
Creating our post image slider
Working with field templates
Adding the Owl Carousel library
Using Twig filters for dates
Printing title and teaser
Creating our post metadata
Field templates and taxonomy
Handling comments in Drupal 8
Creating a theme file
Printing our comment count
Adding a read more link
Creating a Categories block
Managing our Categories block
Implementing responsive sidebars
Theming a Block template
Drupal Views and Twig templates
Managing popular versus recent content
Creating our recent posts block
Creating our popular posts block
Sorting views by comment count
Attaching a view to the footer
Managing our popular posts block
Using Twig and Bootstrap tabs
Recent Posts Twig template
Popular Posts Twig template
Using Views-view templates
Creating a Post Teaser Twig template
Adding the About Us block
Implementing the About Us template
Summary
9. Theming Our Blog Detail Page
Reviewing the Blog detail mockup
Previewing our Blog detail page
Creating a Post Full template
Altering fields
Working with comments
Introducing Comment types
Reviewing Default Comment type fields and display
Enabling Post Type Comments field
Creating a Field Comments template
Theming the Comment thread
Enabling user photos for Comment threads
Cleaning up the User Picture field
Creating the Field User Picture template
Date and time formats
Implementing social sharing capabilities
The Add This buttons
Creating a library entry
Attaching the library to our Blog detail page
Displaying buttons
Summary
10. Theming Our Contact Page
Reviewing the contact page mockup
Introducing contact forms
Editing a contact form
Managing form fields
Managing form display
Contact page layout
Adding a Callout block
Creating the Callout block template
Integrating Google Maps into our contact page
Configure Google Maps
Creating our Google Maps block
Creating the Callout Map template
Summary
11. Theming Our Search Results
Reviewing the Search Results mockup
Looking at default Search results
Introducing core search
Indexing content
Editing search pages
Disabling search pages
Working with Search Results templates
Modifying the item list template
Cleaning up each result
Search alternatives
Search API
Installing the Search API
Adding a server
Adding an index
Configuring bundles
Adding fields to our index
Creating a Search Results View
Using the Search index view mode
Adding filter criteria
Placing our exposed search form
Adding our placeholder attribute
Using our search form
Displaying the number of search results
Adding a No Results message
Summary
12. Tips, Tricks, and Where to Go from Here
Working with Local Tasks
Theming local tasks
Working with Status messages
Adding the Highlighted region
Theming our Status message block
Reusing Twig templates
Using extends to share layouts
Working with Twig blocks
Where do we go from here?
Summary
Index
Anhand des Inhaltsverzeichnisses sieht man schon, dass die oben gestellte Frage nicht behandelt wird.
Werde einfach googlen bis ich entsprechende Vorschläge finde.
Es hätte mich interessiert, welche Base Themes andere Drupaler verwenden unter Drupal 8.
Das Buch erklärt, wie man ein
am 31.05.2016 - 12:39 Uhr
Das Buch erklärt, wie man ein Theme ableitet und wie man ein Theme von Scratch aufbaut. Mir reicht das.
Nocheinmal die Fragen
am 31.05.2016 - 13:52 Uhr
Die Frage war welches Base Theme man sinnvollerweise wann verwendet und welche Base Themes ihr bei Euren bisherigen Drupal 8 - Projekten verwendet habt.
Und die Zusatzfrage war: Macht es Sinn, Bartik als "base theme" zu verwenden, wenn Seven als Verwaltungstheme verwendet wird?
Da sowohl Bartik als auch
am 31.05.2016 - 17:59 Uhr
Da sowohl Bartik als auch Seven von Classy abgeleitet sind, wäre das wohl ein sinnvolles Basis Theme, wenn Du eines aus dem Core nehmen willst.
Letztlich ist es immer persönlicher Geschmack. Ich nehme gerne für die Verwaltung ein von Seven abgeleitetes Theme und baue das Frontend-Theme selbst. Bei D7 habe ich dazu gerne Zen als Basis genommen. Mit D8 fange ich gerade erst an.
hier ein Einsteigertutorial
am 31.05.2016 - 18:16 Uhr
https://www.youtube.com/watch?v=a9u0B1F650U
Base Themes - welche verwendet ihr?
am 31.05.2016 - 21:08 Uhr
Das Tuturial beschäftigt sich nicht mit Base Themes, diese waren aber hier Thema.
als Base Theme
am 01.06.2016 - 08:10 Uhr
verwendest du am besten das, was die meisten Dinge, die du realisieren willst, bereits enthält, so dass du nur noch wenig anpassen (überschreiben) musst.
Legst du Wert auf responsive, nimmst die eines, das die Responsivefunktionalität bereits hat.
Alles, was bereits enthalten ist, muss von dir nicht mehr "erfunden" werden.
Natürlich (und da setzt das Tutorial auf) kannst du alles selbst schreiben.
Alles, was du nicht im Theme behandelst, ersetzt der Core mit defaults.
Verwendest du ein Base Theme, wird dieses herangezogen.
Wichtig dabei ist, dass du NIEMALS am Base Theme selbst Änderungen vornimmst, sondern Veränderungen durch Überschreiben im Subtheme erreichst.
Theming in Drupal erweitert das CSS-Prinzip auf ganze Templates.
Das oberste zählt, ist etwas dort nicht definiert, zählt die nächste Ebene darunter.
Übrigens etwas persönliches - deine motzige Art nervt.
Base Themes - welche verwendet ihr?
am 01.06.2016 - 09:41 Uhr
Base Themes - welche verwendet ihr?
Es hätte mich interessiert, welche Base Themes andere Drupaler verwenden unter Drupal 8.
DrupalFan schrieb Base Themes
am 01.06.2016 - 13:57 Uhr
Base Themes - welche verwendet ihr?
Es hätte mich interessiert, welche Base Themes andere Drupaler verwenden unter Drupal 8.
Nervensäge!
Also, bei Drupal 8 habe ich noch kein eigenes Theme erstellt, habe aber gesehen, dass wirklich ziemlich viele Themes auf classy aufsetzen. Wurde weiter oben ja auch schon genannt. CLASSY! Hast Du's gelesen? Noch mal zum Mitschreiben: CLASSY!
Bei Drupal 7 hab ich immer mal gewechselt, mal war es Bootstrap, mal Adaptive Theme, mal noch was anderes (früher gern Genesis). Mit dem von vielen Leuten heißgeliebten Zen bin ich persönlich nie warm geworden.
Und genau da sind wir auch schon beim springenden Punkt: Es kommt doch darauf an, womit DU gut arbeiten kannst. Kannst Du z.B. mit Bootstrap nix anfangen, bringt es ja nichts, wenn hier 90% der Leute sagen: Hey, ich mach das mit Bootstrap.
Um einen Eindruck zu bekommen, kannst Du doch mal auf drupal.org gehen, Dir diverse D8-Themes anschauen, gucken, welche davon als Base Theme ausgelegt sind und wie verbreitet die Dinger sind. Dann hast Du einen ersten Anhaltspunkt.
Noch eine Mutmaßung: Die Leute, die wirklich schon extensive Erfahrung mit Theming für D8 sammeln konnten, werden derzeit wahrscheinlich eine ziemlich gute Auslastung haben und sich nicht gerade hier rumtreiben.
Seven
am 01.06.2016 - 14:55 Uhr
Danke. Bin mir nicht sicher, ob Classy genug ausgereift ist oder genug Details enthält.
Habe jetzt festgestellt, dass mit Seven als base theme einfacher das eigene Theme per CSS gestaltet werden kann, als bei Bartik (bei Bartik muss man einige Dinge per CSS zurücksetzen, bei Seven nicht).
Seven hat aber wiederum
am 02.06.2016 - 13:31 Uhr
Seven hat aber wiederum Classy als Base Theme umd Classy hat gar kein CSS.......