How to use my own common files in keycloak theme?

Viewed 992

I would like to use common resources in my keycloak theme but import feature is for extand existing theme but how to use common in my theme ?

I would like to import my own common files but according to the documentation the import only allows to use the common files of another theme but how to use it without extending on another theme ?

My structure

.
├── META-INF/
│   └── keycloak-themes.json
└── theme/
    └── my-custom-theme/
        ├── account/
        │   ├── *.ftl
        │   └── theme.properties
        ├── common/
        │   └── resources/
        │       └── css/
        │           └── bootstrap.min.css
        └── login

In my theme.properties (login)

locales=en,fr
styles=css/login.css

# which I already tried 
# -> by default keycloak use common/keycloak (but how to change to my own common resources ? I tried this import=common/my-custom-theme but I have an error 500)
stylesCommon=css/bootstrap.min.css (it's bootstrap file of keycloak (3.4.1 :/)

Anyone have an idea ?

2 Answers

I solved it by adding the following to my theme.properties:

import=common/my-custom-theme
styles=css/bootstrap.min.css
# stylesCommon=css/bootstrap.min.css <-- not working

Tested it with Keycloak server version 15.0.2

To include in 'stylesCommon', please check if you have following in template.ftl

<#if properties.stylesCommon?has_content>
   <#list properties.stylesCommon?split(' ') as style>
      <link href="${url.resourcesCommonPath}/${style}" rel="stylesheet" />
   </#list>
</#if>
Related