Last modified: January 28, 2025 at 11:07pm
Back to top

What is a theme?

Themes define the visual look and feel of your site – both the public-facing content and the administrative UI. The modules and configuration that make up your site determine which content is displayed on the pages of your site. The theme determines the HTML markup and CSS styling that wraps the content.

Drupal CMS’s default theme, Olivero, is a good choice for building your first sites and becoming more familiar with how the software works. As your needs evolve, you can install community contributed themes from Drupal.org, or create a custom theme that closely adheres to your brand and UX needs.

Guidance for creating custom themes for Drupal CMS can be found in the Drupal.org community documentation page "Theming Drupal".

Back to top

Configure the public-facing theme

The default Drupal CMS theme, Olivero, has options for adding a custom logo, and changing the overall color scheme of your site. Contributed or custom themes may have different configuration options. But they’re all found and changed in the same way.

To configure the Olivero theme with a custom logo and color scheme:

  1. Navigate to Appearance (/admin/appearance) using the administrative toolbar.

  2. Under Installed themes, you will find Olivero for Drupal CMS listed as your default theme. Under Olivero for Drupal CMS (default theme), click Settings.

    A card component displaying the 'Olivero for Drupal CMS (default theme)' with a preview image of a website featuring Earth and Moon images. It describes Olivero as a front-end theme optimized for Drupal CMS, with a 'Settings' link below.

  3. Under Logo image, toggle off Use the logo supplied by the theme, if necessary.
  4. Under Upload logo image, locate a logo file and upload it to your site.
  5. Under Olivero Utilities, you can choose to use a different color scheme for the theme. Choose from a list of existing color schemes or enter a color, and the theme will generate a new scheme based on that color.

  6. Click the Save configuration button at the bottom of the page.

    A form for customizing the settings for the Olivero theme, including toggles for page element display, logo image upload, favicon usage, mobile menu settings, and color scheme adjustments. The 'Olivero Color Scheme' is set to 'Blue Lagoon (Default)'. A 'Save configuration' button is at the bottom.

  7. Verify your changes by selecting Back to site at the top of the page.

🔥Tip: Drupal CMS’s admin theme Gin can be configured following a similar procedure allowing you to customize the colors and other behaviors of the administration UI.

Back to top

Finding new themes

Themes can not currently be found, and acquired, using the built in project browser. To use a contributed theme, you’ll need to download it from Drupal.org and add it to your project using Composer. For more details about accomplishing this, see:

Back to top

Install a theme

Once a theme has been downloaded to your site using Composer, you can install it. Themes available for use are listed in the Appearance area (admin/appearance).

The Drupal CMS Appearance page showing a list of installed themes: 'Olivero for Drupal CMS (default theme),' 'Easy Email Theme 1.0.0,' 'Olivero 11.1.1,' 'Claro 11.1.1,' and 'Gin 4.0.2 (administration theme).' And uninstalled themes. The 'Administration theme' dropdown is set to 'Gin,' with a 'Save configuration' button at the bottom of the page.

To change the theme and the appearance of your site, a theme must first be installed, and then set as the default theme. To install a theme:

  1. Navigate to Appearance > (/admin/appearance).
  2. Locate the new theme under Uninstalled themes and click Install and set as default to use it. All public-facing (non-administrative) pages on the site will now use this new theme.
Back to top

Wrap-up

Drupal CMS allows you to customize the logo and color scheme of your site using the default theme Olivero. You find, and install, additional community contributed themes on Drupal.org. To truly make your site, and your brand shine, you’ll need to create a custom theme that incorporates your organization’s unique visual style.

Back to top

Additional resources

Back to top