Author Topic: Drop Down Sign in  (Read 7699 times)

agten

  • Confirmed Member
  • **
  • Posts: 14
  • Karma: +1/-0
Drop Down Sign in
« on: November 07, 2012, 02:39:29 PM »
Is it possible to add a Drop down log in?
im very used to HTML / CSS / JS but not with PHP
so iv written this drop down sign in for a different site i got, but idk the php parts.

HTML

Code: [Select]
<nav>
<ul>
<li id="login">
<a id="login-trigger" href="#">
Log in <span>▼</span>
</a>
<div id="login-content">
<form>
<fieldset id="inputs">
<input id="username" type="email" name="Email" placeholder="Your email address" required>   
<input id="password" type="password" name="Password" placeholder="Password" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" value="Log in">
<label><input type="checkbox" checked="checked"> Keep me signed in</label>
</fieldset>
</form>
</div>                     
</li>
<li id="signup">
<a href="">Sign up FREE</a>
</li>
</ul>
</nav>

CSS

Code: [Select]

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  float: right;
  background: #eee;
  border-bottom: 1px solid #fff;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;   
}

nav li {
  float: left;         
}

nav #login {
  border-right: 1px solid #ddd;
  -moz-box-shadow: 1px 0 0 #fff;
  -webkit-box-shadow: 1px 0 0 #fff;
  box-shadow: 1px 0 0 #fff; 
}

nav #login-trigger,
nav #signup a {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  height: 25px;
  line-height: 25px;
  font-weight: bold;
  padding: 0 8px;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 #fff;
}

nav #signup a {
  -moz-border-radius: 0 3px 3px 0;
  -webkit-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}

nav #login-trigger {
  -moz-border-radius: 3px 0 0 3px;
  -webkit-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}

nav #login-trigger:hover,
nav #login .active,
nav #signup a:hover {
  background: #fff;
}

nav #login-content {
  display: none;
  position: absolute;
  top: 24px;
  right: 0;
  z-index: 999;   
  background: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
  background-image: -webkit-linear-gradient(top, #fff, #eee);
  background-image: -moz-linear-gradient(top, #fff, #eee);
  background-image: -ms-linear-gradient(top, #fff, #eee);
  background-image: -o-linear-gradient(top, #fff, #eee);
  background-image: linear-gradient(top, #fff, #eee); 
  padding: 15px;
  -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  -moz-border-radius: 3px 0 3px 3px;
  -webkit-border-radius: 3px 0 3px 3px;
  border-radius: 3px 0 3px 3px;
}

nav li #login-content {
  right: 0;
  width: 250px; 
}

/*--------------------*/

#inputs input {
  background: #f1f1f1;
  padding: 6px 5px;
  margin: 0 0 5px 0;
  width: 238px;
  border: 1px solid #ccc;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 1px 1px #ccc inset;
  -webkit-box-shadow: 0 1px 1px #ccc inset;
  box-shadow: 0 1px 1px #ccc inset;
}

#inputs input:focus {
  background-color: #fff;
  border-color: #e8c291;
  outline: none;
  -moz-box-shadow: 0 0 0 1px #e8c291 inset;
  -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
  box-shadow: 0 0 0 1px #e8c291 inset;
}

/*--------------------*/

#login #actions {
  margin: 10px 0 0 0;
}

