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]

Yeah, with the upgrade the vB team changed a few things on us

[zonaenlinea]

Thank prefect.....

[princeedward]

hi...having this error

invalid_tag_nesting

followed the instructions for vb 4.0.1 but still no luck

[iguano]

thanks installed

[parveznpt]

Originally Posted by TheWindows7Site

Very nice forum color scheme. May I make a suggestion?

Go into your templates, open up vbulletin-chrome.css

Do a search for .toplinks form input.loginbutton

and change the attributes to read the following

PHP Code:

.toplinks form input.loginbutton {
    font-size: {vb:math {vb:stylevar font.fontSize}-2}px;
    padding: 0 {vb:math {vb:stylevar padding}/2};
    background-color:  #186400;
    border:solid 1px #ffffff;
        color: #ffffff;
} 


And your login area will be perfect (I matched the green for the background color)

Good Bro...................

[SSJB_7]

After this beautifull modification in mozilla looks like:


in internet explorer is ok , do you know what i can do to fix it?

[LifesGreatestGift]

Revert all affected templates and start over. There shouldn't be an issue.

[trilogy33]

Thanks, it sure looks sweet.

One thing that's puzzling me is that if you've got ads in the below navbar position...



a gif banner and a flash banner side-by-side, then the above happens.

Just to confirm that this mod was introduced after 4.0.1 was installed.
Reverting the templates didn't work, since the header template was default and untouched anyway.

Very odd though, never seen that before. Any ideas?

[LifesGreatestGift]

Try removing the styling code from the header

PHP Code:

<style type="text/css">
img {vertical-align:middle} 
</style> 


[trilogy33]

Originally Posted by TheWindows7Site

Try removing the styling code from the header

PHP Code:

<style type="text/css">
img {vertical-align:middle} 
</style> 


That so works! Many thanks