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"/> 


[Trumpetrhapsody]

Still work on 4.0.2?

EDIT: Nevermind... missed about 3 pages of people asking about this.

[sinistergaming]

neet thanks

[wilczek]

Cadelin & Front Page - Thanks a lot - I am on 4.0.1 and want to upgrade to 4.0.2 - So when I do this I will then wait for this to be confirmed as 4.0.2 friendly.

Cheers,

W

[aberg]

Good work. thanks!

[ExtremeGaming]

Installed and working on 4.0.2 !

[Alibass]

Originally Posted by TheWindows7Site

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

After reverting template and reinstalling code, mod is working fine with 4.0.2

[voglermc]

I think the replace is missing a bit of code.

</form> 
            
                </li>
            </ul>
        </vb:if>
    </div>

[nibb]

Looks good but you are now giving the user more work as he has to erase the text in the boxes first to enter his username and password. I know they can be left blank in the value, but it would be better if they erase them self when you click on them like other login boxes do.

[rikmac]

Good work.

thanks!

[The-Undead]

With some tweaking to tidy the code this looks much better, thanks.

Originally Posted by voglermc

I think the replace is missing a bit of code.

</form> 
            
                </li>
            </ul>
        </vb:if>
    </div>

Originally Posted by nibb

Looks good but you are now giving the user more work as he has to erase the text in the boxes first to enter his username and password. I know they can be left blank in the value, but it would be better if they erase them self when you click on them like other login boxes do.

For both, use following replace for vB 4.0.2:

                                    <img src="./images/icons/username.png" alt="Username" />
                                    <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';}"/>
                                    <img src="./images/icons/password.png" alt="Password" />
                                    <input type="password" class="textbox default-value" tabindex="102" name="vb_login_password" id="navbar_password" size="10" onfocus="this.style.color='black';" />
                                    <label for="cb_cookieuser_navbar"><input id="cb_cookieuser_navbar" type="checkbox" accesskey="c" tabindex="103" value="1" name="cookieuser" checked="checked" /></label>
                                    <input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" 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>
                </li>
            </ul>
        </vb:if>
    </div>

Put this part in headinclude template to help with validation:

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

Username is present but it doesn't need deleting, on-click removes the text as per default.