Main Menu

search

You are here

Home

Drupal: Create a custom theme

[last updated: 2024-01-15]
Drupal home page
Drupal Themes
-----

this page needs to be completely reorganized...

  • On this page:
    • There are several procedures here, all to create a sub-theme.

    • -------------------------------------------------------------------

  • General notes:
    • Sub-themes are derivatives of a base theme.
    • The most minimal theme only requires two files: [themeName].info.yml and [themeName].libraries.yml
    • The sub-theme must have a different name than its parent. The name may not contain spaces or special characters.
      The name must start with an alpha character, and can only have lowercase letters, numbers and underscores.
    • The sub-theme shall be located in a directory with the same name as the sub-theme.
      This directory will be inside the sites/[yourSiteName]/themes/ folder
            (or in sites/all/themes/ if it will be used for more than one site)
    • The .info and .libraries files must be in this same folder.

    -------------------------------------------------------------------

  • Basic Steps to create a sub-theme:
    from: https://gauravmahlawat.github.io/how-to-create-drupal-10-theme.html
          Very good outline of general steps, some detail, but needs way more info for my level of ignorance...
      1. "Choose a base theme: Start by choosing a base theme to use as a starting point for your custom theme. Drupal 10 comes with several base themes that you can use, such as Classy, Stable, or Bartik. Alternatively, you can choose a contributed base theme from Drupal.org, such as Bootstrap or Zen.

      2. Create a new theme directory: Create a new directory for your custom theme under the Drupal /themes directory. Choose a name for your theme, and make sure it is unique and does not conflict with any existing theme names.

      3. Create the necessary files: Create the necessary files for your custom theme, including the .info.yml, .theme, and .css files. The .info.yml file is where you define the basic information about your theme, such as the name, description, and core version. The .theme file is where you can add custom PHP code to modify the behavior of your theme. The .css file is where you add the styles for your theme.

      4. Define regions: Define the regions of your theme where you want to place content, such as the header, footer, sidebar, or main content area. You can do this in the .info.yml file using the regions key.

      5. Customize templates: Customize the templates used by your theme to control the output of Drupal's core and contributed modules. You can do this by creating template files in your theme directory, and using the correct naming convention.

      6. Add custom styles and scripts: Customize the styles and scripts used by your theme by adding them to the .css file or .theme file. You can also add JavaScript code to modify the behavior of your theme.

      7. Test your theme: Test your theme by installing and enabling it on a Drupal 10 site, and making sure it looks and behaves as intended.
        -------------------------------------------------------------------

      These are the general steps to create a Drupal 10 theme. Keep in mind that creating a theme can be a complex process that requires knowledge of HTML, CSS, PHP, and Drupal's theming system. It's also important to follow Drupal's best practices and coding standards to ensure compatibility and maintainability."

    -------------------------------------------------------------------

  • Create a sub-theme using Drupal-10 StarterKit:
    • StarterKit allows you to generate a new sub-theme,
      using either the default StarterKit base theme (currently stable9), or your choice of base theme.
    • Drupal docs:
      These two links are both good, though there is overlap between them.
      https://www.drupal.org/docs/core-modules-and-themes/core-themes/starterk...
      https://www.drupal.org/docs/develop/theming-drupal/creating-sub-themes

    • Procedure I followed (customized for my installation):
      • inside my dev-10 "project" folder - execute:
          $ ddev php web/core/scripts/drupal generate-theme [newThemeName]
                (Note: I must preface the php command with 'ddev' because php is not installed globally, but only inside the ddev container )

        -or- in order to use a different base theme than the default stable9:

          $ ddev php web/core/scripts/drupal generate-theme --starterkit=[source_theme_name] [newThemeName]
          The actual command I used:
            $ ddev php web/core/scripts/drupal --starterkit=stark generate-theme jc0x3

          Note: I did not need to specify the entire path to the stark core theme
          But: I did need to edit stark.info.yml and set starterkit: true

    • If Successful:
      web/themes/ [newThemeName] folder will be created,
      AND: [newThemeName] will be displayed in Appearance as an uninstalled theme.
        after creation, you must go back and change stark.info.yml back to starterkit: false,
        and since your new theme will inherit the starterkit: true, you must also change it to false.
        Finally, add a line to .info of your new theme:
        'base theme': stark
    • However: I was NOT successfull:
      the new theme was created, but it did not show up on Appearance page.
      some suggestions from forum that there is a permissions problem...

    • Tracking for updates & bug fixes:
      When you create a new sub-theme, it is highly recommended to do whatever
      in order that future updates and bug fixes to your base theme can be incorporated into your theme without crashing it.
      See "Tracking Upstream Changes" in https://www.drupal.org/docs/core-modules-and-themes/core-themes/starterk...
      See also: https://www.specbee.com/blogs/starterkit-theme-in-drupal-10

    -------------------------------------------------------------------

  • Create a sub-theme "manually":

    -------------------------------------------------------------------

  • Links:

    -------------------------------------------------------------------

Powered by Drupal