Create a Custom Theme

In step eight of the Build Tools guide, learn how to create a custom theme as part of the build tooks workflow.

Tweet

This lesson demonstrates how to create a custom theme from the default Bartik theme using the Terminus Drupal Console plugin. For comprehensive documentation on how to create themes for Drupal 8, see Theming Drupal 8 on drupal.org.

  1. Start by creating a new branch based off the tip of master, then push it up to GitHub:

    git checkout -b custom-theme master
    git push origin custom-theme
  2. Export local environment variables to define your site name and Multidev environment to easily copy and paste example commands in the next sections (replace pantheon-d8-composer-project):

    export SITE=pantheon-d8-composer-project
    export ENV=pr-custom-t
  3. Wait for CircleCI to build a new Pantheon Multidev environment (pr-custom-t), then use the generate:theme command as shown below to start the process of creating a subtheme:

    terminus drupal $SITE.$ENV -- generate:theme
  4. Commit theme files generated in the last command to the Multidev environment, either from the Site Dashboard or from the command line. We don't need this particular commit to be built by CircleCI, so we'll add [ci skip] to the commit message to skip:

    terminus env:commit $SITE.$ENV --message="Generate subtheme files [ci skip]"
  5. Pull down your last commit from GitHub to your local:

    git pull origin custom-theme
  6. Run the following command to copy the regions: section of Bartik's default info file to your new custom theme's info file:

    cat web/core/themes/bartik/bartik.info.yml | sed -n -e '/regions:/,$p' >> web/themes/custom/amazing_theme/amazing_theme.info.yml
  7. Copy the logo over from Bartik to your custom theme:

    cp web/core/themes/bartik/logo.svg web/themes/custom/amazing_theme/logo.svg
  8. echo "global-styling:
        version: VERSION
        css:
          theme:
            css/main.css: {}" > web/themes/custom/amazing_theme/amazing_theme.libraries.yml
  9. Create a new css directory for your custom theme along with a new file named main.css inside it. To test that your theme is working, add some very obvious styling such as an orange border around the content region:

    mkdir web/themes/custom/amazing_theme/css && echo "#content {
        border: 4px solid orange;
      }" > web/themes/custom/amazing_theme/css/main.css
  1. Commit changes to your custom theme and push up to GitHub:

    git commit -m="Create amazing theme css and library files"
      git push origin custom-theme
  2. Once the build finishes from the last step, active your new theme and rebuild the cache:

    terminus drupal $SITE.$ENV -- theme:install --set-default amazing_theme

    Visit the site in the web browser, it should reflect the change provided by the custom theme:

    terminus env:view $SITE.$ENV

    Modified css

  3. You can use the method described in an earlier lesson to export configuration changes made in the last step or you can do it from the command line using Terminus and Drush:

    terminus drush $SITE.$ENV -- config-export --yes
  1. Commit your changes in Pantheon from the command line with Terminus to sync with GitHub:

    terminus env:commit $SITE.$ENV --message="Activate new custom theme"
  2. Return to GitHub and compare the custom-theme branch against master. You should see a few commits that are able to be merged. Click Create Pull Request and go through your team's standard peer review process.