how to modify the / * login module * /


Author Message
Snow79

Posted: 11/3/2011
Quote message 

Hi, I would like to change the look of my login form, I'd like to change the shape of the input-box to be square to oval.
I'd like to place the user name written beside the input box and not on the input box.
I presume that it must modify the css templet, the only lines that I found on the login form are as follows:

/ * Login module * /


# form-login fieldset.input
{
border: none;
margin: 0;
padding: 0;
}

# form-login br
{
display: none;
}

p # form-login
{
margin: 0.5em 0 0 0;
}

# # form-login-form-login username label
# form-login # form-login-password label
{
display: block;
}

# form-login # form-login-remember inputs
{
margin: 0;
padding: 0;
vertical-align: bottom;
position: relative;
top:-1px;
}

# # form-login modlgn_username,
# # form-login modlgn_passwd
{
width: 95%;
margin: 0;
padding: 0;
}

ul # form-login
{
list-style-type: none;
margin: 0;
padding: 0;
}

ul li # form-login
{
background-image: none;
padding: 0;
}

does anyone have any idea where and how is defined the input box?
does anyone have any idea where he might be specified in the input box's position in relation to the written (example username)?
Tnk for all your support.
 
Gina

Posted: 11/4/2011
Quote message 

Can you give the link please
 
SNOW79

Posted: 11/4/2011
Quote message 

yes, this is an example :
http://www.sito01.joomlafree.it/ of (standard look artisteer)

http://www.sportime.joomlafree.it/ (this i like as position and style)

i have check the folder modules\mod_login, but all file are the same in the 2 web site ... :(
 
Gina

Posted: 11/4/2011
Quote message 

1. This is for the oval form (radius)

#form-login #modlgn_username, #form-login #modlgn_passwd {
border-radius: 4px 4px 4px 4px;
margin: 0;
padding: 0;
width: 95%;
}

The radius is equal to 4px (I made it as in the example you provided), you can change it to bigger number.

You may also need to decrease the width here (width: 95%;)

2. As for the placing text on the same line with enter fields, you have to delete <br> in these part:

<fieldset class="input">
<p id="form-login-username">
<label for="modlgn_username">Nome utente</label>
<br>
<input id="modlgn_username" class="inputbox" type="text" size="18" alt="username" name="username">
</p>
<p id="form-login-password">
<label for="modlgn_passwd">Password</label>
<br>

it is probably in joomla15\modules\mod_login\tmpl\default.php.

But this would mean changing root files of Joomla, that is not advisable.
I guess there may be other solution to do it, but I don't know it yet.
 
snow79

Posted: 11/4/2011
Quote message 

Tnk Gina for your support!!!
for radius it's ok, with your guide i have resolved :)
but the problem persist for the alignment of the 2 input box,
i have check (from the site http://www.sportime.joomlafree.it/ ) again in the file default.php on folder joomla15\modules\mod_login\tmpl\ and i can conferme are the same of my file;
i have try to remove the <br> as you have suggested but nothing change.
I hope the solutin is the same also for change the position of the login button to the right of the remember checkbox position.
any other suggestions?
Tnk again!!!


 
Gina

Posted: 11/4/2011
Quote message 

Found it:

#form-login #form-login-username label, #form-login #form-login-password label {
display: block;
}


Change for:

#form-login #form-login-username label, #form-login #form-login-password label {
display: inline;
}
 
snow79

Posted: 11/4/2011
Quote message 

Yep!!!
i have add this:

position:absolute;
right:5px;

in:

#form-login #modlgn_username,
#form-login #modlgn_passwd

fot the alignement to right; and you can see the resut.
too tnk 4 your toooooo gooooood help