Customize identity provider login button

Hi.

I have this national OIDC identity provider in Brazil, called Gov.br. 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:
image

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:

            <script>
            var aliases = [];
            var loginUrls = [];
            var displayNames = [];
            <#list social.providers as p>
              aliases.push("${p.alias!}");
              displayNames.push("${p.displayName!}");
              loginUrls.push("${p.loginUrl!}");
            </#list>
            <script>

DM me if you would like more details.