Joomla Templates Club 406,261 posts

[bertlmike Friend bertlmikeJoin date: February 2009Posts: 14Downloads:1Uploads:0 Thanks: 9]

#167247

Is there a way to put some placeholder text in the login/password fields? When the login module is published in the “header” position, those fields are only indicated by small icons, and additional placeholder text within the fields might be more descriptive.

– Michael

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#405364

Hi,
for quick do, you can try.
Open file:

http://templates.joomlart.com/ja_edenite/templates/ja_edenite/css/template.css
Replace 1039 by this code


label.ja-login-user span {
background: url("../images/icon-user.gif") no-repeat scroll left center transparent;
display: block;
float: left;
height: 20px;
padding-left: 20px;
width: 60px;
}
template.css (line 1039)
Do same with line 1048

label.ja-login-password span {
background: url("../images/icon-key.gif") no-repeat scroll left center transparent;
display: block;
float: left;
height: 20px;
padding-left: 20px;
width: 60px;
}
Thank you
Viet Vu

[bertlmike Friend bertlmikeJoin date: February 2009Posts: 14Downloads:1Uploads:0 Thanks: 9]

#405373

This seems to be for the Joomla 1.5 CSS – sorry for not being more specific: I’m working on the 1.6 css, which appears to be rather different in this regard, as I can’t find the code you described.
Also I’m not trying to display the field label in front of the login/password fields, but I’d rather have a placeholder text within the fields, that disappears/get overwritten, once the fields are clicked.

Thanks for looking into this!

– Michael

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#405376

Oh. I see. Please moment. Let’s me check code with 1.6
Hi there
It’s not come from our template. It’s joomla login module

modules/mod_login/tmpl/default.php

Find this code

<input id="modlgn-username" type="text" name="username" class="inputbox" size="18" />
Replace by

<input type="text" size="18" class="inputbox" name="username" id="modlgn-username" onclick="this.value='';" onblur="this.value='test'" value="test">
Please change “test” with your value.
Same with password:

<input id="modlgn-passwd" type="password" name="password" class="inputbox" size="18" />
Replace by
<input id="modlgn-passwd" type="password" name="password" class="inputbox" size="18" onclick="this.value='';" onblur="this.value='test'" value="test" />
Please let’s me know if it’s work at your side.
Thank you
Viet Vu

[bertlmike Friend bertlmikeJoin date: February 2009Posts: 14Downloads:1Uploads:0 Thanks: 9]

#405405

Not quite, but thanks for pointing me in the right direction:

Your solution had the problem, that the field would be returned to “test”, once it was out of focus. So at first I added the following code:

value="test" onfocus="if (this.value == 'test') {this.value = '';}" onblur="if (this.value == '') {this.value = 'test';}"

This worked ok for the login field, but the the text in the password field would (naturally) only show as “****”.

After some research I now simply added
placeholder="test"
to both “input” lines, which works beautifully – at least for all “modern” browsers.

Thanks again,

Michael

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#405406

Ya 🙂
Thank you for your adding infor.
I’ll update this topic as SOLVED.
Thank you
Viet Vu

1 user says Thank You to jooservices for this useful post

1. bertlmike

[Author]

Posts