basic-example.md

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 CSS¹ 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:

{% content-ref url="removing-the-default-styles.md" %} removing-the-default-styles.md {% endcontent-ref %}

Footnotes

1. ...or LESS or SASS ↩