#login #submit {
  background-color: #d14545;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e97171), to(#d14545));
  background-image: -webkit-linear-gradient(top, #e97171, #d14545);
  background-image: -moz-linear-gradient(top, #e97171, #d14545);
  background-image: -ms-linear-gradient(top, #e97171, #d14545);
  background-image: -o-linear-gradient(top, #e97171, #d14545);
  background-image: linear-gradient(top, #e97171, #d14545);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;   
  border: 1px solid #7e1515;
  float: left;
  height: 30px;
  padding: 0;
  width: 100px;
  cursor: pointer;
  font: bold 14px Arial, Helvetica;
  color: #fff;
}

#login #submit:hover,
#login #submit:focus {
  background-color: #e97171;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d14545), to(#e97171));
  background-image: -webkit-linear-gradient(top, #d14545, #e97171);
  background-image: -moz-linear-gradient(top, #d14545, #e97171);
  background-image: -ms-linear-gradient(top, #d14545, #e97171);
  background-image: -o-linear-gradient(top, #d14545, #e97171);
  background-image: linear-gradient(top, #d14545, #e97171);
}

#login #submit:active {
  outline: none;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}

#login #submit::-moz-focus-inner {
  border: none;
}

#login label {
  float: right;
  line-height: 30px;
}

#login label input {
  position: relative;
  top: 2px;
  right: 2px;
}

JS

Code: [Select]

$(document).ready(function(){
$('#login-trigger').click(function(){
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');

if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
else $(this).find('span').html('&#x25BC;')
})
});


Regards
Arno

maverick

  • Administrator
  • Veteran Member
  • *****
  • Posts: 3143
  • Karma: +211/-7
    • Maverick Webworks
Re: Drop Down Sign in
« Reply #1 on: November 09, 2012, 10:28:49 AM »
Yes it's possible, the best way to accomplish it is using jQuery, such as the example code provided at this site - http://ahmadassaf.com/blog/5079/an-easy-way-to-create-login-panel-with-jquery-and-css-3/

I used this code for a client's site several years ago and it worked rather well. To get it sized and functioning properly will require some knowledge in jQuery/JS, HTML and CSS.

Etano already utilizes the jQuery source library which is linked to in the index.html and frame.html header section
Code: [Select]
<script type="text/javascript" src="{tplvars.baseurl}/js/jquery.js?v={tplvars.js_lib_v}"></script>
All need to do is implement the code stuff from the above mentioned site and tweak it to suit your needs.
 


Fusion Responsive Template & Free Mods
http://www.maverickwebworks.com
DO NOT PM me asking for personal help. Post your problem or request in the forums so the entire community can contribute and benefit.

agten

  • Confirmed Member
  • **
  • Posts: 14
  • Karma: +1/-0
Re: Drop Down Sign in
« Reply #2 on: November 09, 2012, 10:51:33 AM »
Where do i place the JQuery code?

maverick

  • Administrator
  • Veteran Member
  • *****
  • Posts: 3143
  • Karma: +211/-7
    • Maverick Webworks
Re: Drop Down Sign in
« Reply #3 on: November 09, 2012, 11:11:00 AM »
The code on the site basically tells you where, it goes between the header tags, and should always be placed towards the bottom of the closing header tag so it's called after the header links to CSS and javascript files, etc.

<!-- Call jQuery in <head></head> tags of the document -->
<script type="text/javascript" src="jquery.js"></script>
<!-- jQuery to apply actions to the link -->
<script type="text/javascript">
$(document).ready(function(){
    $("#login-link").click(function(){
        $("#login-panel").slideToggle(200);
    })
})
<!-- jQuery to apply actions to the ESC key -->
$(document).keydown(function(e) {
    if (e.keyCode == 27) {
        $("#login-panel").hide(0);
    }
});
</script>

Fusion Responsive Template & Free Mods
http://www.maverickwebworks.com
DO NOT PM me asking for personal help. Post your problem or request in the forums so the entire community can contribute and benefit.

agten

  • Confirmed Member
  • **
  • Posts: 14
  • Karma: +1/-0
Re: Drop Down Sign in
« Reply #4 on: November 09, 2012, 11:15:23 AM »
The code on the site basically tells you where, it goes between the header tags, and should always be placed towards the bottom of the closing header tag so it's called after the header links to CSS and javascript files, etc.

<!-- Call jQuery in <head></head> tags of the document -->
<script type="text/javascript" src="jquery.js"></script>
<!-- jQuery to apply actions to the link -->
<script type="text/javascript">
$(document).ready(function(){
    $("#login-link").click(function(){
        $("#login-panel").slideToggle(200);
    })
})
<!-- jQuery to apply actions to the ESC key -->
$(document).keydown(function(e) {
    if (e.keyCode == 27) {
        $("#login-panel").hide(0);
    }
});
</script>

My Bad

agten

  • Confirmed Member
  • **
  • Posts: 14
  • Karma: +1/-0
Re: Drop Down Sign in
« Reply #5 on: November 09, 2012, 01:50:19 PM »
Anyways Maverick i made myself a new log in box, but when i try to log on, it doesn't wanna log on.
let me show u the widget codes:

Original :

Code: [Select]
<!--opt name="tplvars.user_logged"-->
<div id="login-box">
<fieldset>
<a href="{tplvars.relative_url}processors/logout.php" id="logout" title="Sign out">Sign out</a>
<span id="hello-message">
Hello, <a href="{tplvars.relative_url}my_profile.php" title="{tplvars.myself.user}">{tplvars.myself.user}</a>!
</span>
</fieldset>
</div>
<!--/opt name="tplvars.user_logged"-->
<!--opt name="!tplvars.user_logged"-->
<form id="login-box" action="{tplvars.relative_url}processors/login.php" method="post">
<fieldset>
<input type="text" id="username" name="user" />
<input type="password" id="password" name="pass" />
<input type="image" id="login" alt="Login" src="{tplvars.tplurl}/images/btn-login-over.gif" />
</fieldset>
<fieldset>
<span id="lost-password">
<a href="{tplvars.relative_url}pass_lost.php" title="Lost password?">Lost password?</a>
</span>
<span id="sign-up">
Hello guest, please login above or <a href="{tplvars.relative_url}join.php" title="Sign up">sign up</a>.
</span>
</fieldset>
</form>
<!--/opt name="!tplvars.user_logged"-->

My custom made log in:

Code: [Select]
<!--opt name="tplvars.user_logged"-->
<div id="login-box">
<fieldset>
<a href="{tplvars.relative_url}processors/logout.php" id="logout" title="Sign out">Sign out</a>
<span id="hello-message">
Hello, <a href="{tplvars.relative_url}my_profile.php" title="{tplvars.myself.user}">{tplvars.myself.user}</a>!
</span>
</fieldset>
</div>
<!--/opt name="tplvars.user_logged"-->
<!--opt name="!tplvars.user_logged"-->
<div class="container">
<section id="content">
<form id="login-box" action="{tplvars.relative_url}processors/login.php" method="post">
<div>
<input type="text" placeholder="Username" required="" id="username" />
</div>
<div>
<input type="password" placeholder="Password" required="" id="password" />
</div>
<div>
<input type="submit" value="Log in" />
<a href="{tplvars.relative_url}pass_lost.php">Lost your password?</a>
<a href="{tplvars.relative_url}join.php">Register</a>
</div>
</form><!-- form -->
        <!--/opt name="!tplvars.user_logged"-->
</section><!-- content -->
</div><!-- container -->


Any help?

agten

  • Confirmed Member
  • **
  • Posts: 14
  • Karma: +1/-0
Re: Drop Down Sign in
« Reply #6 on: November 09, 2012, 01:53:50 PM »
Fixed

but now my margins are very fucked up when i am logged in, everything changed from place :(

maverick

  • Administrator
  • Veteran Member
  • *****
  • Posts: 3143
  • Karma: +211/-7
    • Maverick Webworks
Re: Drop Down Sign in
« Reply #7 on: November 09, 2012, 04:37:47 PM »
Well it is a bit of an advanced feature you're attempting to add to Etano and will require a bit of work tweaking things to try and get it just right. It took me several hours to implement it into a project I did.

In your skins_site/def/widgets/login/display.html file try using something like this:
Code: [Select]
<!--opt name="tplvars.user_logged"-->
<div id="login-box">
<fieldset>
<a href="{tplvars.relative_url}processors/logout.php" id="logout" title="Sign out">Sign out</a>
<span id="hello-message">
Hi, <a href="{tplvars.relative_url}my_profile.php" title="{tplvars.myself.user}">{tplvars.myself.user}</a>
</span>
</fieldset>
</div>
<!--/opt name="tplvars.user_logged"-->
<!--opt name="!tplvars.user_logged"-->
<a id="login-link" href="#login" onclick="return false;" title="Login">Login Here</a>
<div id="login-panel">
<form action="{tplvars.relative_url}processors/login.php" method="post">
<p>
<label>Username:
<input type="text" name="user" />
</label><br />
<label>Password:
<input type="password" name="pass" />
</label><br />
<input type="image" id="logout" alt="Login" src="{tplvars.tplurl}/images/btn-login-out.gif" />
</form>
</div>
<div id="sign-lost"><a href="join_select.php" title="Join Now">Sign Up</a> | <a href="{tplvars.relative_url}pass_lost.php" title="Lost password">Lost Password</a></div>
<!--/opt name="!tplvars.user_logged"-->
Note: when editing widgets such as the login display, you may need to regenerate your skin in the admin.

The rest will mostly be CSS tweaks.
Be sure to include the CSS code in the skins_site/def/styles/header.css file.

You can start by trying this CSS code:
Code: [Select]
/* Login box */

#login-box {
position: absolute;
top: 0px;
right: 0px;
width: 299px;
font-size: 12px;
font-weight: bold;
z-index: 15;
}

#login-box fieldset {
border: none;
}

* html #login-box input {
padding: 2px 5px;
}
#login-box input {
border: 0;
background: none;
background-position: top left;
background-repeat: repeat-x;
font-size: 12px;
padding: 4px 5px 0;
}

* html #login-box #username {
margin-bottom: 4px;
}
#login-box #username {
width: 117px;
height: 16px;
margin-bottom: 7px;
background-image: url('../images/input-user-bg.gif');
}

