Major Additions - SCANU's Xenforo Login Slide Panel

Description

This modification shows an elegant login panel that looks like the Xenforo's one. Look at the screenshots for more!

Demo

Live Demo

Video Demo: Coming Soon..

Installation

Upload the product via admincp and go in Settings->Xenforo Login Panel for customize the mod.
To have the feature for login with username or email adress like Xenforo see this post by HMBeaty: thank him for this awesome feature.
For the update just redownload and reupload the file, make sure that overwriting is set to Yes.

Translations

Russian Translation v1.0.2
Greek Translation v1.1.2
Please post your translation in a reply so everyone can use it.

Restrictions/ Reported issues

This modification should not work if you have edited header and headinclude templates, in the next version I will add a better compatibility.

PLEASE VOTE THIS MOD FOR MOTM CLICK HERE, AND CLICK MARK AS INSTALLED

To get support:

1. Mark this mod as Installed
2. Copy/Pasted errors or screenshots
3. URL/link to site

Follow me on twitter for updates

Many thanks to Boofo for his basing php code and to my brother Clear for the styling.

If you like italian G-funk/rap please try out this music or this music

[Scanu]

Change log

- 1.0 First release on Vbulletin.org

- 1.0.5
- Fixed bug that deletes footer template
- Added Facebook Login
- Better compatibility with custom styles
- Less code
- Fixed a bug with the javascript template
- More ordinated templates

- 1.1
- Fixed Facebook Connect and corners bug
- Fixed some W3 Validation problems

- 1.1.2
- Auto focus on email/username input when panel gets opened
- Fixed blank register.php page
- Fixed check version link in the product

- Work in progress: 1.2
- You can close the panel clicking anywhere (except the panel)
- Added the possibility to add some text/images (html) on the left of the panel
- CSS customization settings!
- Fixed CMS problem
- Fixed opacity setting
- I'm looking for new feature request you can request your feature responding to this thread

[Scanu]

[Scanu]

Do you have problem with the autotemplate edit and you still see the old login form?
Go in the header template, search this:

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

And delete all this code now you're done if you are still having problems reply to this thread

[Rich]

You reserved 3 spots? lol You must have a lot to post about this mod.

[Scanu]

Ahaah yeah i know

[Jncocontrol]

Hey Scanu, I really appreciate most of the mods you do, By chance do you take Requests?

[Scanu]

It depends

[mmoscene]

Is the font just like that by default, or does it read from the Theme Styling?

[Scanu]

It's like that by default but if you know basic html/css you can edit. Maybe in the next version i will add options to the pca for the font