Hello! I have also tried this: http://localhost/manager/?realm=“master” , but sorry to say no change at all. Thanks.
Hi,
At first you need to create a realm , then put your realm name in url .
Hello! i have these two realms created already and tried with Master realm. Please have check herein. Thanks.
Hi,
create another one realm , Master is default realm.
Afterthat configure your logo , images .
Hello apurba,
I have already created an another one with realm name usr001 as mentioned in last screenshot. Won’t it work? Thanks.
You should use the the contact formular.
Openremote will make you an offer for support, install and service. Cause I guess you will not running openremote, since the support in this forum drives you in next issues.
Let me know you, no one has ever experienced this kind of issues like you have, cause these are basic settings, developing and running openremote, which are really good described and guided in the wiki pages.
Hello @Denis i have already been contact to them at their contact form last week, but afraid to say that no response and support at all from them till date.
Also, sorry, but this is really useless to ask and won’t mind at all. Could you please share one of your own custumized login page with your own logo and texts setup procedure screenshots? So that i could be also work on it same like you have done to custumize your own login page and keep debugging with this issue in order to make it work through your provided step-by-step described and guided in your setup procedure. Thanks.
Hello @apurba Yes Great! this time Master changed with user realm. Now just remaining to change logo and openremote text. Thanks for keep supporting. Really appreciate.
Hi @kpin404
For reference, this is what I did to customize my login page:
-create folder deployment/keycloak/themes/openremote
-fill with github repo keycloak/src/main/resources/theme/openremote at main · openremote/keycloak · GitHub
-move logo to /login/resources/img
-edit login->template.ftl
-row 15 = <title>My Custom Openremote</title>
-row 16 = <link rel="icon" type="image/png" href="${url.resourcesPath}/img/my_logo"/>
-row 33 = <img src="${url.resourcesPath}/img/my_logo" height="105px" width"291px">
-row 44 = <p id="sub-header">MY WEBPAGE</p>
Hello @pcr Thank you very much for your prompt response. I really appreciate your valuable feedback to me on this.
Please allow me sometime to workout on this and update you with the same. Thanks.
Hello @pcr I worked as per your guide and comes out with the result herein:
Thanks, text changes comes into live on login page, but afraid to say that there seems no logo change.
Herein my updated code for template.ftl file to be reviewed by you for further correction:
<#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false>
<!DOCTYPE html>
<html class="${properties.kcHtmlClass!}">
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="robots" content="noindex, nofollow">
<#if properties.meta?has_content>
<#list properties.meta?split(' ') as meta>
<meta name="${meta?split('==')[0]}" content="${meta?split('==')[1]}"/>
</#list>
</#if>
<title>My Custom Openremote</title>
<link rel="icon" type="image/png" href="${url.resourcesPath}/img/my_logo.png"/>
<link type=text/css rel="stylesheet" href="${url.resourcesPath}/css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" href="${url.resourcesPath}/css/styles.css"/>
<script type="text/javascript" src="${url.resourcesPath}/js/materialize.min.js"></script>
</head>
<body>
<div id="outer-wrapper">
<div id="wrapper">
<div class="row">
<div class="col s10 m6 l4 offset-s1 offset-m3 offset-l4">
<div class="row">
<div class="row">
<div class="col s12 center">
<div id="header-wrapper">
<img src="${url.resourcesPath}/img/my_logo" height="105px" width"291px">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
<path fill="#C4D600"
d="M11.93,21.851c-5.551,0-10.066-4.515-10.066-10.065h2.108c0,4.388,3.57,7.958,7.958,7.958 c4.387,0,7.958-3.57,7.958-7.958c0-4.388-3.57-7.958-7.958-7.958V1.72c5.55,0,10.066,4.517,10.066,10.066 C21.996,17.336,17.48,21.851,11.93,21.851L11.93,21.851z"/>
<path fill="#4E9D2D"
d="M10.406,19.088c-1.95-0.406-3.626-1.549-4.717-3.215s-1.469-3.66-1.062-5.61 c0.407-1.951,1.55-3.626,3.217-4.718c1.667-1.092,3.659-1.469,5.61-1.062c4.027,0.84,6.62,4.799,5.779,8.825l-2.063-0.429 c0.603-2.889-1.257-5.73-4.147-6.333c-1.4-0.292-2.829-0.022-4.025,0.762C7.802,8.091,6.982,9.293,6.69,10.693 c-0.291,1.398-0.021,2.828,0.762,4.024c0.783,1.196,1.985,2.016,3.385,2.307L10.406,19.088L10.406,19.088z"/>
<path fill="#1D5632"
d="M11.936,16.622c-0.082,0-0.164-0.001-0.245-0.004c-1.29-0.065-2.478-0.628-3.346-1.585 c-0.868-0.958-1.31-2.195-1.246-3.487l2.104,0.105c-0.036,0.728,0.214,1.427,0.704,1.967c0.488,0.54,1.16,0.858,1.888,0.894 c0.725,0.033,1.426-0.213,1.966-0.703c0.541-0.489,0.858-1.159,0.895-1.887c0.075-1.503-1.088-2.787-2.591-2.862l0.105-2.104 c2.664,0.132,4.724,2.406,4.592,5.07c-0.064,1.291-0.628,2.478-1.585,3.345C14.28,16.183,13.137,16.622,11.936,16.622L11.936,16.622 z"/>
</svg>
</a>
<div class="left-align">
<h5 id="header"><#nested "header"></h5><br>
<p id="sub-header">MY WEBPAGE</p>
</div>
</div>
</div>
</div>
<#if realm.internationalizationEnabled && locale.supported?size gt 1>
<div class="col m12" id="kc-locale">
<div id="kc-locale-dropdown">
<a href="#" id="kc-current-locale-link">${locale.current}</a>
<ul>
<#list locale.supported as l>
<li><a href="${l.url}">${l.label}</a></li>
</#list>
</ul>
</div>
</div>
</#if>
<#if displayMessage && message?has_content && (message.type != 'warning' || !isAppInitiatedAction??)>
<div class="section">
<div class="card-panel">
<#if message.type=='success' ><i class="material-icons green-text">check_circle</i><span
class="green-text">${kcSanitize(message.summary)?no_esc}</span></#if>
<#if message.type=='warning' ><i class="material-icons orange-text">warning</i><span
class="orange-text">${kcSanitize(message.summary)?no_esc}</span></#if>
<#if message.type=='error' ><i class="material-icons red-text">error</i><span
class="red-text">${kcSanitize(message.summary)?no_esc}</span></#if>
<#if message.type=='info' ><i class="material-icons blue-text">info</i><span
class="blue-text">${kcSanitize(message.summary)?no_esc}</span></#if>
</div>
</div>
</#if>
<div class="col s12">
<#nested "form">
</div>
</div>
<div class="row">
<div class="col s12">
<#if displayInfo>
<#nested "info">
</#if>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</#macro>
You need to remove the “path fill” rows, those are the vectors with the colors of openremote logo
Try to adapt this one, this is my lab configuration
<#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false>
<!DOCTYPE html>
<html class="${properties.kcHtmlClass!}">
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="robots" content="noindex, nofollow">
<#if properties.meta?has_content>
<#list properties.meta?split(' ') as meta>
<meta name="${meta?split('==')[0]}" content="${meta?split('==')[1]}"/>
</#list>
</#if>
<title>My Project</title>
<link rel="icon" type="image/png" href="${url.resourcesPath}/img/logo.png"/>
<link type=text/css rel="stylesheet" href="${url.resourcesPath}/css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" href="${url.resourcesPath}/css/styles.css"/>
<script type="text/javascript" src="${url.resourcesPath}/js/materialize.min.js"></script>
</head>
<body>
<div id="outer-wrapper">
<div id="wrapper">
<div class="row">
<div class="col s10 m6 l4 offset-s1 offset-m3 offset-l4">
<div class="row">
<div class="row">
<div class="col s12 center">
<div id="header-wrapper">
<a href="https://www.mysite.com/">
<img src="${url.resourcesPath}/img/logo.png" height="105px" width"291px">
</a>
</div>
</div>
</div>
<#if realm.internationalizationEnabled && locale.supported?size gt 1>
<div class="col m12" id="kc-locale">
<div id="kc-locale-dropdown">
<a href="#" id="kc-current-locale-link">${locale.current}</a>
<ul>
<#list locale.supported as l>
<li><a href="${l.url}">${l.label}</a></li>
</#list>
</ul>
</div>
</div>
</#if>
<#if displayMessage && message?has_content && (message.type != 'warning' || !isAppInitiatedAction??)>
<div class="section">
<div class="card-panel">
<#if message.type=='success' ><i class="material-icons green-text">check_circle</i><span
class="green-text">${kcSanitize(message.summary)?no_esc}</span></#if>
<#if message.type=='warning' ><i class="material-icons orange-text">warning</i><span
class="orange-text">${kcSanitize(message.summary)?no_esc}</span></#if>
<#if message.type=='error' ><i class="material-icons red-text">error</i><span
class="red-text">${kcSanitize(message.summary)?no_esc}</span></#if>
<#if message.type=='info' ><i class="material-icons blue-text">info</i><span
class="blue-text">${kcSanitize(message.summary)?no_esc}</span></#if>
</div>
</div>
</#if>
<div class="col s12">
<#nested "form">
</div>
</div>
<div class="row">
<div class="col s12">
<#if displayInfo>
<#nested "info">
</#if>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</#macro>
Also your image seems loaded uncorrectly, maybe it’s too big/wrong format? Try with different images if possible
Hello @pcr Great! Thanks a lot for your valuable feedback to login page customization process. As per your provided help now i got it what actually i was looking for. Thank you once again for your valuable support.
1 Like
Hi @pcr ,
I am getting this error when i try to add and load my custom logo otherwise it is running ok.
below are my files location
here is my file below
<#macro registrationLayout bodyClass=“” displayInfo=false displayMessage=true displayRequiredFields=false>
<#if properties.meta?has_content>
<#list properties.meta?split(' ') as meta>
<meta name="${meta?split('==')[0]}" content="${meta?split('==')[1]}"/>
</#list>
</#if>
<title>My Custom Openremote</title>
<link rel="icon" type="image/png" href="${url.resourcesPath}/img/logo.png"/>
<link type=text/css rel="stylesheet" href="${url.resourcesPath}/css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" href="${url.resourcesPath}/css/styles.css"/>
<script type="text/javascript" src="${url.resourcesPath}/js/materialize.min.js"></script>
<div class="row">
<div class="col s10 m6 l4 offset-s1 offset-m3 offset-l4">
<div class="row">
<div class="row">
<div class="col s12 center">
<div id="header-wrapper">
<img src="${url.resourcesPath}/img/logo" height="105px" width"291px">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
<path fill="#C4D600"
d="M11.93,21.851c-5.551,0-10.066-4.515-10.066-10.065h2.108c0,4.388,3.57,7.958,7.958,7.958 c4.387,0,7.958-3.57,7.958-7.958c0-4.388-3.57-7.958-7.958-7.958V1.72c5.55,0,10.066,4.517,10.066,10.066 C21.996,17.336,17.48,21.851,11.93,21.851L11.93,21.851z"/>
<path fill="#4E9D2D"
d="M10.406,19.088c-1.95-0.406-3.626-1.549-4.717-3.215s-1.469-3.66-1.062-5.61 c0.407-1.951,1.55-3.626,3.217-4.718c1.667-1.092,3.659-1.469,5.61-1.062c4.027,0.84,6.62,4.799,5.779,8.825l-2.063-0.429 c0.603-2.889-1.257-5.73-4.147-6.333c-1.4-0.292-2.829-0.022-4.025,0.762C7.802,8.091,6.982,9.293,6.69,10.693 c-0.291,1.398-0.021,2.828,0.762,4.024c0.783,1.196,1.985,2.016,3.385,2.307L10.406,19.088L10.406,19.088z"/>
<path fill="#1D5632"
d="M11.936,16.622c-0.082,0-0.164-0.001-0.245-0.004c-1.29-0.065-2.478-0.628-3.346-1.585 c-0.868-0.958-1.31-2.195-1.246-3.487l2.104,0.105c-0.036,0.728,0.214,1.427,0.704,1.967c0.488,0.54,1.16,0.858,1.888,0.894 c0.725,0.033,1.426-0.213,1.966-0.703c0.541-0.489,0.858-1.159,0.895-1.887c0.075-1.503-1.088-2.787-2.591-2.862l0.105-2.104 c2.664,0.132,4.724,2.406,4.592,5.07c-0.064,1.291-0.628,2.478-1.585,3.345C14.28,16.183,13.137,16.622,11.936,16.622L11.936,16.622 z"/>
</svg>
</a>
<div class="left-align">
<h5 id="header"><#nested "header"></h5><br>
<p id="sub-header">conscient</p>
</div>
</div>
</div>
</div>
<#if realm.internationalizationEnabled && locale.supported?size gt 1>
<div class="col m12" id="kc-locale">
<div id="kc-locale-dropdown">
<a href="#" id="kc-current-locale-link">${locale.current}</a>
<ul>
<#list locale.supported as l>
<li><a href="${l.url}">${l.label}</a></li>
</#list>
</ul>
</div>
</div>
</#if>
<#if displayMessage && message?has_content && (message.type != 'warning' || !isAppInitiatedAction??)>
<div class="section">
<div class="card-panel">
<#if message.type=='success' ><i class="material-icons green-text">check_circle</i><span
class="green-text">${kcSanitize(message.summary)?no_esc}</span></#if>
<#if message.type=='warning' ><i class="material-icons orange-text">warning</i><span
class="orange-text">${kcSanitize(message.summary)?no_esc}</span></#if>
<#if message.type=='error' ><i class="material-icons red-text">error</i><span
class="red-text">${kcSanitize(message.summary)?no_esc}</span></#if>
<#if message.type=='info' ><i class="material-icons blue-text">info</i><span
class="blue-text">${kcSanitize(message.summary)?no_esc}</span></#if>
</div>
</div>
</#if>
<div class="col s12">
<#nested "form">
</div>
</div>
<div class="row">
<div class="col s12">
<#if displayInfo>
<#nested "info">
</#if>
</div>
</div>
</div>
</div>
</div>
Hi @apurba
you have the same error as kpin404
These lines
<img src="${url.resourcesPath}/img/logo" height="105px" width"291px">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
<path fill="#C4D600"
d="M11.93,21.851c-5.551,0-10.066-4.515-10.066-10.065h2.108c0,4.388,3.57,7.958,7.958,7.958 c4.387,0,7.958-3.57,7.958-7.958c0-4.388-3.57-7.958-7.958-7.958V1.72c5.55,0,10.066,4.517,10.066,10.066 C21.996,17.336,17.48,21.851,11.93,21.851L11.93,21.851z"/>
<path fill="#4E9D2D"
d="M10.406,19.088c-1.95-0.406-3.626-1.549-4.717-3.215s-1.469-3.66-1.062-5.61 c0.407-1.951,1.55-3.626,3.217-4.718c1.667-1.092,3.659-1.469,5.61-1.062c4.027,0.84,6.62,4.799,5.779,8.825l-2.063-0.429 c0.603-2.889-1.257-5.73-4.147-6.333c-1.4-0.292-2.829-0.022-4.025,0.762C7.802,8.091,6.982,9.293,6.69,10.693 c-0.291,1.398-0.021,2.828,0.762,4.024c0.783,1.196,1.985,2.016,3.385,2.307L10.406,19.088L10.406,19.088z"/>
<path fill="#1D5632"
d="M11.936,16.622c-0.082,0-0.164-0.001-0.245-0.004c-1.29-0.065-2.478-0.628-3.346-1.585 c-0.868-0.958-1.31-2.195-1.246-3.487l2.104,0.105c-0.036,0.728,0.214,1.427,0.704,1.967c0.488,0.54,1.16,0.858,1.888,0.894 c0.725,0.033,1.426-0.213,1.966-0.703c0.541-0.489,0.858-1.159,0.895-1.887c0.075-1.503-1.088-2.787-2.591-2.862l0.105-2.104 c2.664,0.132,4.724,2.406,4.592,5.07c-0.064,1.291-0.628,2.478-1.585,3.345C14.28,16.183,13.137,16.622,11.936,16.622L11.936,16.622 z"/>
</svg>
are the vectors of openremote logo, you need to remove them and just use the path to your logo (or replace them with your vector)
Follow my example above and just replace the text and logo name
Hello @pcr my login page is working fine after getting your help. Next i have noticed one more thing that it still shows Openremote Demo Title text in the browser window for one second while loading the login and logout the login page. I have tried to look into the login.ftl file, but didn’t get any title text named Openremote Demo. Where this could be? Any further help to get and fix this please. Herein the screen shot for this. Thanks.
I have the same issue, is just for a second but I remember asking this in the past and couldn’t fix it, apparently somewhere it calls the demo for a moment