Header Login

[slash]

This simple mod add into your header a nice login from.



up in:
styles/prosilver/theme/images this image archive:

header-login-img.rar

(7.08 KiB) Downloaded 291 times

Css:

open:
styles/prosilver/theme/common.css

find:

Code: Select all

#site-description {
	float: left;
	width: 70%;
}

replace with:

Code: Select all

#site-description {
	float: left;
	width: 60%;

at the and add:

Code: Select all

/* Header Login by slash www.wiizard.it
--------------------------------------------- */
#formbox {
	float: right;
    text-align: right;
	padding-top: 20px; /*change the px value to set the vertical position*/
}

#formbox label, #formbox span, #formbox a{
	color: #ffffff;
	font-family: "Segoe UI", Tahoma, Geneva, sans-serif;
	font-size: 12px;
}

.header-login-form {
	width: 120px; height: 23px; cursor: text;
	background: url("{T_THEME_PATH}/images/formbg.gif") no-repeat top left;
	font-family: "Segoe UI", Tahoma, Geneva, sans-serif;
	font-size: 14px; color: #091d29;
	padding-top: 3px; border: none;
	padding-left: 5px; padding-right: 5px;
	margin-bottom: 3px;
}

.header-login-button {
	width: 68px; height: 27px;
	background-image: url("{T_THEME_PATH}/images/loginbg.gif");
	background-color: transparent;
	border: 0; margin-top: 1px; color: #ffffff; font-size: 12px;
	font-family: "Segoe UI", Tahoma, Geneva, sans-serif;
	background-position: top; background-repeat: no-repeat;
	margin-bottom: 3px;
}

.header-login-button:hover {
	background-position: bottom;
}

Html:

open:
styles/prosilver/template/overall_header.html

find:

Code: Select all

<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

add after:

Code: Select all

<!--header login by slash www.wiizard.it-->
			<div id="formbox">
			    <!-- IF not S_USER_LOGGED_IN -->
				    <form method="post" action="{S_LOGIN_ACTION}">
					    <input type="text" name="username" class="quick-login-form" title="{L_USERNAME}" value="{L_USERNAME}" onfocus="if (this.value == '{L_USERNAME}') {this.value = '';}" onblur="if (this.value == '') {this.value = '{L_USERNAME}';}" />
                        <input type="password" name="password" class="quick-login-form" title="{L_PASSWORD}" value="********" onfocus="if (this.value == '********') {this.value = '';}" onblur="if (this.value == '') {this.value = '********';}" />
                        <input type="submit" name="login" value="{L_LOGIN}" class="quick-login-button" /><br />
                       </form>
				<!-- IF S_AUTOLOGIN_ENABLED -->
				 <label for="autologin">{L_LOG_ME_IN} <input type="checkbox" name="autologin" id="autologin" /></label>
			    <!-- ENDIF -->
                <!-- ENDIF -->
	        </div>
			<!--header login by slash www.wiizard.it-->

delete cache and updates theme on ACP

[Terr0r]

Have you a screenshot or live demo

Greets Terr0r

[darkonia]

screenshot is in first post terror!

[slash]

XD on a first post! open the screen in a new blank to see it all!

[Solidjeuh]

Thank you for this!
But for the images to work you need to replace some code in overal_header.html..

Replace quick-login-form with header-login-form

Replace quick-login-button with header-login-button