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:
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:
<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.
Do you know how can I get the identity providers on Javascript?
The Javascript/Freemarker template shown above included in your login.ftl file will populate Javascript arrays (aliases, loginUrls, and displayNames) containing the dynamically generated values the browser can use as the click() target for custom IDP button(s) such as:
$("#BUTTONID").click(function(){
window.location.href = (loginUrls[0].replace(/&/g, '&'));
});