Some people don't really understand how to log on with your SE account in the new logon screen.
And although it might be obvious to most of us, some people find the new dialog hard to understand.
Can we add a logo and some text to make clear users can log on with their SE account? Something like:
[SE LOGO] Log on using your StackExchange account
Followed by the two boxes for email and password.
I second this feature request. In the old login screen we used to have the option right after the Google and Facebook:
We could add something similar that aligns/matches to the current login UI right below the "-OR-" line (preferably center align). Displaying the SE icon and the text e.g. "Log in using Stack Exchange" will make it stand out and surely help prevent the future confusion.
Hmmm, would this be what you're looking for?
This is done by inserting this code into the this div:
div.or-container
<div>
<div style="margin-top: 3px; display: block; margin-bottom: 4px;">
<img style="margin-top: 3px; display: inline-flex;"
src="http://sstatic.net/stackexchange/img/favicon.ico">
</div>
<span style="margin-top: -30px;">Log on using your
StackExchange account</span><br><br>
</div>
This is what we currently have:
body {
position: relative;
background: #f6f6f6;
min-height: 100%;
line-height: 1.3;
font-size: 13px;
margin: 0;
padding: 0;
color: #2a2a28;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
}
.or-container {
text-align: center;
margin-top: 20px;
background-color: #fff;
font-variant: small-caps;
width: 300px;
height: 300px
}
.or-hr {
margin-bottom: -20px;
height: 0;
border: 0;
border-top: 1px solid #e6e6e6
}
#or {
display: inline-block;
position: relative;
padding: 10px;
background-color: #fff
}
#se-login-form {
text-align: left;
margin: 5px 0 5px 0;
transition: none;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
color: #2a2a28;
width: 263px;
line-height: 1.3;
font-size: 100%;
padding: 8px;
margin-bottom: 10px;
height: 18px;
border-radius: 0;
cursor: auto !important;
}
input[type=text],
input[type=email],
input[type=password] {
border: 1px solid #add8e6;
color: #2a2a28;
width: 263px;
line-height: 1.3;
font-size: 100%;
padding: 8px;
margin-bottom: 10px;
height: 18px;
border: 1px solid #e6e6e6;
border-radius: 0;
cursor: auto !important;
}
.fr {
float: right;
text-decoration: none;
}
#more-options-link {
top: 15px;
position: relative;
cursor: pointer;
text-decoration: none;
}
input[type=button] {
text-align: center;
background: #07c;
color: #fff;
border-radius: 3px;
width: 120px;
padding: 12px 40px;
box-shadow: none;
text-shadow: none;
text-decoration: none;
border: none;
cursor: pointer;
margin-bottom: 0 !important
}
#more-options-link {
top: 15px;
position: relative;
cursor: pointer
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="or-container">
<br>
<hr class="or-hr">
<div id="or">or</div>
<div id="se-login-form">
<label for="email">Email</label>
<input name="email" id="email" size="30" maxlength="100" placeholder="[email protected]" type="email">
<label for="password">Password</label>
<input name="password" id="password" placeholder="********" type="password">
<br><a class="fr" href="#">forgot password?</a>
<br><a id="more-options-link" href="#">more login options</a>
<input class="fr" id="submit-button" name="submit-button" value="Log in" type="button">
</div>
</div>And with the inserted text:
body {
position: relative;
background: #f6f6f6;
min-height: 100%;
line-height: 1.3;
font-size: 13px;
margin: 0;
padding: 0;
color: #2a2a28;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
}
span {
display: table-cell;
vertical-align: middle;
text-align: center
}
.or-container {
text-align: center;
margin-top: 20px;
background-color: #fff;
font-variant: small-caps;
width: 300px;
height: 300px
}
.or-hr {
margin-bottom: -20px;
height: 0;
border: 0;
border-top: 1px solid #e6e6e6
}
#or {
display: inline-block;
position: relative;
padding: 10px;
background-color: #fff
}
#se-login-form {
text-align: left;
margin: 5px 0 5px 0;
transition: none;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
color: #2a2a28;
width: 263px;
line-height: 1.3;
font-size: 100%;
padding: 8px;
margin-bottom: 10px;
height: 18px;
border-radius: 0;
cursor: auto !important;
}
input[type=text],
input[type=email],
input[type=password] {
border: 1px solid #add8e6;
color: #2a2a28;
width: 263px;
line-height: 1.3;
font-size: 100%;
padding: 8px;
margin-bottom: 10px;
height: 18px;
border: 1px solid #e6e6e6;
border-radius: 0;
cursor: auto !important;
}
.fr {
float: right;
text-decoration: none;
}
#more-options-link {
top: 15px;
position: relative;
cursor: pointer;
text-decoration: none;
}
input[type=button] {
text-align: center;
background: #07c;
color: #fff;
border-radius: 3px;
width: 120px;
padding: 12px 40px;
box-shadow: none;
text-shadow: none;
text-decoration: none;
border: none;
cursor: pointer;
margin-bottom: 0 !important
}
#more-options-link {
top: 15px;
position: relative;
cursor: pointer
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="or-container">
<br>
<hr class="or-hr">
<div id="or">or</div>
<div>
<div style="margin-top: 3px; display: block; margin-bottom: 4px;">
<img style="margin-top: 3px; display: inline-flex;" src="http://sstatic.net/stackexchange/img/favicon.ico">
</div>
<span style="padding-left: 10px;">Log on using your
StackExchange account</span>
</div>
<div id="se-login-form">
<label for="email">Email</label>
<input name="email" id="email" size="30" maxlength="100" placeholder="[email protected]" type="email">
<label for="password">Password</label>
<input name="password" id="password" placeholder="********" type="password">
<br><a class="fr" href="#">forgot password?</a>
<br><a id="more-options-link" href="#">more login options</a>
<input class="fr" id="submit-button" name="submit-button" value="Log in" type="button">
</div>
</div>Of course, some CSS is missing
