Kevin Maschke started a discusssion in the thread
DropDown Login HELP!
Hi, I'm currently trying to add a dropdown link to my header menu. If you go to my site (http://km.hostei.com/php-fusion) you can see what I mean. Look at the top right, next to top navigation there's a button/link that says "Login".
If you click on the button you'll see a dropdown menu appears:
Now, I would like to use this dropdown menu with php-fusion login and user panel once logged in. But without changing the style. How can I do that?
The login uses:
Code
Login
Email Address
Password
Remember me
Forgot your password?
And the CSS is:
Code
/* Login Container (default to float:right) */
#loginContainer {
position:relative;
float:right;
font-size:12px;
}
/* Login Button */
#loginButton {
background: #FFFFFF url(images/navbar.png);
color: #FFFFFF;
display: block;
font-family: Verdana, Arial, Tahoma;
font-size: 12px;
font-weight: normal;
margin: 0px 5px 0px 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-khtml-border-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
}
/* Login Button Text */
#loginButton:hover {
background: #FFFFFF url(images/navhover.png);
color: #003663;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-khtml-border-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
}
/* Login Box */
#loginBox {
position:absolute;
top:67px;
right:0;
display:none;
z-index:29;
}
/* If the Login Button has been clicked */
#loginButton.active {
border-radius:3px 3px 0 0;
}
#loginButton.active span {
background-position:53px -76px;
}
/* A Line added to overlap the border */
#loginButton.active em {
position:absolute;
width:100%;
height:1px;
background:#d2e0ea;
bottom:-1px;
}
/* Login Form */
#loginForm {
width:248px;
border:1px solid #899caa;
border-radius:3px 0 3px 3px;
-moz-border-radius:3px 0 3px 3px;
margin-top:-1px;
background:#d2e0ea;
padding:6px;
}
#loginForm fieldset {
margin:0 0 12px 0;
display:block;
border:0;
padding:0;
}
fieldset#body {
background:#fff;
border-radius:3px;
-moz-border-radius:3px;
padding:10px 13px;
margin:0;
}
#loginForm #checkbox {
width:auto;
margin:1px 9px 0 0;
float:left;
padding:0;
border:0;
*margin:-3px 9px 0 0; /* IE7 Fix */
}
#body label {
color:#3a454d;
margin:9px 0 0 0;
display:block;
float:left;
}
#loginForm #body fieldset label {
display:block;
float:none;
margin:0 0 6px 0;
}
/* Default Input */
#loginForm input {
width:92%;
border:1px solid #899caa;
border-radius:3px;
-moz-border-radius:3px;
color:#3a454d;
font-weight:bold;
padding:8px 8px;
box-shadow:inset 0px 1px 3px #bbb;
-webkit-box-shadow:inset 0px 1px 3px #bbb;
-moz-box-shadow:inset 0px 1px 3px #bbb;
font-size:12px;
}
/* Sign In Button */
#loginForm #login {
width:auto;
float:left;
background:#339cdf url(images/loginbuttonbg.png) repeat-x;
color:#fff;
padding:7px 10px 8px 10px;
text-shadow:0px -1px #278db8;
border:1px solid #339cdf;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
margin:0 12px 0 0;
cursor:pointer;
*padding:7px 2px 8px 2px; /* IE7 Fix */
}
/* Forgot your password */
#loginForm span {
text-align:center;
display:block;
padding:7px 0 4px 0;
}
#loginForm span a {
color:#3a454d;
text-shadow:1px 1px #fff;
font-size:12px;
}
input:focus {
outline:none;
}
Any help on this? Copying the "user_info_panel" content whas my first thought, but I don't get it addapted to the style of this login box.
Another problem is that the dropdown boz should be aligned with the right corner of the button, I mean, bottom right corner of button should be toghether with top right corner of login box...
I'll really appreciate any help
18 Oct 2011 at 07:36 PM