* html #login-box #password {
margin-bottom: 4px;
}
#login-box #password {
width: 117px;
height: 16px;
margin-bottom: 7px;
background-image: url('../images/input-pass-bg.gif');
}

#login-box #login {
padding: 0;
}
#login-box fieldset > #login {
margin-bottom: -3px;
}


#login-box #logout {
float: right;
display: block;
width: 56px;
height: 20px;
background-image: url('../images/btn-logout.gif');
background-position: bottom;
margin: 3px 2px 2px 2px;
text-indent: -9999px;
}

#login-box #logout:hover {
background-position: bottom;
}

#login-box span {
color: #fff; /* HELLO STATIC FONT COLOR */
font-weight: bold;
font-size: 12px;
}

#hello-message a {
color: #fff; /* USERNAME LINK STATIC FONT COLOR */
font-weight: bold;
font-size: 12px;
text-decoration: none;
}

#hello-message a:hover, #login-box a:active {
color: #fff; /* USERNAME LINK HOVER MOUSE-OVER FONT COLOR */
text-decoration: underline;
}

#login-box #lost-password {
float: right;
}

#login-box #hello-message {
float: right;
font-weight: bold;
margin-top: 6px;
font-size: 12px;
z-index: 15;
}

#login-box #lost-password a {
color: #ddd; /* STATIC FONT COLOR */
font-weight: bold;
text-decoration: none;
}

