Keycloak Modal Login and Login Page Customization
Matteo Riva
Matteo Riva
Matteo Riva
Matteo Riva
<button style="height:95px;width:210px; float:left" onclick="add_frame()" href="http://**************" id="xnat">
</button>
<button style="height:95px;width:210px; float:right" onclick="add_border()" href="http://****************" id="redcap">
</button>
function add_frame(){
document.getElementById('xnat').style.border = "3px solid blue";
}
function add_border(){
document.getElementById('redcap').style.border = "3px solid red";
}
</script>
Matteo Riva
Matteo Riva
David Cook
Hey Matteo,
I think that I’ve had the same issue before, and I imagine that the problem is probably due to caching at some level.
First, try holding “Shift” and refresh in your browser to flush your browser cache.
Second, there is a theme cache that may need to be cleared:
https://github.com/keycloak/keycloak/discussions/8628
https://www.keycloak.org/docs/latest/server_development/#creating-a-theme
The right way to clear that cache will probably depend on your version.
David Cook
Senior Software Engineer
Prosentient Systems
Suite 7.03
6a Glen St
Milsons Point NSW 2061
Australia
Office: 02 9212 0899
Online: 02 8005 0595
From: keyclo...@googlegroups.com <keyclo...@googlegroups.com> On Behalf Of Matteo Riva
Sent: Wednesday, 12 October 2022 11:14 PM
To: Keycloak User <keyclo...@googlegroups.com>
Subject: [keycloak-user] Re: Keycloak Modal Login and Login Page Customization
UPDATE 5: I succeeded in solving the problem "Number 2", but I keep on having some issue with "Number 1". I tried to change the login.css file with different colors again, but nothing has changed.
I know, I am sorry for being a bit spamming, I just do not want you to waste any time.
Thank you again.
Matteo
Il giorno mercoledì 12 ottobre 2022 alle 09:35:49 UTC+2 Matteo Riva ha scritto:
UPDATE 4: I succeeded in fixing the problem "Number 3", but I keep on having some issue with "Number 1" and "Number 2".
Can you help me, please?
Thank you again.
Matteo
Il giorno martedì 11 ottobre 2022 alle 15:13:18 UTC+2 Matteo Riva ha scritto:
UPDATE 3: Starting from the tutorial I cited before (https://www.baeldung.com/keycloak-custom-login-page), I finally succeeded in having this login page:
The issues now are three:
Number 1:
Following the tutorial, I changed the background color (light blue) in login/resources/css/login.css. Now I would like to change the background color to white or anything else. I tried to restore the css file and I tried this line too:
.login-pf body { background: #ffffff; background-size: cover; height: 100%; }
But nothing has changed at all!! Why? I am doing the same steps I did when I put that light blue color in the background. Now I cannot change it anymore....
Number 2:
I would like to add an image outside the "sign in white square". How can I do it? Always following the tutorial, I change the end of the template.ftl file by adding this line:
<img src="/opt/keycloak/themes/custom/login/resources/img/log.png" height="300px" width="500px"/>
I do not know why, but the image is not correctly taken and I can see only this:
Number 3:
I would like to add buttons to the images "XNAT" and "REDCap", maybe with colored borders when I click them too, in order to distinguish when I click one or the other. Do you know how to do it? I tried by adding these lines to the template.ftl file:
<form class="column-xnat-redcap">
<button style="height:95px;width:210px; float:left" onclick="add_frame()" href="http://**************" id="xnat"><img src="https://www.xnat.org/images/XNAT-logo-980.png" style="width: 200px; height: 90px; position:relative; left:-3px;" align="left" />
</button>
<button style="height:95px;width:210px; float:right" onclick="add_border()" href="http://****************" id="redcap"><img src="https://informatics.wustl.edu/wp-content/uploads/2018/04/redcap_logo_high_res.jpg" style="width: 200px; height: 90px; position:relative; left:3px; top: 0px;" align="right" />
</button><script>
function add_frame(){
document.getElementById('xnat').style.border = "3px solid blue";
}
function add_border(){
document.getElementById('redcap').style.border = "3px solid red";
}
</script>
What I obtain are two buttons, which bring me to incorrect links of Keycloak.
Any help would be so appreciated.
Thank you so much in advance.
Matteo
Il giorno giovedì 6 ottobre 2022 alle 11:23:36 UTC+2 Matteo Riva ha scritto:
UPDATE 2: After following the first steps of the site I cited in the previous message, I get this error:
Internal Server Error
And the page is completely blank.
In summary, after I create the new folder "login" in "custom" and if I subsequently select "custom" from Themes....
....and I reload the page, it seems Keycloak does not read the login page in a correct way anymore. I will try it again in order to see if I can fix it in some way.
Anyone could tell me if you succeeded in changing your login page, please? If yes, how you did it? Do you know how to add the two windows I said in my first message?
Please, any help would be so appreciated! Thank you so much.
Matteo
--
You received this message because you are subscribed to the Google Groups "Keycloak User" group.
To unsubscribe from this group and stop receiving emails from it, send an email to keycloak-use...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/keycloak-user/93c99357-fd71-4f72-8158-2a3ff2eabc85n%40googlegroups.com.