Added KC color scheme to header

admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.css

@@ -2,6 +2,69 @@ body {
     background-color: #F9F9F9;
 }
 
+.navbar-title {
+    background-image: url('../img/logo.png');
+    height: 25px;
+    background-repeat: no-repeat;
+}
+
+.navbar-pf {
+    background-image: url('../img/header-bkgrnd.png');
+    border-top: 3px solid rgba(255, 255, 255, 0.15);
+}
+
+.navbar-pf .navbar-primary {
+    font-size: 13px;
+    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,.4) 100%);
+    background-image: linear-gradient(to bottom, rgba(0,0,0,.1) 0%, rgba(0,0,0,.4) 100%);
+}
+
+.navbar-pf .navbar-header {
+    border-bottom: 1px solid rgba(255,255,255,.15);
+}
+
+.navbar-pf .navbar-primary li.dropdown.context > a,
+.navbar-pf .navbar-primary li.dropdown.context > a:hover,
+.navbar-pf .navbar-primary li.dropdown.context.open > a,
+.navbar-pf .navbar-primary > .active > a,
+.navbar-pf .navbar-primary > .active > a:hover{
+    background-color: rgba(0,0,0,0.1);
+    border-bottom-color: rgba(0,0,0,0.3);
+    border-right: rgba(0,0,0,0.3);
+    border-top-color: rgba(0,0,0,0.1);
+    font-weight: 600;
+    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%);
+    background-image: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%);
+    background-repeat: repeat-x;
+}
+
+.navbar-pf .navbar-primary li.dropdown.context > a:hover,
+.navbar-pf .navbar-primary li.dropdown.context.open > a,
+.navbar-pf .navbar-primary > .active > a:hover {
+    background-color: rgba(0,0,0,0.3);
+}
+
+.navbar-pf .navbar-primary > .active > a {
+    background-color: rgba(0,0,0,0.1);
+    border-bottom-color: rgba(0,0,0,0.3);
+    border-right: rgba(0,0,0,0.3);
+    border-top-color: rgba(0,0,0,0.1);
+    font-weight: 600;
+    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%);
+    background-image: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%);
+    background-repeat: repeat-x;
+}
+
+.navbar-pf .navbar-utility > li > a {
+    border-left: none;
+}
+
+.navbar-pf .navbar-utility > li > a:hover,
+.navbar-pf .navbar-utility > .open > a,
+.navbar-pf .navbar-utility > .open > a:hover {
+    background-color: rgba(0,0,0,0.2);
+}
+
 #content, #content-area {
     background-color: #FFFFFF;
 }

admin-ui/src/main/resources/META-INF/resources/admin/partials/menu.html

@@ -6,7 +6,7 @@
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
         </button>
-        <h1 class="navbar-title"><Strong>KeyCloak</Strong> Central Login</h1>
+        <h1 class="navbar-title"></h1>
     </div>
     <div class="collapse navbar-collapse navbar-collapse-1">
         <ul class="nav navbar-nav navbar-utility" data-ng-show="auth.loggedIn">
@@ -24,12 +24,12 @@
         <ul class="nav navbar-nav navbar-primary persistent-secondary" data-ng-controller="RealmDropdownCtrl">
             <li class="dropdown context" data-ng-show="showNav()">
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                    Realm: {{current.realm.id}}
+                    {{current.realm.realm}}
                     <b class="caret"></b>
                 </a>
                 <ul class="dropdown-menu">
                     <li data-ng-repeat="realm in current.realms">
-                        <a href="" ng-click="changeRealm(realm.id)" >{{realm.id}}</a>
+                        <a href="" ng-click="changeRealm(realm.realm)">{{realm.realm}}</a>
                     </li>
                 </ul>
             </li>