🎨 https://hacpai.com/article/1498400594804#1498439482212

src/main/webapp/admin-index.ftl

@@ -20,7 +20,11 @@
                 </a>
                
                 <span class="right"> 
-                    <a href="${servePath}" title='${indexLabel}'>${indexLabel}</a><a href='javascript:admin.logout();' title='${logoutLabel}'>${logoutLabel}</a>
+                    <a href="${servePath}" title='${indexLabel}'>
+                        <div class="avatar" style="background-image: url(${gravatar})"></div>
+                        ${userName}
+                    </a>
+                    <a href='javascript:admin.logout();' title='${logoutLabel}'>${logoutLabel}</a>
                 </span>
             </div>
             <div id="tabs">

src/main/webapp/css/default-admin.css

@@ -680,18 +680,30 @@ a[class*=" icon-"]:hover {
 
 #top > .right a{
     color: #555;
-    line-height: 50px;
-    margin: 0 10px;
+    line-height: 32px;
+    margin: 8px 10px;
     border: 1px solid #f6f6f6;
     background-color: #f6f6f6;
     border-radius: 100px;
-    padding: 10px;
+    padding: 0 10px;
     text-decoration: none;
+    display: inline-block;
 }
 
 #top > .right a:hover {
     color: #333;
 }
+
+#top .avatar {
+    height: 25px;
+    width: 25px;
+    border-radius: 20px;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    float: left;
+    margin: 3px 6px 0 0;
+}
 /* end top-nav */
 
 /* start first tab */