Bomba açılır kapanır sliding login panel.

[Hatake]

Kodlar piyasada var kendime ait değil ancak kodları biraz düzenledim change avatar felan türkçeleştirdim biraz diyebiliriz.. Anlatımda bana aittir..

Öncelikle Demo:




Başlayalım:

Header şablonunu açın ve bu kodu silin;

Kod: Tümünü Seç Tümünü Kopyala

<div id="panel">
{$welcomeblock}
</div>

Not ( Kod default temada vardır siz welcomeblokuda silebilirsiniz sadece )

Daha sonra bu kodu en üste ekleyin;

Kod: Tümünü Seç Tümünü Kopyala

<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script>
jQuery.noConflict();
jQuery(function($) {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");

});

// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});

// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});

</script>
<div id="toppanel">
<div id="panel">
{$welcomeblock}
</div>
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li id="toggle">
<a id="open" class="open" href="#" style="display: block;">Open Panel</a>
<a id="close" class="close" href="#" style="display:none">Close Panel</a>
</li>
<li class="right"> </li>
</ul>
</div>
</div>

Sonra temamızın global.css sini açıp #panel kodunu aratalım varsa silelim ve sona şu kodları ekleylim.

Kod: Tümünü Seç Tümünü Kopyala

#panel {
background: none repeat scroll 0 0 #272727;
border: medium none;
color: #E2E2E2;
display: none;
overflow: hidden;
position: relative;
width: 98.7%;
z-index: 3;
font-size: 11px;
padding: 8px;
}
#panel a {
color: #15ADFF;
text-decoration: none;
}

#panel a:hover {
color: #FFFFFF;
}

#toppanel {
position: absolute; /*Panel will overlap content */
/*position: relative;*/ /*Panel will "push" the content down */
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}