#login-box #lost-password a:hover, #login-box a:active {
color: #aaa; /* HOVER MOUSE-OVER FONT COLOR */
font-weight: bold;
text-decoration: underline;
}

#pianist {
position: absolute;
right: 185px;
top: -1px;
z-index: 5;
}

/* Login Panel */
#login-link {
    position: absolute;
    top: 5px;
    right: 0px;
    display: block;
    font-size: 13px;
    font-weight: bold;
    color: #FFF;
    text-decoration: none;
    z-index: 15;
}

 
#login-panel {
    position: absolute;
    top: 21px;
    right: 0px;
    width: 190px;
    padding: 10px 15px 3px 15px;
    background: #000;
    font-size: 13px;
    font-weight: bold;
    color: #FFF;
    display: none;
    z-index: 110;
}

#login-panel a {
    display: inline;
    font-size: 11px;
    font-weight: bold;
    color: #FF0000;
    text-decoration: none;
    padding-bottom: 3px;
}

#sign-lost {
    position: absolute;
    top: 30px;
    right: 0px;
    color: #FFF;
    z-index: 15;
}

#sign-lost a {
    font-size: 11px;
    font-weight: bold;
    color: #FFF;
    text-decoration: none;
}

#sign-lost a:hover {
    font-size: 11px;
    color: #FF0000;
    text-decoration: none;
}

