New Class: Drupal 8 Theming
We’re happy to add a large and highly-requested new class to the OSTraining library today, Drupal 8 Layout and Theming.
This class is a hands-on introduction to designing your Drupal 8 site. You’ll learn how to customize your Drupal site with CSS, HTML, Javascript, custom fonts and more.
To take this class, you should already have good Drupal 8 site building skills, plus a knowledge of CSS, HTML and some PHP.
- In the first part of the class, you’ll learn how Drupal 8’s theming system works. You’ll see how PHP, HTML, CSS, Javascript and Twig combine to allow you to design your site.
- In the second part of the class, you’ll build your first custom theme. You’ll create all the architecture needed for a theme, from the files and folders to the external scripts and mobile breakpoints.
- In the third part of the class, you’ll get a deeper understanding of all the elements found in a typical theme folder and how to customize them.
- In the fourth part of the class, you’ll take an existing design and turn it into a complete Drupal theme!
Outline of the Drupal 8 Theming Class
Getting Started
- Introduction to Drupal 8 Theming
- What You’ll Need for This Class
- Setting up Your Environment
Introduction to Themes
- How Does Drupal Theming Work?
- Who are Drupal Themers?
- Finding and Evaluating Contributed Themes
- Installing Themes
- Static, Configurable and Responsive Themes
Build Your First Theme
- Building a Custom Theme
- Add a Screenshot and Logo
- Clear the Theme Cache
- Add Regions to a Drupal Theme
- Add Libraries to a Drupal Theme
- Add CSS to a Drupal Theme
- Add External Scripts to a Drupal Theme
- Add Google Fonts to a Drupal Theme
- Advanced YML File Options
- Mobile Breakpoints
- Mobile Breakpoints Exercise
- Drupal 8 Theming Quiz 1
Customizing Your Theme
- Introduction to Theme Customization
- Anatomy of a Drupal Theme
- Drupal Coding Standards
- Introduction to Twig Template Files
- Template Overrides in Drupal
- Installing the Devel Module
- A Drupal Template Override Demo
- Creating a Node Template Override
- Creating a Maintenance Page Template Override
- Add Custom Regions
- Overriding Drupal Breacrumbs
- Using Devel Kint
- Drupal 8 Theming Quiz 2
Base Themes and Subthemes
- Introduction to Base Themes and Subtheming
- Best Practices for Subthemes
- Create a Bartik Subtheme
Setting Up The Theme
- How to Match an Existing Design
- Creating the Custom Theme
- Adding Block Regions
Site Building
- Site Building for Our Theme
- Create a Services Content Type
- Create a Banner Content Type
- Adding Content, Part 1
- Adding Content, Part 2
Views
- Creating Custom Blocks
- The Services View
- The Blog View
- The Frontpage Banner View
Template Overrides
- Create Template Overrides
- Overrides for Frontpage Content
- Adding CSS and Images
Final
- How Would You Do That in Drupal?
- Drupal 8 Theming Quiz 3
Am amazed after refer that post really that one worth information and i like that kind of information,not only i like that post all peoples like that post,because of all given information was very excellent.
[url=http://www.thinkittraining.in/informatica]Informatica Training in Chennai[/url]
FINALLY!!! Can’t wait to get started.
Thanks guys!
@AnthonySnowboards Thanks. This class ended up being pretty long, so we split it up. There’s a 2nd class coming this week: “How to take an existing design and convert it to Drupal 8”
WOW! Even more great news! Looking forward to both. This should hopefully help me learn how to turn my custom designed site into a full fledged Drupal 8 site.
So I just finished the How to Design Drupal 8 Themes course and it definitely ends abruptly. I know you said the 2nd class is coming this week so I’m hoping the rest of it is in there. (Also, it’s the end of the week 😉 ???? ).
Just a note: The last two videos in that first part (Overriding Drupal Breadcrumbs and Using Devel Kint) kind of threw me off since the page he was looking at was now way more developed than where I was at that point. I know he said he went back to add the video but during the Devel Kint video, it seemed like he was even further along and since I hadn’t added images to the articles yet (wasn’t in any videos), the example he was giving about adding {{ content.field_image }} custom styling didn’t help me.
Hopefully the second part to this will be out very soon.
Very grateful for this course as it’s helped me a lot so far.
@AnthonySnowboards Thanks for the great feedback. That Kint video was added later and it might be worth removing, perhaps to a blog post.
I’ve been wrestling with these extra videos, and I think we’ll publish them as an addition to this main class. It will make for a very long class but you’re right … the current videos do stop abruptly.
@AnthonySnowboards Could you check the new (and longer) class now?
Just finished it.
I can definitely now say that I feel a whole lot more comfortable attempting to create my own custom theme.
The rest of the videos answered a bunch of my lingering questions as well.
I feel like this course was very well done once all videos were added.
Are there any other “custom theming-type” courses in the pipeline?
@AnthonySnowboards Thanks! Yes, more to come. We’re just filming a class that is specifically about Twig.