.tab {
background: url(http://st.10tl.net/tema/hatake/images/tab_b.png) repeat-x scroll 0 0 transparent;
height: 42px;
position: relative;
top:0px;

z-index: 999;
}

.tab a:hover.open {
background: url(http://st.10tl.net/tema/hatake/images/bt_open.png) no-repeat left -19px;
}

.tab a:hover.close {
background: url(http://st.10tl.net/tema/hatake/images/bt_close.png) no-repeat left -19px;
}

.tab ul.login {
clear: right;
color: white;
display: block;
float: right;
font-size: 80%;
font-weight: bold;
height: 42px;
line-height: 42px;
margin: 0;
position: relative;
right: 150px;
text-align: center;
width: auto;
}

.tab ul.login li.left {
background: url(http://st.10tl.net/tema/hatake/images/tab_l.png) no-repeat scroll left 0 transparent;
display: block;
float: left;
height: 42px;
margin: 0;
padding: 0;
width: 30px;
}

.tab ul.login li.right {
background: url(http://st.10tl.net/tema/hatake/images/tab_r.png) no-repeat scroll left 0 transparent;
display: block;
float: left;
height: 42px;
margin: 0;
padding: 0;
width: 30px;
}

.tab ul.login li {
background: url(http://st.10tl.net/tema/hatake/images/tab_m.png) repeat-x scroll 0 0 transparent;
display: block;
float: left;
height: 42px;
padding: 0 6px;
text-align: left;
}

.tab ul.login li a {
color: #15ADFF;
}

.tab ul.login li a:hover {
color: #FFFFFF;
text-decoration:none;
}

.tab a.open {
background: url(http://st.10tl.net/tema/hatake/images/bt_open.png) no-repeat scroll left 0 transparent;
}

.tab a.open, .tab a.close {
cursor: pointer;
display: block;
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
position: relative;
top: 11px;
width: 100px;
}

.tab a.close {
background: url(http://st.10tl.net/tema/hatake/images/bt_close.png) no-repeat scroll left 0 transparent;
}

.clear {
clear: both;height: 0;line-height: 0;
}

.clearfix:after {
content: ".";display: block;height: 0;clear: both;visibility: hidden;
}

.clearfix {
display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}

.clearfix {
display: block;
}

/* End hide from IE-mac */
.clearfix {
height: 1%;
}

.clearfix {
display: block;
}

.input-username {
background: url(http://st.10tl.net/tema/hatake/images/username.png) no-repeat scroll left 50% #FFFFFF;
padding-left: 18px;
}

.input-password {
background: url(http://st.10tl.net/tema/hatake/images/password.png) no-repeat scroll left 50% #FFFFFF;
padding-left: 18px;
}

.bt_login {
background: url(http://st.10tl.net/tema/hatake/images/button_login.jpg) no-repeat scroll 0 0 transparent;
border: medium none;
cursor: pointer;
height: 20px;
width: 47px;
}

div#panel .button {
background: url(http://st.10tl.net/tema/hatake/images/buttonbg.jpg) repeat-x scroll left top #F1F1F1;
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
color: #424242;
font: bold 11px Tahoma,Calibri,Verdana,Geneva,sans-serif;
padding: 3px 5px;
}

div#panel .button:hover {
background: none repeat scroll 0 0 #FFFFFF;
}

Sonrasında header_welcomeblock_guest i bunla değişin..

Kod: Tümünü Seç Tümünü Kopyala

<form id="frmLogin" action="member.php" method="post">
<label class="grey" for="username">{$lang->login_username}:</label>
<input type="text" class="input-username" name="username" size="23" accesskey="u" tabindex="101" value="{$lang->login_username}" onfocus="this.value=''" onblur="if (this.value == '') {this.value='{$lang->login_username}';}" />
<label class="grey" for="password">{$lang->login_password}</label>
<input type="password" class="input-password" name="password" size="23" accesskey="u" tabindex="101" value="{$lang->login_password}" onfocus="if (this.value == '{$lang->login_password}'){this.value=''; this.style.color='black';}" onblur="if (this.value == '') {this.value='{$lang->login_password}';}" />

<input type="submit" name="submit" value="" class="bt_login" />
<input type="hidden" name="action" value="do_login" />
</form>
<br />
<div class="left">
<label for="rememberme">
<input id="quick_login_remember" class="rememberme" type="checkbox" value="yes" checked="checked" name="quick_remember">
{$lang->remember_me}
</label><br />
<span>{$lang->welcome_current_time}</span>
</div>
<br />
<div class="right">
Chua có tà i kho?n ? <a href="{$mybb->settings['bburl']}/member.php?action=register">{$lang->welcome_register}</a>
&mdash; <a href="{$mybb->settings['bburl']}/member.php?action=lostpw">{$lang->lost_password}</a>
</div>

Header_welcomeblock_memberı bunla;

Kod: Tümünü Seç Tümünü Kopyala

<table >
<tr>
<td width="25%" style="text-wrap:normal;word-wrap:break-word;">
<font color="white">{$lang->welcome_back}</font>
</td>
<td>
<table>
<tr>
<td width="25%" rowspan="2">
<a href="{$mybb->settings['bburl']}/member.php?action=profile&uid={$mybb->user['uid']}">
<img src="{$mybb->user['avatar']}"></a>

</td>
<td style="text-align:left;padding-left:7%;color:white">
<a href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup', 'buddyList', 350, 350);">{$lang->welcome_open_buddy_list}</a>
<br>
<a href="{$mybb->settings['bburl']}/private.php">{$lang->welcome_pms}</a> {$lang->welcome_pms_usage}
</td>
</tr>
</table>
</td>

<td width="25%" style="text-align:left;padding-left:5%">

<font color="white">
•<a href="{$mybb->settings['bburl']}/usercp.php?action=avatar" /> Change Avatar </a><br />
•<a href="{$mybb->settings['bburl']}/usercp.php?action=editsig" /> Change Signature </a><br />
•<a href="{$mybb->settings['bburl']}/usercp.php?action=email" /> Change Email </a><br />
•<a href="{$mybb->settings['bburl']}/usercp.php?action=password" /> Change Password </a><br />
•<a href="{$mybb->settings['bburl']}/usercp.php?action=options" /> Edit Option </a>

</font>
</td>

<td width="25%">
<a href="{$mybb->settings['bburl']}/usercp.php" />
<input type="button" class="button" style="width: 100%; margin-bottom: 4px;" value="{$lang->welcome_usercp}" /></a>

{$modcplink}{$admincplink}
<a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}" />
<input type="button" class="button" style="width: 100%; margin-bottom: 4px;" value="$lang->welcome_logout" /></a>
</td>

</tr>
</table>

Ve aynı işlemleri sırasıyla header_welcomeblock_member_admin ile header_welcomeblock_member_moderator kısımları için uyguluyoruz...

Admin için;

Kod: Tümünü Seç Tümünü Kopyala

<a href="{$mybb->settings['bburl']}/{$config['admin_dir']}/index.php"><input type="button" class="button" style="width: 100%; margin-bottom: 4px;" value="{$lang->welcome_admin}" /></a>

Mod için;

Kod: Tümünü Seç Tümünü Kopyala

<a href="{$mybb->settings['bburl']}/modcp.php"><input type="button" class="button" style="width: 100%; margin-bottom: 4px;" value="{$lang->welcome_modcp}" /></a>

iyi kullanımlar :)

[AUSXR]

çok teşekkür ederim böyle birşey arıyordum +r

[Hatake]

Daha farkli sekilleride var verebilirim istersen ancak su an mobilim..

[KnownBoss]

Daha farkli sekilleride var verebilirim istersen ancak su an mobilim..

Bilgisayara geçince bu farklı şekilleri konuda editleyip verebilir misin ? Bu arada teşekkürler. 

[Hatake]

Veririm :)

[Novruz]

Uzun Zaman Önce Görmüştüm Bunu.Paylaşım İçin Teşekkürler..

[Ufufuk]

Paylaşım için teşekkürler.

[Hatake]

Önemli değil :)