Details
diff --git a/forms/common-themes/src/main/resources/theme/base/login/template.ftl b/forms/common-themes/src/main/resources/theme/base/login/template.ftl
index aca358f..f05f8e2 100755
--- a/forms/common-themes/src/main/resources/theme/base/login/template.ftl
+++ b/forms/common-themes/src/main/resources/theme/base/login/template.ftl
@@ -10,7 +10,21 @@
</#list>
</#if>
<title><#nested "title"></title>
- <link rel="icon" href="${url.resourcesPath}/img/favicon.ico" />
+ <link rel="icon" href="${url.resourcesPath}/lib/rcue/img/favicon.ico" />
+ <!-- iPad retina icon -->
+ <link rel="apple-touch-icon-precomposed" sizes="152x152" href="${url.resourcesPath}/lib/rcue/img/apple-touch-icon-precomposed-152.png">
+ <!-- iPad retina icon (iOS < 7) -->
+ <link rel="apple-touch-icon-precomposed" sizes="144x144" href="${url.resourcesPath}/lib/rcue/img/apple-touch-icon-precomposed-144.png">
+ <!-- iPad non-retina icon -->
+ <link rel="apple-touch-icon-precomposed" sizes="76x76" href="${url.resourcesPath}/lib/rcue/img/apple-touch-icon-precomposed-76.png">
+ <!-- iPad non-retina icon (iOS < 7) -->
+ <link rel="apple-touch-icon-precomposed" sizes="72x72" href="${url.resourcesPath}/lib/rcue/img/apple-touch-icon-precomposed-72.png">
+ <!-- iPhone 6 Plus icon -->
+ <link rel="apple-touch-icon-precomposed" sizes="120x120" href="${url.resourcesPath}/lib/rcue/img/apple-touch-icon-precomposed-180.png">
+ <!-- iPhone retina icon (iOS < 7) -->
+ <link rel="apple-touch-icon-precomposed" sizes="114x114" href="${url.resourcesPath}/lib/rcue/img/apple-touch-icon-precomposed-114.png">
+ <!-- iPhone non-retina icon (iOS < 7) -->
+ <link rel="apple-touch-icon-precomposed" sizes="57x57" href="${url.resourcesPath}/lib/rcue/img/apple-touch-icon-precomposed-57.png">
<#if properties.styles?has_content>
<#list properties.styles?split(' ') as style>
<link href="${url.resourcesPath}/${style}" rel="stylesheet" />
@@ -29,10 +43,19 @@
</head>
<body class="${properties.kcBodyClass!}">
- <div id="kc-logo"><div id="kc-logo-wrapper"></div></div>
+
+ <span id="badge">
+ <a href="http://www.redhat.com/">
+ <img alt="Red Hat® logo" src="${url.resourcesPath}/lib/rcue/img/logo.svg">
+ </a>
+ </span>
<div id="kc-container" class="${properties.kcContainerClass!}">
<div id="kc-container-wrapper" class="${properties.kcContainerWrapperClass!}">
+
+ <div id="brand">
+ <img class="${properties.iamLogo!}" alt="RED HAT® JBOSS® IDENTITY AND ACCESS MANAGEMENT" src="${url.resourcesPath}/img/brand.svg">
+ </div>
<div id="kc-header" class="${properties.kcHeaderClass!}">
<div id="kc-header-wrapper" class="${properties.kcHeaderWrapperClass!}"><#nested "header"></div>
diff --git a/forms/common-themes/src/main/resources/theme/keycloak/login/resources/css/login.css b/forms/common-themes/src/main/resources/theme/keycloak/login/resources/css/login.css
index 55939b6..57c6738 100644
--- a/forms/common-themes/src/main/resources/theme/keycloak/login/resources/css/login.css
+++ b/forms/common-themes/src/main/resources/theme/keycloak/login/resources/css/login.css
@@ -1,6 +1,11 @@
-.login-pf body {
- background: #0f0f0f url("../img/keycloak-bg.png") top left no-repeat;
- background-size: 100% auto;
+/** Delete after proper logo insertion */
+#brand .iam-logo-wrapper {
+ font-size: 18px !important;
+ font-weight: bold;
+ color: #ffffff !important;
+ white-space: nowrap;
+ padding-left: 80px;
+ text-align: inherit;
}
.kc-dropdown{
@@ -71,7 +76,7 @@
}
#kc-logo-wrapper {
- background-image: url("../img/keycloak-logo.png");
+ background-image: url("../img/logo.svg");
background-repeat: no-repeat;
background-position: top right;
@@ -88,7 +93,7 @@
}
#kc-header-wrapper {
- font-size: 26px;
+ font-size: 17px;
text-transform: uppercase;
line-height: 1.2em;
margin-bottom: 15px;
@@ -279,6 +284,14 @@ ol#kc-totp-settings li:first-of-type {
}
@media (max-width: 767px) {
+ #kc-container-wrapper {
+ bottom : auto;
+ }
+
+ #brand .iam-logo-wrapper {
+ padding-left: 15px;
+ }
+
#kc-logo-wrapper {
margin-top: 30px;
margin-right: 15px;
@@ -321,7 +334,6 @@ ol#kc-totp-settings li:first-of-type {
@media (max-height: 500px) {
#kc-container-wrapper {
- position: inherit;
float: none;
}
}
diff --git a/forms/common-themes/src/main/resources/theme/keycloak/login/theme.properties b/forms/common-themes/src/main/resources/theme/keycloak/login/theme.properties
index 7319690..10bb72a 100644
--- a/forms/common-themes/src/main/resources/theme/keycloak/login/theme.properties
+++ b/forms/common-themes/src/main/resources/theme/keycloak/login/theme.properties
@@ -1,8 +1,9 @@
parent=base
import=common/keycloak
-styles=lib/patternfly/css/patternfly.css lib/zocial/zocial.css css/login.css
-meta=viewport==width=device-width,initial-scale=1
+styles=lib/rcue/css/rcue.min.css lib/rcue/css/rcue-additions.min.css lib/zocial/zocial.css css/login.css
+scripts=lib/rcue/components/patternfly/components/jquery/dist/jquery.min.js lib/rcue/components/patternfly/components/bootstrap/dist/js/bootstrap.min.js lib/rcue/components/patternfly/dist/js/patternfly.min.js
+meta=viewport==width=device-width,initial-scale=1.0
kcHtmlClass=login-pf
@@ -29,6 +30,8 @@ kcTextareaClass=form-control
kcInfoAreaClass=col-xs-12 col-sm-4 col-md-4 col-lg-5 details
+iamLogo=brand iam-logo-wrapper
+
##### css classes for form buttons
# main class used for all buttons
kcButtonClass=btn
@@ -37,3 +40,6 @@ kcButtonPrimaryClass=btn-primary
kcButtonDefaultClass=btn-default
# classes defining size of the button
kcButtonLargeClass=btn-lg
+
+##### URL to Red Hat server
+rhurl=http://www.redhat.com/en
