Monthly Archives: February 2024

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