Joomla 1.5 css

Hi experts,

New in Joomla and im working on a small project in Joomla 1.5.20. I implemented the Login Module in an article but the style is not convenient; see the attachment. How i can set the style of input fields to be the same as for "Register". As you can see the "Login" fields are way to long and in Forgot pass or username are centered far away from their labels.
Any help in this matter will be highly appreciated.
Thank you in advance.
Regards,
Raul

sample.jpg
raulmondaAsked:
Who is Participating?
 
Jesse MatlockUX EngineerCommented:
Hey Raul,
Thanks! Glad that worked for you! I'll look into the other forms and get back to you.
0
 
Panagiotis Sweb developer - designer Commented:
do you have a link ?
0
 
raulmondaAuthor Commented:
hi :)

Yes, but the site isnt secured yet. can you give me your email address, please? ill send it to it.
Thank you
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
raulmondaAuthor Commented:
my email: raulmonda@yahoo.com
0
 
Jesse MatlockUX EngineerCommented:
if you haven't gotten this sorted out, feel free to shoot me an email with the link as well: info @ revive marketing (dot) org ;)
0
 
raulmondaAuthor Commented:
hi Panagiotiss,

You can see the site at lotusdiving.com
0
 
Panagiotis Sweb developer - designer Commented:
try

#modlgn_username, #modlgn_passwd {
    width: 200px;
}

put any width you like
change the above at http://lotusdiving.com/templates/v12/css/template.css
0
 
Jesse MatlockUX EngineerCommented:
It looks like you may have some other CSS or layout issues going on, but to fix the login form, open your templates 'template.css' file and on line 1816, change this:

form#form-login
{
	text-align: left;

}

Open in new window


to this:

form#form-login
{
	text-align: left;
	width: 250px;
}

That will fix the width of that login form :)

Open in new window


To fix your background image issue (on wider screens it locates to the left, not the center) change line 15 of template.css by adjusting the background-position to this:

background-position: 50% 0%; 

Open in new window

0
 
Jesse MatlockUX EngineerCommented:
Here are a couple of other changes I would make: add html with a 100% height, and make the body 100% height as well, to ensure your page is fill with your background image, content, etc.. and also to change your BG color on the body to match your BG image..

html {
	height: 100%;
	min-height: 100%;
}
body
{
	margin: 0 auto;
	padding: 0;
	background-color: #0B1643;
	background-image: url('../images/Page-BgTexture.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: 50% 0%;
	height: 100%;
}

Open in new window

0
 
Jesse MatlockUX EngineerCommented:
The site is looking great Raul !!
0
 
raulmondaAuthor Commented:
hi Cloud9manager,

yes, thanks to you :)
I dont know how it looks on the wider screens... but the "forgot pass" and "forgot username" forms..the input area and the labels are still far away... any suggestion?

Thank you.
Raul
0
 
raulmondaAuthor Commented:
thanks. it works
Regards,
Raul
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.