You may need to tweak some things such as color to suit your site. This is about as far as I can take you, the rest will be up to your abilities with CSS.

Fusion Responsive Template & Free Mods
http://www.maverickwebworks.com
DO NOT PM me asking for personal help. Post your problem or request in the forums so the entire community can contribute and benefit.

agten

  • Confirmed Member
  • **
  • Posts: 14
  • Karma: +1/-0
Re: Drop Down Sign in
« Reply #8 on: November 10, 2012, 04:50:37 AM »
Yeah, the hard thign about etano is that every piece of css is in a diff file :p
anyway this is when im logged of :



but then when i log on the margins get quiet fucked up :



I'm gettign psised about it , CSS can be a bitch

maverick

  • Administrator
  • Veteran Member
  • *****
  • Posts: 3143
  • Karma: +211/-7
    • Maverick Webworks
Re: Drop Down Sign in
« Reply #9 on: November 10, 2012, 10:21:23 AM »
Quote
Yeah, the hard thign about etano is that every piece of css is in a diff file :p
Actually this is a good thing, if all the CSS was in just one or several files it would create more bloat and make it even harder trying to find what you need. By having the CSS spread out into a bunch of separate files makes it easier to find and edit just what you need for the page you're wanting to make changes to. It also makes it easier to customize page layouts without so many conflicts, for example if you didn't want a left menu on a particular page.

When it comes to redesigning any complex CMS type script it's never an easy task and there's almost always a fairly strong learning curve in trying to figure out how everything is pieced together, just like a big jigsaw puzzle. Be thankful it wasn't designed using the smarty template system like some CMS scripts are, unless you're an expert in smarty code it can often be difficult to to figure out how to make even the simplest of changes.

Yes CSS can sometimes be challenging even for the most skilled and knowledgeable designers, especially when it comes to designing for complex CMS sites.

Your problem is mostly with your overall redesign of the header and once logged you likely have extra or empty DIV's causing things to be off. You've chosen a more complex path by making your header so big with such a large photo background and including the search box into the header, which leaves no room for your login box and will likely mess things up when logged in where there's no search box.

It would be easier if your header layout was consistent throughout the site where it's kept fairly small and includes your name or logo, then place your large image and search box below the header into the body. There's really no need to have that big image appear on all your pages, once people have seen it and it's served it's purpose as a presentation and for impact, they don't care about it any longer, it just becomes needless garnish consuming real-estate on your other pages.

Of course you could alternately create a design that's as cool and complex as you want, and even have the index page totally different than the rest of your site, that's if you have the skills and patience, and are willing to invest the time. I've been doing web design for a very long time and know CSS and Etano as well as anyone, but even for me it can still be very time consuming, and at times even frustrating.


Fusion Responsive Template & Free Mods
http://www.maverickwebworks.com
DO NOT PM me asking for personal help. Post your problem or request in the forums so the entire community can contribute and benefit.

agten

  • Confirmed Member
  • **
  • Posts: 14
  • Karma: +1/-0
Re: Drop Down Sign in
« Reply #10 on: November 10, 2012, 11:11:04 AM »
Thanks for the feedback :)