Customizing Keycloak.X | Themes | 2021

hello and welcome to tech guinness my name is chandra and i am a technology expert in this video we will see how to customize the key clock x themes let's start by default key clock and key clock x comes with base and key clock theme and the simplest way to design a new theme is to extend existing themes basically you can extend either the base theme or a key clock theme based on your requirement so further we have the themes for accounts admin email login and the welcome page so in this video we will see how we can do this customization in the key clock let's see the demo now we are logged into the admin console of key clock in the realm settings we can see there is a tab for themes you can see my previous videos about the realms in key clock so we can see login theme is there account theme admin console theme email theme and internationalization so here we will see how to change the themes for a login screen so by default as i was mentioning so we have two themes base theme and key clock theme so what we need to do we need to have a maven project here so those who have used key clock they must be aware that they have used the traditional process of placing the themes file or themes folder with the custom themes but in key clock x that process is not working so for key clock x we need to build the jar file and the application or the project would be a maven project here you can see the src folder and the pom.xml first we will see the palm.xml it will be a basicform.xml where we are giving the only the group id artifact id and the version along with the name so you can see that custom theme demo is the artifact id and custom theme demo name and we go to the src so under the resources we have two folders one for meta inf and one for theme first we will check what meta inf will contain so here we will have key clock themes dot json file and in which we will specify the name of the theme and the types for example this custom theme demo we are doing it for login screen so the type would be the login and if email theme would be there then we would have written email now moving back to theme folder so theme folder will have the name of the theme custom theme demo and this should match with our the theme name so under custom theme we have the folder for login because we are doing it for login and if email would be there and then we would have the folder for email so under this login we will have one theme dot properties which will specify who is the parent class basically we are extending the base so it will refer all the base themes files and in this base theme file we are modifying the styles.css so what exactly we are doing here is we are not touching the base theme files except styles.css and in this we will specify our values so under the resources we will have the folder for css and under css we'll have styles.css and styles.css let's check so this is our custom styles.css where we have put the background image as this one img background image and img folder is under the resources itself so you can see so all your images you can put in under the img folder it is not mandatory you can rename it as images as well so all you need to do is to refer over here ok so basically you can change all the content or the css content over here right for example your form right kc form float is left you can make float as right or you can change the width here so all those things you can do over here so i am not talking about the css in this tutorial ok so let us see what next so now we have seen all the files what we require so let us go to the custom theme and we will package this application as a jar file so mvn package so now it is building and yeah build is success so now all you need to do is just copy this custom theme jar file and place it in the providers folder under the key clock setup so now server is down and then we need to just run the kc dot back with config with this whatever the jar files which we have put under the providers folder that will be deployed or you can say configured so now let's run our server a survey started so let's refresh this page okay we need to login so we can go to the themes and because we have changed the login theme let's see if it appears here yes you can see the custom theme demo we need to select it and save it so changes are saved to the realm then let's sign out yes so now you can see that our login screen is changed ok so we will again log in here now we can change it to base theme save and then sign out you can see this is the base theme which we have overridden so here we come to the end of this video thanks for watching if you like the content please share it with your friends please subscribe the channel to get latest videos keep exploring thanks

Channel: Tekgainers

Views: 464

Rating: 5 out of 5

Keywords: Keycloakx, KeycloakThemes, Keycloak, KeycloakLogin

Id: Xg5y57BedoE

Length: 6min 41sec (401 seconds)

Published: Tue Jun 22 2021