Adding a theme

In the theme we’ll define how things look to the user. You know HTML, CSS, JS and such stuff.

What is a theme

A theme defines the way the content from Sulu is presented on the website. In general it’s not more than a simple folder containing all the required twig templates, images, scripts, fonts and all the other assets you want to use in this specific theme.

You can have multiple themes in one Sulu installation. Every webspace can decide which theme to use, by a simple key in the webspace configuration file already described in Setup a Webspace. This means that it is also very easy to switch between different themes.

This feature is not shipped with a minimal sulu-installation. But can be easily integrated.

Installation

First add the dependency to the SuluThemeBundle in your composer.json file.

composer require sulu/theme-bundle

To enable it add the following line into the config/bundles.php file:

return [
    ...

    Sulu\Bundle\ThemeBundle\SuluThemeBundle::class => ['all' => true],
];

Add the following configuration in the file config/packages/liip_theme.yaml, which you have to create on your own:

# LIIP Theme Configuration
liip_theme:
    themes: ["default"]
    active_theme: "default"
    load_controllers: false
    path_patterns:
        app_resource:
            - '%kernel.project_dir%/templates/themes/%%current_theme%%/%%template%%'

This will configure a default theme which can be enabled in the config/webspaces/<webspace>.xml file by adding:

<theme>default</theme>

Create a theme

To create a theme you have to create a new folder in the templates/themes folder of your application with the name of the new theme. Afterwards you have to fill this folder with all the used templates in the webspace. These templates go into another subfolder in your theme, which you have to reference later.

For more concrete information about the structure of these templates you should check the Creating a Page Template.

Enable the theme

For resolving the templates we are using the LiipThemeBundle, which requires you to register your themes. You can do that in your LiipThemeBundle configuration located at config/packages/liip_theme.yml. Add the name of your theme folder to the following list:

liip_theme:
    themes: ["default", "your-new-shiny-theme"]