Quick Login

Add Live Blurred background - Quick Login

Add Live Blurred background

by Lovemaster » Wed Feb 28, 2018 7:30 pm

I've made a couple of edits to this nice extension which will blur the background and focus on the popup login window. Anyone can do it by editing the following code in ext/paybas/quicklogin/styles/all/template/quick_login.html

find:

Code: Select all

<script>
(function($) {
	$(document).ready(function() {
		var $button = $("li a[title='{LA_LOGIN_LOGOUT}']"),
			ql_bg = '#quick-login-bg',
			ql_pnl = '#quick-login-panel',
			pS_bg = '#darkenwrapper';

		if ($(pS_bg).length) {
			ql_bg = pS_bg;
		}
		$button.click(function(e){
			e.preventDefault();
			$(ql_bg + ', ' + ql_pnl).fadeIn(300);
		});
		$(ql_bg + ', #quick-login-panel .close').click(function () {
			$(ql_bg + ', ' + ql_pnl).fadeOut(300);
		})
	});
})(jQuery);
</script>
replace with:

Code: Select all

<script>
(function($) {
	$(document).ready(function() {
		var $button = $("li a[title='{LA_LOGIN_LOGOUT}']"),
			ql_bg = '#quick-login-bg',
			ql_pnl = '#quick-login-panel',
			pS_bg = '';

		if ($(pS_bg).length) {
			ql_bg = pS_bg;
		}
		$button.click(function(e){
			e.preventDefault();
        	document.getElementById("wrap").setAttribute("class", "wrap blur");
			$(ql_bg + ', ' + ql_pnl).fadeIn(150);
		});
		$(ql_bg + ', #quick-login-panel .close').click(function () {
        	document.getElementById("wrap").setAttribute("class", "wrap unblur");
			$(ql_bg + ', ' + ql_pnl).fadeOut(150);
		})
	});
})(jQuery);
</script>
Then in ext/paybas/quicklogin/styles/all/theme/quick_login.css add the following to the end of the file:

Code: Select all

.blur {
    filter: blur(7px);
}
.unblur {
    filter: blur(0px);
}
I also added a bit of styling to the pop-up as well... rounded corners, box shadow, etc. Really liking how it turned out.
Untitled-10.jpg
Untitled-20.jpg
You can check out a live demo here: http://grilla-forums.com
Lovemaster
Registered User
Posts: 2
Joined: Thu Feb 16, 2012 4:59 am
Contact: