Skip Navigation

[Résolu] Need help positioning glyphicon icons in login form

This support ticket is created Il y a 6 années et 3 mois. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

This topic contains 4 réponses, has 2 voix.

Last updated by Robert Campbell Il y a 6 années et 3 mois.

Assisted by: Nigel.

Auteur
Publications
#599647

Sorry for the double ticket on this topic!

I've created a custom login page using the [wpv-login-form] shortcode. The only problem I have is getting the bootstrap glyphicon icons to position properly, so that they line up just before their respective input fields.

You can see the form at hidden link

Content template code to date:-

<br>
<br>
<div class="logborder">
<h4>
Log In to Audio Gear
</h4>

<i class="glyphicon glyphicon-user"></i>
  
<i class="glyphicon glyphicon-lock"></i>
  
[wpv-login-form redirect_url="<em><u>hidden link</u></em>"]
Forgot your password?
<br>
<br>
</div>
<br>
<br>

CSS

.page-id-30648 .entry-content {
background-color: #f1f1f1;
}

.logborder
{
width: 320px;
margin: auto;
background: white;
border: 1px solid #e5e5e5;
border-radius: 3px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05), 0 0 2px rgba(0, 0, 0, 0.05);
text-align: center;
}

form#loginform input#user_login {
padding-left: 35px;
}

form#loginform input#user_pass {
padding-left: 35px;
}

form#loginform
{
padding:0px 28px 28px 28px;
}

form#loginform p label {
display: none;
}

form#loginform input {
width: 100%;
height: 40px;
font-size: 16px;
line-height: 40px;
}

form#loginform input#wp-submit {
background: #60c43f;
border-color: #4c9f31;
color: white;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
border-radius: 2px;
border: 1px solid #d9d9d9;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 0 rgba(255, 255, 255, 0.05);
width: 100%;
}

JS

$('#user_login').attr('placeholder', 'Username');

$('#user_pass').attr('placeholder', 'Password');

Could you help advise me how best to position the two bootstrap icons to they will stay in the correct place irrespective of screen size and the appearance of error messages (e.g. ERROR: The username field is empty.)

Regards

Robert

#599851

Nigel
Supporter

Languages: Anglais (English ) Espagnol (Español )

Timezone: Europe/London (GMT+00:00)

Hi Robert

I would remove the icons from your template and insert them with JavaScript, or, rather, jQuery.

Something like this:

$('<i class="glyphicon glyphicon-user"></i>').insertBefore('#user_login');
$('<i class="glyphicon glyphicon-lock"></i>').insertBefore('#user_pass');

You will need to tweak your CSS to make space for the icons, adding left margins to the input to accommodate them.

You are using the jQuery insertBefore method for this: hidden link

#600010

Hi Nigel

I tried using the code you suggested but the glyphicons get inserted into the rows above the input field boxes. I want the glyphicons to appear inside the input field boxes.

The only way I could find to place them inside the boxes is using the position: relative code. Here's what seems to work:-

CONTENT

<br>
<br>
<div class="logborder">
<h4>
Log In to Audio Gear
</h4>
[wpv-login-form redirect_url="<em><u>hidden link</u></em>"]
Forgot your password?
<br>
<br>
</div>
<br>
<br>

CSS

.page-id-30648 .entry-content {
background-color: #f1f1f1;
}

.logborder
{
width: 320px;
margin: auto;
background: white;
border: 1px solid #e5e5e5;
border-radius: 3px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05), 0 0 2px rgba(0, 0, 0, 0.05);
text-align: center;
}

form#loginform input#user_login {
padding-left: 35px;
}

form#loginform input#user_pass {
padding-left: 35px;
}

.glyphicon-user{
float: left;
position: relative;
top: 25px;
left: 10px;
}

.glyphicon-lock{
float: left;
position: relative;
top: 25px;
left: 10px;
}

form#loginform
{
padding:0px 28px 28px 28px;
}

form#loginform p label {
display: none;
}

form#loginform input {
width: 100%;
height: 40px;
font-size: 16px;
line-height: 40px;
}

form#loginform input#wp-submit {
background: #60c43f;
border-color: #4c9f31;
color: white;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
border-radius: 2px;
border: 1px solid #d9d9d9;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 0 rgba(255, 255, 255, 0.05);
width: 100%;
}

JS

$('#user_login').attr('placeholder', 'Username');
$('#user_pass').attr('placeholder', 'Password');

$('<i class="glyphicon glyphicon-user"></i>').insertBefore('#user_login');
$('<i class="glyphicon glyphicon-lock"></i>').insertBefore('#user_pass');

Have a look to hidden link

Is this the best way? Or is there another way to use .insertBefore but keep the glyphicon within the input field boxes?

Regards

Robert

#600196

Nigel
Supporter

Languages: Anglais (English ) Espagnol (Español )

Timezone: Europe/London (GMT+00:00)

Hi Robert

Sorry, I had not understood that you wanted the icons to appear as if they were within the input field, I thought you meant for them to be to the left of them.

What you have done looks fine, you need to either use float or position absolute to locate the icons where you want them in that case.

The alternative would be to remove the border from the input element and add it to the p element that surrounds both the icon and the input, which would give you a similar visual result, but I don't see any reason to change what you have done.

#600315

Hi Nigel

Thanks for the confirmation and further advice. Should be fine with this now.

Regards

Robert

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.