How to insert icons in the login form

Unique

Posts: 421

Reputation: 35

Message # 1 | 4:25 PM 2010-10-04

1. First add this code anywhere in your CSS:

Code

input.pass
{
background: url(http://unique.ucoz.org/1.gif) no-repeat;
background-color: #fff;
background-position: 0 50%;
color: #000;
padding-left: 18px;
}

input.login
{
background: url(http://unique.ucoz.org/2.gif) no-repeat;
background-color: #fff;
background-position: 0 50%;
color: #000;
padding-left: 18px;
}

2.
Add class login to the username field.
Add class pass to the password field.

Example:

Quote

You're done happy

Attachments: 6603851.gif (2.8 Kb)

ExtraCafe.rs, we're the best !

Zain

Posts: 68

Reputation: -7

Message # 2 | 8:10 AM 2010-10-07

thanks

00_Eagle_00

Posts: 40

Reputation: 3

Message # 3 | 12:40 PM 2010-10-07

Very nice tutorial.. Thanks booze

Looking for something funny?? Check my website >> http://unrealdistrict.ucoz.com/

paragogos

Posts: 16

Reputation: 0

Message # 4 | 3:49 PM 2011-09-04

WHERE TO ADD THESE? PLEASE BE MORE SPECIFIC sad

2.
Add class login to the username field.
Add class pass to the password field.

Example:
Quote
<input class="login" type="text" name="user" value="" size="20"
<input class="pass" type="password" name="password" size="20"
style="width:100%" maxlength="15" />

Paradox

Old Guard

Posts: 3284

Reputation: 145

Message # 5 | 4:03 PM 2011-09-04

paragogos, to do this you need to open Control Panel > Design Customisation > Login form. Then add the two classes to the login and password fields.

Hope this helps, happy

Jack of all trades in development, design, strategy.
Working as a Support Engineer.
Been here for 13 years and counting.

paragogos

Posts: 16

Reputation: 0

Message # 6 | 4:31 PM 2011-09-04

can you give me the complete code?

Paradox

Old Guard

Posts: 3284

Reputation: 145

Message # 7 | 4:57 PM 2011-09-04

Uh, don't worry about what I said above. I've been neglecting to look at what designs you can actualy edit in the control panel. dry

What you need to do now that I've finally woken up is open Control Panel > Customise Design > Login form. Then add the two classes into the login and password fields. So in the end it looks like this;

Code

<?if($PAGE_ID$="login")?><div style="width:180px;"><?endif?>
<table border="0" cellspacing="1" cellpadding="0" width="100%">
<?if($ERROR$)?><td colspan="2" style="color:red;text-align:center;">$ERROR$</td><?endif?>
<tr><td width="20%" nowrap="nowrap">E-mail:$UID_ICON$</td><td><input class="loginField" type="text" name="user" value="" size="20" style="width:100%;" maxlength="50" class="login"/></td></tr>
<tr><td>Password:</td><td><input class="loginField" type="password" name="password" size="20" style="width:100%" maxlength="15" class="pass"/></td></tr>
</table>
<table border="0" cellspacing="1" cellpadding="0" width="100%">
<tr><td nowrap><input id="rem$PAGE_ID$" type="checkbox" name="rem" value="1" checked="checked"/><label for="rem$PAGE_ID$">remember</label> <?if($PAGE_ID$="login" && $HIDDEN_ALLOWED$)?><br /><input id="hid$PAGE_ID$" type="checkbox" name="hidden" value="1" /><label for="hid$PAGE_ID$">hidden</label><?endif?></td><td align="right" valign="top"><input class="loginButton" name="sbm" type="submit" value="Login"/></td></tr>
<tr><td colspan="2"><div style="font-size:7pt;text-align:center;"><a href="$REMINDER_LINK$">Lost password</a> | <a href="$REGISTER_LINK$">Registration</a></div></td></tr>
</table>
<?if($PAGE_ID$="login")?></div><?endif?>

Sorry again for posting the wrong thing. I keep thinking that there isn;t a design for the form when there is. dry

Jack of all trades in development, design, strategy.
Working as a Support Engineer.
Been here for 13 years and counting.

paragogos

Posts: 16

Reputation: 0

Message # 8 | 7:11 PM 2011-09-04

i paste this code but nothing happens sad

Paradox

Old Guard

Posts: 3284

Reputation: 145

Message # 9 | 7:19 PM 2011-09-04

Okay, paste this over the current CSS. See if it works,

Code

input.pass
{
background: url('http://locker.ucoz.com/icons/key.png') no-repeat;
background-color: #fff;
background-position: 0 50%;
color: #000;
padding-left: 18px;
}

input.login
{
background: url('http://locker.ucoz.com/icons2/user.png') no-repeat;
background-color: #fff;
background-position: 0 50%;
color: #000;
padding-left: 18px;
}

Jack of all trades in development, design, strategy.
Working as a Support Engineer.
Been here for 13 years and counting.

paragogos

Posts: 16

Reputation: 0

Message # 10 | 0:32 AM 2011-09-05

again nothing...i paste it into css but no icos appear sad

Natashko

Posts: 3366

Reputation: 171

Message # 11 | 1:35 PM 2011-09-05

paragogos, make sure you have followed all the instruction in the first post. If you check and it still doesn't work, provide a website name for us to check.

Page 1 of 1 1
Forum moderator: bigblog