Miscellaneous Hacks - TW7S - Change the look of the Login/Register [Twitter Style]

LIVE DEMO: http://www.TheWindows7Site.com

Installation Instructions
Included in download.

Mark as installed for support. I will not help you change the colors and style of this mod. Its very simple in the CSS.

ENJOY!!!

-Kryptonit3
--TheWindows7Site.com

Mod History
v1.00 Initial Release (3.13.10)
v1.1 Fixed Issue with forum width. Removed Help tab from header. (3.13.10)

My other Mods:

Command BB Code
[ Information - Tip - Note - Warning ] BBCode
Remove "Reply with Quote" and Multi-Quote from first post in thread
Notifications Alert - Easier To See
Remove Subscription and/or RSS buttons from forums
Change the look of "Last Post" by
Change the look of the Login/Register in header
Hiding Posts From Guests

[ClErK1991]

no one can give me an answer?

[Toorak Times]

Marked installed, mucked something up, another noob mate, I'll try again, but love this mod...

[mjfan227]

I can't get this to install either. I changed the templates and uploaded the files, and nothing happens.

[Extrateknik]

Is there for vBulletin 3.8

[TombstoneWarrior]

no help for a nebie can someone look at my post above and help me out please!!!

[too_cool_3]

In vB 4.1.10 there are additional lines of code in the header template not mentioned in the instructions,

Now, there is all this:

<script type="text/javascript">
   YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
   YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
   vB_XHTML_Ready.subscribe(function()
   {
   //
    YAHOO.util.Event.on('navbar_username', "focus", navbar_username_focus);
    YAHOO.util.Event.on('navbar_username', "blur", navbar_username_blur);
    YAHOO.util.Event.on('navbar_password_hint', "focus", navbar_password_hint);
    YAHOO.util.Event.on('navbar_password', "blur", navbar_password);
   });
 
   function navbar_username_focus(e)
   {
   //
    var textbox = YAHOO.util.Event.getTarget(e);
    if (textbox.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>')
    {
    //
     textbox.value='';
     textbox.style.color='{vb:stylevar input_color}';
    }
   }
   function navbar_username_blur(e)
   {
   //
    var textbox = YAHOO.util.Event.getTarget(e);
    if (textbox.value == '')
    {
    //
     textbox.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>';
     textbox.style.color='{vb:stylevar shade_color}';
    }
   }
 
   function navbar_password_hint(e)
   {
   //
    var textbox = YAHOO.util.Event.getTarget(e);
 
    YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "none");
    YAHOO.util.Dom.setStyle('navbar_password', "display", "inline");
    YAHOO.util.Dom.get('navbar_password').focus();
   }
   function navbar_password(e)
   {
   //
    var textbox = YAHOO.util.Event.getTarget(e);
 
    if (textbox.value == '')
    {
     YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
     YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
    }
   }
   </script>
</li>
    <vb:if condition="$vboptions['enablefacebookconnect']">
     {vb:raw facebook_header}
    </vb:if>

between

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

and

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

When replacing with the line of code you provide, should we remove all of that new code?

[TombstoneWarrior]

Originally Posted by TombstoneWarrior

I HAVE A CUSTOM STYLE AND CAN NOT FIND THE CODE TO PUT IN IN STEP TWO HERE IS THE CODE STARTING FROM THE FIND FWORD CAN SOMEONE HELP PLEASE>>>>>>
<div id="toplinks" class="toplinks">
<vb:if condition="$show['member']">
<ul class="isuser">
<li><a href="login.php?{vb:raw session.sessionurl}do=logout&amp;logouthash={vb:ra w bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</a></li>
<vb:if condition="$show['registerbutton']">
<li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
</vb:if>
<li><a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase user_control_panel}</a></li>
<li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li>
{vb:raw vmoods_list}
<vb:if condition="$notifications_total">

<li class="popupmenu notifications" id="notifications">
<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}: <span class="notifications-number"><strong>{vb:raw notifications_total}</strong></span></a>
<ul class="popupbody popuphover">
{vb:raw notifications_menubits}
</ul>
</li>
<vb:else />
<li class="popupmenu nonotifications" id="nonotifications">
<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a>
<ul class="popupbody popuphover">
<li>{vb:rawphrase no_new_messages}</li>
<vb:if condition="$show['pmmainlink']"><li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li></vb:if>
</ul>
</li>
</vb:if>

