Main Menu

search

You are here

Home

Drupal Themes

[last updated: 2024-01-19]
Drupal home page

theme management
-----

These notes are written in the context of Drupal 10. Things here may or may not be valid for earlier distributions.


This page needs re-write/verification ...


      On This Page:
  • definition/description of themes
  • see what themes are installed on your site
  • how to find and install other themes.

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

  • A Theme is a collection of files that define the "look and feel" of your website.
    The look and feel are differentiated from the content, which is the actual words or images on your site.
    The theme defines the position, size, color, borders, etc. of the content, as well as dynamic aspects like responses to mouse actions.
      In general, themes do their magic using CSS (see: CSS in Drupal)
  • There are thousands of themes available to be used on a Drupal site. A few themes ("core" themes) are included with the Drupal installation.
    For example, the olivero theme is the default theme for Drupal 10.2.1
    Other themes ("contributed" themes) can be found on the web and loaded and installed into your site.
  • The set of files that constitute your theme will be located in a directory, with the name of the directory being the name of the theme.
    • The theme directories will be located in different places, depending on whether they're core or contributed.
    • Core theme directories are located in [root] /core/themes
    • Contributed themes loaded from Appearance page with a downloaded .tar.gz file will have their theme directories in [root] /themes
    • Contributed themes loaded with composer will have their theme directories in [root] /themes/contrib

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

  • See the themes that are installed on your site:
    open a browser to your website and log in.
    click Appearance in top menu bar.
    scroll down to examine available options.
      Note: This page will show all themes that are "loaded" into your site.
      Some will be listed as being "installed", while others will be "uninstalled."
      You can click appropriate buttons to change the installed/uninstalled status of any theme loaded into your site.
      In addition: the first installed theme listed will be labeled as your "default" theme. This is the theme that is currently active on your site.
      You can select any installed theme as your choice of default/active theme.

  • To select/activate an installed theme:
    • In the block on Appearance page that describes the theme you want,
      click "set as default"
    • scroll to the bottom and click Save Configuration

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

  • If you want a different/new theme:
    You can search the web to find one, or you can customize an existing theme, or you can create a new theme.
    See theme management link above.
    ---------------------------------------------------------

  • To install a theme you find on the web (2 ways to do this):
    • The old way of installing it is:
      • When you find a theme you want, go to its download page and download the .tar.gz file
      • open a browser to your site, log in with admin,
        click Appearance, click Add new theme,
        click browse, navigate to your saved/downloaded .tar.gz, double-click it,
        click Continue, Click go to admin page, click Install.
      • But:
        "Downloads are for manual installation, which is not recommended when using Drupal 8 or later."
        Loading a theme in this way still works, however there are problems that can happen in the future with updates and bug-fixes, for example.

      • If you install a theme this way, it creates a new theme directory in web/themes

      ----------

    • The New Way is to use composer to manage dependencies:
      https://getcomposer.org/doc/00-intro.md#installation-linux-unix-macos
      https://getcomposer.org/download/
      • https://www.drupal.org/docs/develop/using-composer/manage-dependencies
        This link says:
          "Run: $ composer require drupal/theme_name ...
          This needs to be executed at the root of your Drupal install but not at the same level as the core directory."
      • First, this does not work as stated on my site, because I installed my site using ddev, so instead of the quoted instruction, I must execute:
              $ ddev composer require drupal/theme_name
      • Second, I'm confused by terminology as to which directory I should execute this command from:
          My best guesses:
          "core directory" is .../dev-10/web/core
          "at the root of Drupal install" means at .../dev-10
          "project root" = dev-10
          "web root" = "document root" = "root directory" = dev-10/web
      • Third:
        Executing the ddev composer command from either /dev-10 or from /dev-10/web both worked...
        that is, AFTER restarting the site, the new theme showed up on the Appearance page.

      • If you install a theme this way, it creates a new theme directory in web/themes/contrib

      • Confusion about composer.json:
        • themes installed with .tar.gz have a composer.json file in their root directory,
          eg. in web/themes/ [themeName] folder
        • Themes installed with 'compose require...' do not have a composer.json file in their theme directories.
        • However, there is a composer.json file in the project root, that being dev-10 in my installation
          (the 'web' folder is in this same directory)
          and this file has lines for (presumably) those themes I installed with this method...
            those being (at this time):
            d8_blog_theme
            ruhi
            zeropoint
            zuvi

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


      must re-check notes below here...

    • Bottom Line:
      • I've had problems installing themes.
        I have had successes using both methods (.tar.gz and composer), however results are not consistent,
        sometimes seeming that some characteristic of the specific theme constrains which method you can use...
        Sometimes the procedure seems to work, per the install page,
        but the new theme doesn't show up on the Appearance page ...
      • These worked from .tar.gz:
        aristotle
        bootstrap5
        dxpr
        mahi
      • These failed from .tar.gz:
        d8_blog_theme
        fontfolio
        garland

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

  • might need to clear the cache...
    https://www.drupal.org/docs/user_guide/en/prevent-cache-clear.html

Powered by Drupal