Back-Office Themes

A theme is a set of CSS and/or SCSS files that customize the look and feel of OroPlatform. The theme has the following properties:

Property

Required

Description

name

yes

A unique name

label

no

A string that is displayed in the theme management UI.

styles

yes

The list of CSS and SCSS files that define the theme.

icon

no

The theme’s favicon.

logo

no

A logo that is shown in the theme management UI.

screenshot

no

A screenshot of the theme to be shown in the management UI.

You can create themes in two different ways:

Alternatively, you can customize an existing theme instead of creating a new one from scratch.

Application-specific Themes

Customizing the layout of your Platform application is as easy as defining your custom theme in your application’s configuration using the oro_theme option:

 1# config/config.yml
 2oro_theme:
 3    themes:
 4        mytheme:
 5            styles:
 6                - mytheme/css/main.css
 7                - mytheme/css/ie.css
 8            label: My Theme
 9            icon: mytheme/images/favicon.ico
10            logo: mytheme/images/logo.png
11            screenshot: /mytheme/images/screenshot.png
12    active_theme: mytheme

First, you create a theme named mytheme with the My Theme label that uses two CSS files, main.css and ie.css. Secondly, select the theme to be used by setting its name as the value of the active_theme option.

Reusable Themes

In addition to customizing your own application, you can also provide a theme that can be reused in different applications. To achieve this, specify the theme’s options in the settings.yml file that is located in the Resources/public/themes/<theme-name> directory of your bundle:

1# src/Acme/DemoBundle/Resources/public/themes/acme-theme/settings.yml
2styles:
3    - bundles/acmebundle/themes/acme-theme/css/main.css
4    - bundles/acmebundle/themes/acme-theme/css/ie.css
5label: Acme Demo Theme
6icon: bundles/acmebundle/themes/acme-theme/images/favicon.ico
7logo: bundles/acmebundle/themes/acme-theme/images/logo.png
8screenshot: bundles/acmebundle/themes/acme-theme/images/screenshot.png

To use the theme in any application, enable it in the application configuration:

1# config/config.yml
2oro_theme:
3    active_theme: acme-theme

Tip

You can use the oro:theme:list command to get a list of all available themes. Its output looks like this:

 1List of available themes:
 2acme-theme (active)
 3 - label: Acme Demo Theme
 4 - logo: bundles/acmebundle/themes/acme-theme/images/logo.png
 5 - icon: bundles/acmebundle/themes/acme-theme/images/favicon.ico
 6 - screenshot: bundles/acmebundle/themes/acme-theme/images/screenshot.png
 7 - styles:
 8     - bundles/acmebundle/themes/acme-theme/css/main.css
 9     - bundles/acmebundle/themes/acme-theme/css/ie.css
10demo:
11 - label: Demo Theme
12 - logo: bundles/oroui/themes/demo/images/favicon.ico
13 - styles:
14     - bundles/oroui/themes/demo/css/scss/main.scss
15     - bundles/oroui/themes/demo/css/style.css
16mytheme
17 - label: My Theme
18 - logo: mytheme/images/logo.png
19 - icon: mytheme/images/favicon.ico
20 - screenshot: mytheme/images/screenshot.png
21 - styles:
22     - mytheme/css/main.css
23     - mytheme/css/ie.css
24oro
25 - label: Oro Theme
26 - icon: bundles/oroui/themes/oro/images/favicon.ico
27 - styles: bundles/oroui/themes/oro/css/style.css

Finally, clear the cache and dump all assets:

$ php bin/console cache:clear
$ php bin/console assets:install --symlink
$ php bin/console oro:assets:build

Override a Theme

The configuration files of all available themes are merged when the service container is being compiled. Since the merge process does override values if they are defined in more than one file, you can make use of it when you need to customize an existing theme.

For example, imagine that you want to use the Oro theme from the OroUIBundle, but you want to use a custom label and favicon for it. The definition of the Oro theme as defined in the bundle looks like this:

1label: Oro Theme
2icon: bundles/oroui/themes/oro/images/favicon.ico
3styles:
4    - bundles/oroui/themes/oro/css/style.css

So, place the settings.yml file in the Resources/public/themes/oro directory of your bundle and define the values you want to change:

1# src/Acme/DemoBundle/Resources/public/oro/
2label: Custom Oro Theme
3icon: images/custom_favicon.ico

Caution

If you override themes from third-party bundles, you have to make sure that your bundle is registered after the bundle it is overriding the themes from:

 1// src/AppKernel.php
 2// ...
 3
 4class AppKernel extends OroKernel
 5{
 6    public function registerBundles()
 7    {
 8        $bundles = [
 9            // ...
10            new ThirdParty\Bundle\ThirdPartyBundle(),
11            // ...
12            new Acme\DemoBundle\AcmeDemoBundle(),
13            // ...
14        ];
15
16        // ...
17    }
18
19    // ...
20}