Introducing DropDown Login
Time is money. That means the faster that users can log into your site, the faster they can view what you have to offer. This simple jQuery skin object allows the ability for the user to sign in without being forced to another login page, while also refreshing the current page the user is on after they are authenticated.
Why does your login module take up the entire page?
Your customers will appreciate the time-saving result from that fact that they don’t have to sign into a separate page on your site.
|
|
Now part of the Collection 3.0!
|
| |
|
|
DropDown Login is a MUST for every site where people want a quick and simple login solution. This skin object can be included in any skin and is completely controlled via CSS. Check out some different and unique styles that you could setup to easily control the look of DropDown Login.
* Requires DNN 5.x and higher.
Purchase DropDown Login Now!
Example Implementation / Screenshot:
Check out this product in action! Just click on the Login link at the top of this page!
Easily control the skin object by changing all areas of the CSS / Stylesheet. The stylesheet can be unique for each and every skin file your site uses.
Review the CSS Stylesheet Classes below:
a.signin
{
background: #3A73BB;
padding: 3px 5px 4px;
text-decoration: none;
font-weight: bold;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 4px12px6px;
}
a.signin:hover
{
background: #59B;
padding: 4px12px6px;
}
a.signin, a.signin:hover
{
background-position: 03px !important;
}
a.signin
{
position: relative;
margin-left: 3px;
margin-top: 2px;
padding-top:5px;
}
a.signin span
{
background-position: 100% 50%;
padding: 4px 16px 6px 0;
}
#topnav a.menu-open
{
background: #EEF05E !important;
color: #666 !important;
outline: none;
}
#small_signup
{
display: inline;
float: none;
line-height: 23px;
margin: 25px 0 0;
width: 170px;
}
a.signin.menu-open
{
background-color: #EEF05E;
color: #789;
}
#signin_menu
{
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
display: none;
background-color: #BFCD8F;
position: absolute;
width: 200px;
z-index: 100;
border: 1px transparent;
text-align: left;
padding: 12px;
top: 24.5px;
right: 0px;
margin-top: 5px;
margin-right: 0px;
margin-right: -1px;
color: #789;
font-size: 11px;
line-height: 20px;
}
#signin_menu input[type=text], #signin_menu input[type=password]
{
display: block;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: 1px solid #ACE;
font-size: 13px;
margin: 0 0 5px;
padding: 5px;
width: 203px;
}
#signin_menu p
{
margin: 0;
}
#signin_menu a
{
color: #6AC;
}
#signin_menu label
{
font-weight: normal;
}
#signin_menu p.remember
{
padding: 10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete
{
clear: both;
margin: 5px 0;
}
#signin_menu p a
{
color: #27B !important;
}
.signin_submit
{
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: #F17F05;
border: 1px solid #39D;
color: #fff;
text-shadow: 0 -1px 0 #39d;
padding: 4px 10px 5px;
font-size: 11px;
margin: 0 5px 0 0;
font-weight: bold;
text-shadow: 0 -1px 0 #F17F05;
}
.signin_submit::-moz-focus-inner
{
padding: 0;
border: 0;
}
.signin_submit:hover, #signin_submit:focus
{
background-position: 0 -5px;
cursor: pointer;
}
a.signin img
{
vertical-align:middle;
border-width:0;
}
Purchase DropDown Login Now!