Dempo

Documentation for the Depmo theme

Documentation for the Depmo theme.

How to style custom content in CKEditor 5

Introduction

With Drupal planning to ship with CKEditor 5 which has a much improved DX and tooling on the Drupal side, it's helpful to know how to style custom content in CKEditor 5. These styles can range from minor UI improvements on your WYSISYG editor to styles essential to match your default (front-end) theme or the content you are editing.

How to style content in CKEditor 5

In this tutorial I will show you how to style custom content from your default theme to CKEditor 5

With Drupal planning to ship with CKEditor 5 which has a much improved DX and tooling on the Drupal side, it is helpful to know how to style custom content in CKEditor 5. These styles can range from minor UI improvements on your WYSISYG editor to styles essential to match your default (front-end) theme or the content you are editing.

Z-indexes in Drupal 8+

Working with z-indexes (layers) in Drupal, themers may need to do some hunting around to know if something they are moving up or down in the stack is going to cover, or be covered by an element that is themed by a core module or theme. To save themers the time of finding out what layer things are on, below is a table showing all of the instances of z-index in core. These z-indexes are present in every core theme unless specified otherwise or the value of the second column is a theme. 

Defining a theme with an .info.yml file

To create a theme for Drupal 8 or later, you need to first create a THEMENAME.info.yml file that provides meta-data about your theme to Drupal. This is similar to how modules and installation profiles are being defined, and as such, it is important to set the 'type' key in the file.info.yml to 'theme' in order to differentiate it.

This page provides an example fileTHEMENAME.info.yml and an overview of the information that the file can contain.

Drupal theme folder structure

A Drupal theme is a collection of files that control the presentation layer, which defines how your site's content is structured and styled. Drupal supports custom themes and sub-themes (variations on an existing theme). The only required file for a theme is the .info.yml file, but most themes utilize additional files for styles, scripts, templates, and more.

Pages

Subscribe with RSS Subscribe to RSS - theme