Minimal Login Status - Bootstrap Playground

Fold

Minimal Login Status

Timothy Foster 23 Oct 2013 23:37

Made a little CSS that makes the login status more subtle. Feel free to play with it and such (:

/*  Login Status (Timothy Foster)
===================================*/
/* * When Logged In * */
.printuser{  font-size: 0; }
.printuser img{
    max-width: 20px !important;
    padding: 0 !important;
    background-image: none !important;
    width: 20px;
    border-radius: 10px;
}
 
.loginStatus{  padding-top: 3px; }
.loginStatus .btn{
    background: none;
    border: none;
    padding: 0;
}
.loginStatus .btn.disabled{
    position: relative;
    left: 23px;
    top: 4px;
    z-index: 50;
}
.loginStatus .btn.dropdown-toggle{
    width: 28px;
    height: 28px;
    border: 1px solid #E3E3E3;
    border-radius: 14px;
    z-index: 49;
}
.loginStatus .btn.dropdown-toggle:hover{
    background: #EEE;
    border-color: #D7D7D7;
}
.caret{  visibility: hidden; }
.loginStatus ul{  left: -102px; }
.loginStatus ul li i{  margin-right: 7px; }
.loginStatus ul li a:hover,
.loginStatus ul li a:focus,
.loginStatus ul li a:hover i,
.loginStatus ul li a:focus i{
    color: #FFF;
}
 
/* * When Logged Out * */
.loginStatus .login-status-create-account,
.loginStatus > span{
    display: none;
}
.loginStatus .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;
}
.loginStatus .login-status-sign-in::before{
    font-family: 'FontAwesome';
    font-size: 16px;
    content: '';
}
.loginStatus .login-status-sign-in:hover{
    border-color: #D7D7D7;
    background: #EEE;
}
/*===================================
                 End Login Status  */

Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me

Reply Options

Unfold Minimal Login Status by

Timothy Foster, 23 Oct 2013 23:37

Fold

Re: Minimal Login Status

Squark 24 Oct 2013 07:33

This looks great!

Reply Options

Unfold Re: Minimal Login Status by

Squark, 24 Oct 2013 07:33

Fold

Re: Minimal Login Status

(account deleted) 05 Jul 2014 21:44

Something broke this recently. Any idea what happened? I know Timothy has been busy working on the migrating Bootstrap stuff to the CSS site, but I don't think it's related.

Community Admin

Reply Options

Unfold Re: Minimal Login Status by

(account deleted), 05 Jul 2014 21:44

Fold

Re: Minimal Login Status

(account deleted) 05 Jul 2014 22:24

I found 2 problems. Maybe it was something Timothy did. ;-)

The class name being used in the BS layout was "loginStatus", but it looks like it was changed to "login-status" when it was moved to the CSS site.

Adding fuel to the fire, it appears that rendering a code block via data forms does not work.

I'm copying the login-status css back to the main css page here until this gets sorted out. I edited the layout to use "login-status" for the class name.

Community Admin

Reply Options

Unfold Re: Minimal Login Status by

(account deleted), 05 Jul 2014 22:24

Fold

Re: Minimal Login Status

(account deleted) 05 Jul 2014 22:59

I think the "No valid codeblock found" issue is going to be a tough one for the devs. The way a data form page is saved, it just has the filed names and data. For example, the minimized login status page is stored as extar line breaks added for readability):

author: 'Wikidot Community'

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

description: "Essentially, this will transform the login status from:\n\nto:\n\nThis 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.\n\nAdditionally, when logged out, the login status shows an image representing the sign-in action instead.\n\nIn order to use this with a custom layout, you must define the login status module with the following:\n\n[[code type=\"html\"]]\n<div class=\"login-status\">\n  [[module LoginStatus]]\n</div>\n[[/code]]\n\nThis CSSnippet is compatible with [*http://standard-template.wikidot.com the Bootstrap Standard Template]."

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

example: ''

There's no [[code]] blocks like there are in the source of standard pages.

Community Admin

Reply Options

Unfold Re: Minimal Login Status by

(account deleted), 05 Jul 2014 22:59

Fold

Re: Minimal Login Status

(account deleted) 06 Jul 2014 14:52

Finally got this sorted out through the discussion on the feedback site.

This does not work (or any variants that use "local—code" syntax):