Miscellaneous Hacks - TW7S - Change the look of the Login/Register in header

Before


After


Click Here for Live preview.

Installation:

• Upload images
• Perform template edits below

-----------------------------------------------------
vB 4.0.1 Fix
Those of you who performed this mod on 4.0.0 and have upgraded to 4.0.1, all you have to do is revert the header template and perform the edits again. For some reason when the templates were merged with the new code it messed up the links when logged in.
-----------------------------------------------------

Open header template

Find:

PHP Code:

<input type="text" class="textbox default-value" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" onfocus="if (this.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>'){this.value=''; this.style.color='black';}" onblur="if (this.value == '') {this.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>'; this.style.color='#828282';}"/>
                    <input type="password" class="textbox default-value" name="vb_login_password" id="navbar_password" size="10" tabindex="102" onfocus="this.style.color='black';" />
                    <input type="submit" class="loginbutton" value="{vb:rawphrase log_in}" tabindex="104" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />
                        </div>
                    </div>
                </fieldset>
                <div id="remember" class="remember">
                    <label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" /> {vb:rawphrase remember_me}</label>
                </div>
            
                <input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
                <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
                <input type="hidden" name="do" value="login" />
                <input type="hidden" name="vb_login_md5password" />
                <input type="hidden" name="vb_login_md5password_utf" />
            </form>    
        </vb:if>
    </div> 


Replace With:

PHP Code:

<style type="text/css">
.toplinks form img {
        position:relative;  
        top: 3px;        
} 
</style>

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

                    

<input id="navbar_username" class="bginput" type="text" onblur="if (this.value == '') this.value = 'Username';" onfocus="if (this.value == 'Username') this.value = '';" value="Username" tabindex="101" accesskey="u" size="10" name="vb_login_username" style="font-size: 11px;"/>

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

                    <input id="navbar_password" class="bginput" type="password" onblur="if (this.value == '') this.value = '';" onfocus="if (this.value == 'Password') this.value = '';" value="Password" tabindex="102" accesskey="u" size="10" name="vb_login_password" style="font-size: 11px;/>


                    

<label for="cb_cookieuser_navbar">
<input id="cb_cookieuser_navbar" type="checkbox" accesskey="c" tabindex="103" value="1" name="cookieuser"/>
</label>
                

                    <input type="submit" class="loginbutton" value="Login" tabindex="104" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />
                        </div>
                    </div>
                </fieldset>


                
            
                <input type="hidden" name="s" value="{vb:raw session.sessionhash}" />


                <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
                <input type="hidden" name="do" value="login" />
                <input type="hidden" name="vb_login_md5password" />
                <input type="hidden" name="vb_login_md5password_utf" />
            </form>    
        </vb:if>
    </div> 


Save your changes

To have the "Remember Me" box always checked:

Find:

PHP Code:

<input id="cb_cookieuser_navbar" type="checkbox" accesskey="c" tabindex="103" value="1" name="cookieuser"/> 


Replace With:

PHP Code:

<input id="cb_cookieuser_navbar" type="checkbox" accesskey="c" tabindex="103" value="1" name="cookieuser" checked="checked"/> 


[LifesGreatestGift]

Originally Posted by Cadellin

Great mod - any chance of a 4.0.2 update?

Upgrading my forum now, will see if there is need for an updated release, if so, will post the new code

[LifesGreatestGift]

Just finished with the forum update to 4.0.2 and there is no need to update the code Previous code works fine

[Cadellin]

For me it caused my login to stop working. I had to revert to the default code in the end unfortunately.

It's probably worth updating the "Find" box at the top to reflect the 4.0.2 code for people coming to the mod afresh (or reinstalling like me )

[LifesGreatestGift]

will work on it when i can

[puppetmaster222]

Love it, thanks.

[Alibass]

Uninstalled until 4.0.2 update

[wilczek]

Would it be so difficult for someone to do a dummies guide - last time I will ask - it's a real shame non-techies cannot benefit from vBulletiin mods too !!!!!

W

[Cadellin]

I'll give it a go wilczek - not an expert dummy guide writer though

1. Go to AdminCP > Styles & Templates > Style Manager
2. Click "All Style Options" for your theme and select "Edit Templates"
3. Scroll down the list and double click "header"
4. Switch back to vbulletin mod page and select the text from the "replace with" box above and copy it to clipboard.
5. Go back to the header template you just opened and use the search box to find "<input type="text" class="textbox default-value" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}" - This is the first line of the code your going to replace.
5. Highlight the first line in the old code and continue highlighting down until you see the last line of the code your going to replace - I find it helpful to use two browser windows splitting the screen so I can quickly remind myself of what the final few lines looks like.
6. Whilst still highlighting the old text paste in the replacement text over it so it replaces the highlighed text.
7. Click "Save"
8. Load your frontpage to see the results!

[wilczek]

Thanks a lot for that - it helps a lot - I think now the main thing is - where do I put the files - the graphic ones.

Thanks once again.

W

[Front Range 4x4]

Originally Posted by wilczek

Thanks a lot for that - it helps a lot - I think now the main thing is - where do I put the files - the graphic ones.

The way the upload file location is identified is by the folder structure provided in the folder named "Upload" - What you want to do is upload the files/images provided into the like-named folder/directory.

In this case the it's the "icon" folder so you FTP the new images inside the "icon" folder.

(This applies to determining the location in most mods)

HTH