Minimized Login Status
By Wikidot Community
rating: 0+x

Minimalizes the Login Status so that it only shows the user's avatar and behaves like a button.

Import

To use this CSSnippet and ensure you are always using the latest version, paste the following code into your site's CSS:

@import url('http://css.wikidot.com/cssnippet:minimized-login-status/code_');

Description

Essentially, this will transform the login status from:

to:

This can be used for those who desire a less obtrusive form of the login info. Minimized to just an avatar, it is still easy to tell if you are logged on while preserving the your personalization. Simply clicking on the avatar reveals the typical list of account options.

Additionally, when logged out, the login status shows an image representing the sign-in action instead.

In order to use this with a custom layout, you must define the login status module with the following:

<div class="login-status">
  [[module LoginStatus]]
</div>

This CSSnippet is compatible with the Bootstrap Standard Template.

Code

/** Minimalized Login Status
 *  Developed by the Wikidot Community
 *  
 *  Minimalizes the Login Status so that it only shows the user's avatar and
 *  behaves like a button.
 *  ***************************************************************************/
 
/* * When Logged In * */
.login-status .printuser{  font-size: 0; }
.login-status .printuser img.small{
    max-width: 20px !important;
    padding: 0 !important;
    background-image: none !important;
    width: 20px;
    height: 20px;
    border-radius: 10px;
}
 
.login-status .btn{
    background: none;
    border: none;
    padding: 0;
    min-height: 0;
}
.login-status .btn.disabled{
    position: relative;
    left: 23px;
    top: 4px;
    z-index: 50;
}
.login-status .btn.dropdown-toggle{
    width: 28px;
    height: 28px;
    border: 1px solid #E3E3E3;
    border-radius: 14px;
    z-index: 49;
}
.login-status .btn.dropdown-toggle:hover{
    background: #EEE;
    border-color: #D7D7D7;
}
.login-status .caret{  visibility: hidden; }
.login-status ul{
    left: -102px;
    box-shadow: 0 2px 3px -1px rgba(0,0,0,.2);
    border-radius: 5px;
}
.login-status ul .divider{  display: none; }
.login-status ul li i{
    margin-right: 10px;
}
.login-status .printuser-show{  display: none; }
 
/* * When Logged Out * */
.login-status .login-status-create-account,
.login-status > span{
    display: none;
}
.login-status .login-status-sign-in.btn{
    padding: 4px 8px;
    font-size: 12px;
}
 
/* * Old Logged Out * *
.login-status .login-status-sign-in{
    background: #FFF;
    border: 1px solid #E3E3E3;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    color: #000;
    font-size: 0;
    padding-top: 2px;
}
.login-status .login-status-sign-in::before{
    font-family: 'FontAwesome';
    font-size: 16px;
    content: '';
}
.login-status .login-status-sign-in:hover{
    border-color: #D7D7D7;
    background: #EEE;
}
 
/* * Messages * */
.login-status .btn.disabled .badge.badge-info{
    font-size: 11px;
    position: absolute;
    top: 1px;  right: 28px;
    background: rgba(20, 20, 20, 0.95);
    border-radius: 4px;
}
.login-status .dropdown-menu .badge{
    position: relative;
    top: -1px; left: 6px;
    font-size: 11px;
}

In Practice

To see this in action, visit:

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License