Customize identity provider login button


I have this national OIDC identity provider in Brazil, called They have mandatory visual guidelines. The login initiation button must have a defined appearance.

Something like this:
Captura de Tela 2021-11-22 às 17.41.39

Right now, keycloak 14.0.0 gives me a button like this:

Is there a (easy) way for me to style this button? Without having to create a full theme?

CSS might get you close, for example:

            .login-pf-page .login-pf-social-link a
                border-radius: 35px;
                border-color: #fff;
                border: none;
                background: #fff;
                color: #0070c4

Unfortunately you will need to stop/start the server to refresh changed stylesheets, even if content caching is disabled. Create copies, don’t alter the original ./themes/base ./themes/keycloak directories.

Another in-stock-theme approach involves using your copy of the login.ftl file to generate Javascript to obtain the click target for your custom button, for example like this:

            var aliases = [];
            var loginUrls = [];
            var displayNames = [];
            <#list social.providers as p>

DM me if you would like more details.