Basic example

As you can see in the screenshot below most DOM Element get assigned a class starting by kcSomething. Example kcFormHeaderClass.

No styles rules get assigned to those classes they are only here for you to use as target for your custom CSS.

Inspecting the login.ftl page in chrome dev tools

So if you're not very interested in all the bells and whistles Keycloakify offers, you can just create a file and just start customizing the page:

Applying a red border to all the DOM element with the kcFormHeaderClass class
The red border gets applied

Up next:

Removing the default styles

Last updated