Category Archives: Drupal 10

Add CSS to a custom Drupal 10 theme tutorial

Posted on by

This tutorial will guide you through the steps of adding CSS styling to a custom Drupal 10 theme.

  1. Start with a Drupal 10 base theme (you’ll need to rename the theme)
  2. Add a css folder to the theme’s folder 
    
# File Structure
core
modules
profiles
sites
themes
--contrib
--custom
----d10_custom_theme_add_css
------css
--------style.css
------d10_custom_theme_add_css.info.yml 
------d10_custom_theme_add_css.libraries.yml
  3. Add a style.css file in the css folder 
    
/**
* @file
* D10 custom theme global style CSS file.
*
* Enter any custom CSS below this comment.
*/

.custom-class {
    color: fff;
}
  4. Add a d10_custom_theme_add_css.libraries.yml file to the theme’s folder 
    
# d10_custom_theme_add_css.libraries.yml 
global-styling:
    css:
    theme:
        css/style.css: {}
  5. Add the libraries: mapping scalar and sequence to the d10_custom_theme_add_css.info.yml file 
    
# d10_custom_theme_add_css.info.yml
name: D10 Custom Theme (add css)
type: theme
description: 'A Drupal 10 custom theme base with custom css.'
core_version_requirement: '^10'
base theme: 'false'
libraries:
    - d10_custom_theme_add_css/global-styling
regions:
    header: 'Header'
    content: 'Content'
    sidebar_first: 'Sidebar first'
    footer: 'Footer''
  6. Congratulations! You now have a custom theme with custom css.

More information

Create a basic custom Drupal 10 theme tutorial

Posted on by

This tutorial will give you everything you need to create a very basic custom theme for Drupal 10. It will just show up as an available theme in Drupal and not much more.

  1. Create a folder named d10_custom_theme_base inside the themes/custom/ folder of your Drupal 10 installation. 
    
core
modules
profiles
sites
themes
--contrib
--custom
----d10_custom_theme_base
  2. Save a text file with the name d10_custom_theme_base.info.yml inside the created folder.
  3. Edit the d10_custom_theme_base.info.yml file to include the following: 
    
name: D10 Custom Theme Base
type: theme
description: 'A Drupal 10 custom theme base.'
core_version_requirement: '^10'
base theme: 'false'
regions:
    header: 'Header'
    content: 'Content'
    sidebar_first: 'Sidebar first'
    footer: 'Footer'
  4. Congratulations! You have a custom theme.

More information