Welcome page initial branding

forms/common-themes/src/main/resources/theme/keycloak/welcome/resources/index.html

@@ -23,28 +23,52 @@
 
 <html>
 <head>
-    <title>Welcome to Keycloak</title>
-    <link rel="shortcut icon" href="welcome-content/favicon.ico" type="image/x-icon">
-    <link rel="StyleSheet" href="welcome-content/keycloak.css" type="text/css">
+
+    <title>Red Hat JBoss IAM</title>
+    <!-- proper charset -->
+    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
+    <link rel="stylesheet" type="text/css" href="welcome-content/keycloak.css" />
+    <link rel="shortcut icon" href="welcome-content/favicon.ico" />
 </head>
 
 <body>
-<div class="wrapper">
-    <div class="content">
-        <div class="logo">
-                <img src="welcome-content/keycloak_logo.png" alt="Keycloak" border="0" />
-        </div>
-        <h1>Welcome to Keycloak</h1>
 
-        <h3>Your Keycloak is running.</h3>
-
-        <p><a href="http://www.keycloak.org/docs">Documentation</a> | <a href="admin/">Administration Console</a> </p>
-
-        <p><a href="http://www.keycloak.org">Keycloak Project</a> |
-            <a href="https://lists.jboss.org/mailman/listinfo/keycloak-user">Mailing List</a> |
-            <a href="https://issues.jboss.org/browse/KEYCLOAK">Report an issue</a></p>
-        <p class="logos"><a href="http://www.jboss.org"><img src="welcome-content/jboss_community.png" alt="JBoss and JBoss Community" width="254" height="31" border="0"></a></p>
+<div id="container" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
+  
+  <!-- header -->
+  <div class="header-panel">
+    <div class="header-line">&nbsp;</div>
+    <div class="header-top">
+      <span class="prod-version">Red Hat JBoss IAM (Logo)</span>
+      <!--<img class="prod-title" src="images/product_title.png"/>-->
     </div>
+    <div class="header-bottom">&nbsp;</div>
+  </div>
+  
+  
+  <!-- main content -->
+  <div id="content">
+
+    <div class="section">
+
+      <h1>Welcome to Red Hat JBoss IAM</h1>
+
+      <h3>Your Red Hat JBoss Identity and Access Management is running.</h3>
+
+      <p>
+        <a href="admin/">Administration Console</a> | 
+        <a href="http://www.keycloak.org/docs">Documentation</a>
+      </p>
+
+    </div>
+
+  </div>
+
+
+  <div id="footer">&nbsp;</div>
+
 </div>
-</body>
+
+</body >
 </html>

forms/common-themes/src/main/resources/theme/keycloak/welcome/resources/keycloak.css

@@ -20,46 +20,153 @@
   ~ 02110-1301 USA, or see the FSF site: http://www.fsf.org.
 */
 
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Open Sans Light'), local('OpenSans-Light'), url(fonts/OpenSans-Light.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans'), local('OpenSans'), url(fonts/OpenSans-Regular.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(fonts/OpenSans-Semibold.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(fonts/OpenSans-Bold.ttf) format('truetype');
+}
+
 body {
-	/*background: url(bkg.gif) repeat-x;*/
-	color: #5B5B5B;
-	font-family: "Lucida Sans Unicode", "Lucida Grande", Geneva, Verdana, Arial, sans-serif;
-	margin-top: 100px;
-	text-align: center;
-}
-.wrapper {
-	margin-left: auto;
-	margin-right: auto;
-	width: 50em;
-	text-align: left;
-}
-a {
-	text-decoration: none;
-	color: #5e8a9a;
-}
-h1 {
-	padding-top: 20px;
-	color: #7b1e1e;
-}
-a:hover {
-	text-decoration: underline;
-	color: #8ec6d9;
-}
-.content {
+    background-color: #ECECEC;    
+    color: #4E5255;
+    font: 12px/1.4 "Open Sans","Lucida Sans Unicode","Lucida Grande",sans-serif;
     margin: 0;
-    padding: 0;
 }
-.dualbrand {
-	padding-top: 20px;
+
+#container {
+    background: none repeat scroll 0 0 #FFFFFF;
+    border-left: 1px solid #CECECE;
+    border-right: 1px solid #CECECE;
+    box-shadow: 6px 6px 6px #E3E3E3, -6px 6px 6px #E3E3E3, 6px -6px 6px #E3E3E3, -6px -6px 6px #E3E3E3;
+    margin: 0 auto;
+    max-width: 1003px;
 }
-.wildfly {
-	float:left;
-	margin-left: 10px;
+
+#content {
+    background-color: #ffffff;
+    margin-top: 4px;
+    height: 100%;
 }
-.logo{
-    margin-bottom: 10px;
+#content sub{
+    font-size: 12px;
 }
-.note {
-	font-size: 8pt;
-	color: #aaaaaa;
+
+
+#footer {    
+    background-color: #F1F1F1;
+    border-top: 1px solid #CFCFCF;
+    height: 42px;
+    min-height: 42px;
+    width: 100%;
+    position: absolute;    
+    bottom: 0;
+}
+
+.section {
+    margin-left: 170px;
+    margin-right: 170px;
+    padding-top: 20px;
+}
+
+a {
+    color: #009ADA;
+    outline: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+a:active {
+    outline: none;
+}
+
+a:link {
+    outline: none;
+}
+
+H1 {
+    color: #656565;
+    font-size: 20px;
+    font-weight: 300 !important;
+    padding-bottom: 8px;
+}
+
+H2 {
+   color: #656565;
+    font-size: 14px;
+    font-weight: 300 !important;    
+}
+
+sub {
+    color: #a3a7aa;
+}
+
+.prod-title {
+    vertical-align:middle; 
+    padding-bottom:5px;   
+}
+
+.prod-version {    
+    padding-left: 8px;
+    padding-bottom: 12px;
+    font-size: 10pt !important;
+    font-weight: bold;
+    color: #ffffff !important;        
+}
+
+.WarnBlock {
+    color: #000000;
+    padding: 15px;
+    background-color: #FFD272;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+.header-top {
+    background-color: #383F45;
+    border-bottom: 1px solid #53565B;
+    height:32px;
+    max-height:32px;
+    padding-left:15px;
+}
+
+.header-bottom {
+    background-color: #46494E;
+    border-bottom: 1px solid #272A2F;
+    height:43px;
+    max-height:43px;
+}
+
+.header-line {
+    background-color: #C82E2E;
+    border-bottom: 1px solid #272A2F;
+    max-height:3px;
+    height:3px;
+}
+
+.header-panel {
+    height: 80px;
+    min-height: 80px;
+    width: 100%;
 }

services/src/main/java/org/keycloak/services/resources/WelcomeResource.java

@@ -84,4 +84,17 @@ public class WelcomeResource {
         }
     }
 
+     /**
+     * Fonts for welcome page
+     *
+     * @param path
+     * @return
+     */
+    @GET
+    @Path("/welcome-content/fonts/{path}")
+    @Produces("text/html")
+    public Response getFonts(@PathParam("path") String path) {
+        return getResource("fonts/"+path);
+    }
+
 }