Joomla Templates Club 406,261 posts

[mfcphil Friend mfcphilJoin date: September 2007Posts: 2866Downloads:3Uploads:218 Thanks: 211 Thanked: 388 times in 133 posts]

#140165

Can we change the css colour of the log-in box…cant find any code

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#300945

You won’t find it all in css as it is a graphic.

In the templates images folder you will find one called grad4.gif. Edit that to whatever colour you want.

The rest of the colour details such as border can be found here.

template.css (line 1014)

#ja-login {
background:#F8F8F7 url(../images/grad4.gif) repeat-x scroll center bottom;
border-color:#E7E8E6 #E7E8E6 #CCCCCC;
border-style:solid;
border-width:1px;
padding:4px 8px;
position:absolute;
right:0;
top:15px;
}

Or, if you actually mean the bit where the text is typed change this adding the line in red.

template.css (line 1039)

#ja-login form #mod_login_username, #ja-login form #mod_login_password {
background-color:#yourcolour;
font-size:11px !important;
margin:1px 8px 0 0;
padding:2px;
width:110px;
}

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#300954

How about changing template.css (line 998)

#ja-login {
background:#DFEEF0 url(../images/grad4.gif) repeat-x scroll center bottom;
border-color:#E7E8E6 #E7E8E6 #CCCCCC;
border-style:solid;
border-width:1px;
padding:4px 8px;
position:absolute;
right:0;
top:15px;
}

and replacing your grad4.gif with the attached file.

---

Attachments:

1. 

1 user says Thank You to Phill for this useful post

1. mfcphil

[mfcphil Friend mfcphilJoin date: September 2007Posts: 2866Downloads:3Uploads:218 Thanks: 211 Thanked: 388 times in 133 posts]

#300958

Cheers Phil you star!!

certainly looks better than the grey.

[mfcphil Friend mfcphilJoin date: September 2007Posts: 2866Downloads:3Uploads:218 Thanks: 211 Thanked: 388 times in 133 posts]

#301007

Hey Phil

Where’s the log-in button image??

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#301008

Glad to see you managed to get a nice colour sorted. Looks good.

Here is the code for the button.

template.css (line 169)

.button {
background:transparent url(../images/grad4.gif) repeat-x scroll 0 0;
border:1px outset #A8A8A8;
color:#515756;
font-size:92%;
font-weight:bold;
padding:2px 8px;
}

1 user says Thank You to Phill for this useful post

1. mfcphil

[mfcphil Friend mfcphilJoin date: September 2007Posts: 2866Downloads:3Uploads:218 Thanks: 211 Thanked: 388 times in 133 posts]

#301009

All done now

Cheers Phil 😉

[lasor123 Friend lasor123Join date: April 2008Posts: 116Downloads:0Uploads:0 Thanks: 2 Thanked: 1 times in 1 posts]

#302245

Hi.

Can I see the work you done ?

BR, Lasor

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#302251

Here is Phil’s site.

http://www.peacockquizzes.com/

[Author]

Posts