<li class="welcomelink">{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li>
<vb:if condition="$vboptions['enablefacebookconnect']">
{vb:raw facebook_header}
</vb:if>
</ul>
{vb:raw template_hook.header_userinfo}
<vb:comment><p>{vb:rawphrase last_visited_x_at_y, {vb:raw pmbox.lastvisitdate}, {vb:raw pmbox.lastvisittime}}</p></vb:comment>
<vb:else />
<ul class="nouser">
<vb:if condition="$show['registerbutton']">
<li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
</vb:if>
<li><a rel="help" href="faq.php{vb:raw session.sessionurl_q}">{vb:rawphrase help}</a></li>
<li>
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>
<form id="navbar_loginform" action="login.php?{vb:raw session.sessionurl}do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, {vb:raw show.nopasswordempty})">
<fieldset id="logindetails" class="logindetails">
<div>
<div>
<input type="text" class="textbox<vb:if condition="!$username"> default-value</vb:if>" 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>" />
<input type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" />
<input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" />
<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>
<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>

<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>
<script type="text/javascript">
YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
vB_XHTML_Ready.subscribe(function()
{
//
YAHOO.util.Event.on('navbar_username', "focus", navbar_username_focus);
YAHOO.util.Event.on('navbar_username', "blur", navbar_username_blur);
YAHOO.util.Event.on('navbar_password_hint', "focus", navbar_password_hint);
YAHOO.util.Event.on('navbar_password', "blur", navbar_password);
});

function navbar_username_focus(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);
if (textbox.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>')
{
//
textbox.value='';
textbox.style.color='{vb:stylevar input_color}';
}
}

function navbar_username_blur(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);
if (textbox.value == '')
{
//
textbox.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>';
textbox.style.color='{vb:stylevar shade_color}';
}
}

function navbar_password_hint(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);

YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "none");
YAHOO.util.Dom.setStyle('navbar_password', "display", "inline");
YAHOO.util.Dom.get('navbar_password').focus();
}

function navbar_password(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);

if (textbox.value == '')
{
YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
}
}
</script>
</li>
<vb:if condition="$vboptions['enablefacebookconnect']">
{vb:raw facebook_header}
</vb:if>
</ul>
</vb:if>
</div>
<div class="ad_global_header">
{vb:raw ad_location.global_header1}
{vb:raw ad_location.global_header2}
</div>
<hr />
</div>

can the coder please help 4.1.9 with custom style..

[Toorak Times]

Had to uninstall, thanks anyway, can't figure it out

[too_cool_3]

I installed this hack and my Settings link has disappeared (see attachment) from the navbar? If I revert my header template it comes back. I'm on vB 4.1.10

Here is my header template after following the instructions:

<div class="above_body"> <!-- closing tag is in template navbar -->
<div id="header" class="floatcontainer doc_header">
 <vb:if condition="$stylevar['titleimage']"><div><a name="top" href="{vb:link forumhome}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div></vb:if>
 <div id="toplinks" class="toplinks">
  <vb:if condition="$show['member']">
   <ul class="isuser">
    <li><a href="login.php?{vb:raw session.sessionurl}do=logout&amp;logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</a></li>
    <vb:if condition="$show['registerbutton']">
    <li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
    </vb:if>
    <li><a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase control_panel}</a></li>
    <li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li>
    <vb:if condition="$notifications_total">
    <li class="popupmenu notifications" id="notifications">
     <a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}: <span class="notifications-number"><strong>{vb:raw notifications_total}</strong></span></a>
     <ul class="popupbody popuphover">
      {vb:raw notifications_menubits}
     </ul>
    </li>
    <vb:else />
    <li class="popupmenu nonotifications" id="nonotifications">
     <a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a>
     <ul class="popupbody popuphover">
      <li>{vb:rawphrase no_new_messages}</li>
      <li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li>
     </ul>
    </li>
    </vb:if>
    <li class="welcomelink">{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li>
   </ul>
            {vb:raw template_hook.header_userinfo}
   <vb:comment><p>{vb:rawphrase last_visited_x_at_y, {vb:raw pmbox.lastvisitdate}, {vb:raw pmbox.lastvisittime}}</p></vb:comment>
  </vb:if>
 </div>
 <div class="ad_global_header">
  {vb:raw ad_location.global_header1}
  {vb:raw ad_location.global_header2}
 </div>
 <hr />
</div>

If anyone can help me get the Settings link back, that would be much appreciated.

[too_cool_3]

On line 11 of the header template you have to change

{vb:rawphrase control_panel}

to

{vb:rawphrase user_control_panel}

and the Settings link will show up. Hope this helps someone out!