Mini Mods - Login Images

Hi All,

I modified my header / login by adding images a while ago, i noticed an similar mod here on vb.org however it is for 4.0.1 and was never updated so, here is the solution for vBulletin 4.0.4 / 4.0.5.

Demo: Battlefield 3

Instructions:

Firstly download the attachment added to this thread (images.zip) upload the files to your image directory, should look like this:

/images/icons/username.png
/images/icons/password.png

Template edits:

- HEADER (open this template)

FIND THIS LINE:

<input type="text" class="textbox" name="vb_login_username"

ADD BEFORE:

<img src="./images/icons/username.png" alt="Username" />

FIND THIS LINE:

<input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint"

ADD BEFORE:

<img src="./images/icons/password.png" alt="Password" />

- Make the "REMEMBER ME" box already Checked by Default:

In the same header template.
FIND THIS:

<div id="remember" class="remember">
					<label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label>
				</div>

REPLACE WITH:

<div id="remember" class="remember">
					<label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" checked="checked"/> {vb:rawphrase remember_me}</label>
				</div>

Your login section will now look the same as on Battlefield3forums.COM (again there is a mod on vb.org already, and i am using the same images as the other mod, this time you do not need to add any code to additional.css.. if you wish to align the image differently, simply open up the images in photoshop and increase the canvas size and position the image accordingly). All credits should go to the user: "TheWindows7Site" i have only created this as his was not updated and code changes have occurred since 4.0.1.

Hope that helps

[LouiseWilson]

yes this works with 4.2.x

however slight code change I would add the following

<img style="position: relative; top: 6px;" img src="./images/icons/username.png" alt="Username" />

changing the 6px to the height of the image

[zascok]

Originally Posted by LouiseWilson

yes this works with 4.2.x

however slight code change I would add the following

<img style="position: relative; top: 6px;" img src="./images/icons/username.png" alt="Username" />

changing the 6px to the height of the image

Or

add into additional.css

.logindetails img{
position: relative; 
top: 7px;
padding-right: 2px;	
}

And just to keep going

image for Register

PHP Code:

<li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">
[add This Here]
<img src="./images/misc/reg.png" alt="Register" />
[/add This Here]
{vb:rawphrase register}</a></li>
            </vb:if> 


image for Help

PHP Code:

<li><a rel="help" href="faq.php{vb:raw session.sessionurl_q}">
[add This Here]
<img src="./images/misc/help.png" alt="Help" />
[/add This Here]
{vb:rawphrase help}</a></li>