Es ist total einfach.
Schritt 1
Wähle dir das Template deiner wahl und lad es hoch.
Schritt 2
Downloade das Original von Sliding Login Panel with jQuery 1.3.2
web-kreation.com/?dl_id=22
Schritt 3
Entpacke dies und lösche folgendes
bg.jpg aus images
style.css aus css
Schritt 4
Gehe in dein Adminmenu und lösche die Loginbox aus der Navigation
Schritt 5
Lade dir folgende datein aus deiner Homepage auf dein Desktop
index.htm aus /include/designs/deins
boxen_login.htm aus /include/templates/user
Schritt 5.1
öffne die index.htm mit einen Editor oder Dreamweaver und füge folgenden code in dein head ein.
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/slide.css" type="text/css" media="screen" />
<!-- PNG FIX for IE6 -->
<!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
<!--[if lte IE 6]>
<script type="text/javascript" src="js/pngfix/supersleight-min.js"></script>
<![endif]-->
<!-- jQuery - the core -->
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<!-- Sliding effect -->
Jetzt füge an erste Stelle im body bereich folgendes ein:
<div id="">{_boxes_login}</div>
5.1 Zusatz
Der headbereich ist der Bereich zwischen <head> und </head>
mehr infos findest du unter
de.selfhtml.org/html/allgemein/grundgeruest.htm
Schritt 5.2
öffne die boxen_login.htm mit einen Editor oder Dreamweaver und löschen den Inhalt und füge dafür folgenden Code ein:
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
<h1>Welcome to Web-Kreation</h1>
<h2>Sliding login panel Demo with jQuery</h2>
<p class="grey">You can put anything you want in this sliding panel: videos, audio, images, forms... The only limit is your imagination!</p>
<h2>Download</h2>
<p class="grey">To download this script go back to <a href="http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery" title="Download">article »</a></p>
</div>
<div class="left">
<table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td>
Hallo <b>{NAME}</b>
<br />
<br />
{NACHRICHTEN}
<a class="box" href="index.php?user-3">{_lang_logout}</a> | <a class="box" href="index.php?user-8">{_lang_profil}</a>
<br>
{ADMIN}
</td>
</tr>
</table>
</div>
<div class="left right">
</div>
</div>
</div> <!-- /login -->
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li>Hallo "{NAME}"</li>
<li class="sep">|</li>
<li id="toggle">
<a id="open" class="open" href="#">Log In | Register</a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</li>
<li class="right"> </li>
</ul>
</div> <!-- / top -->
</div>
{EXPLODE}
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
<h1>Welcome to Web-Kreation</h1>
<h2>Sliding login panel Demo with jQuery</h2>
<p class="grey">You can put anything you want in this sliding panel: videos, audio, images, forms... The only limit is your imagination!</p>
<h2>Download</h2>
<p class="grey">To download this script go back to <a href="http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery" title="Download">article »</a></p>
</div>
<div class="left">
<!-- Login Form -->
<form method="POST">
<h1>Member Login</h1>
<label class="grey" for="log">Username:</label>
<input type="text" name="name" size="30" value="{NAME}" onFocus="if (value == '{NAME}') {value = ''}" onBlur="if (value == '') {value = '{NAME}'}" maxlength="15" style="margin-top:5px; " /><br />
<label class="grey" for="pwd">Password:</label>
<input type="password" size="30" value="{PASS}" onFocus="if (value == '{PASS}') {value = ''}" onBlur="if (value == '') {value = '{PASS}'}" maxlength="20" name="pass" style="margin-top:5px; " /><br />
<input type="hidden" name="wdlink" value="{wdlink}" />
<input type="submit" name="user_login_sub" value="Login" style="margin-top:5px; " />{regist}
</form>
</div>
<div class="left right">
</div>
</div>
</div> <!-- /login -->
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li>Hallo "Gast"</li>
<li class="sep">|</li>
<li id="toggle">
<a id="open" class="open" href="#">Log In | Register</a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</li>
<li class="right"> </li>
</ul>
</div> <!-- / top -->
</div> <!--panel -->
<!-- jQuery - the core -->
Schritt 5.3
Speicher alle geänderten Datein und lade sie wieder ins ihr verzeichnis hoch.
Schritt 6
Lade die datein von Sliding Login Panel with jQuery ins Root also da wo deine index.php und admin.php ist ... solltest du sie woanders hochladen musst du im head den verweis ändern.
Ich hoffe ich hab nicht vergessen ....
Mi. 27.01.2010
16:41 Uhr
#61
Zitat geschrieben von Thorsten2004
