MyBB Depo Forum

Orjinalini görmek için tıklayınız: Açılır Kapanır Giriş Paneli / Sliding Login Panel
Şu anda (Arşiv) modunu görüntülemektesiniz. Orjinal Sürümü Görüntüle internal link
Öncelikle Kaynağı belirtmek isterimki bazıları buradan şuradan alındı demesin....
http://mybbvn.com/forum/thread-3110.html


Başlamadan mutlaka temanızı yedekleyiniz...
Kodlamalarda bazı yerleri tam Türkçeleştiremedim...
1.5 aylık mybb bilgimle ancak bu akdar gerisini siz halledersiniz...



Şimdi başlayalımmm
Önizleme:
resim

ftp de images içine atılacak resimler:
[attachment=946]

Öncelikle temamızın

header şablonunu açıyoruz ve bu kodu bularak siliyoruz
Alıntı:<div id="panel">
{$welcomeblock}
</div>

Daha sonra bu kodu yine aynı şablonda en üste ekliyoruz....
Alıntı:<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 Temalar kısmına geçip temamızın global.css sini seçip gelişmiş düzenlemeye geçiyoruz...Ve #panel kodlarını temizledikten sonra
bu kodu ilgili kısma ekliyoruz...
Alıntı:#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;
}


Daha Sonra bu kodları yine global.css de en alta ekleyerek kaydediyoruz...
Alıntı:#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(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(images/bt_open.png) no-repeat left -19px;
}

.tab a:hover.close {
background: url(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(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(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(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(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(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(images/username.png) no-repeat scroll left 50% #FFFFFF;
padding-left: 18px;
}

.input-password {
background: url(images/password.png) no-repeat scroll left 50% #FFFFFF;
padding-left: 18px;
}

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

div#panel .button {
background: url(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;
}

Yine temamızın şablonlarından header_welcomeblock_guest kısmını tamamiyle bu kodlarla değiştiriyoruz...



Alıntı:<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>

Daha sonra aynı şekilde header_welcomeblock_member
şablonunu bunlalrla değiştiriyoruz....

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


Voila!İşlem tamam en sona kalan ise sadece ilgili panel resimlerini atmakta....images klasörü içerisine atmakta....




Hadi hayırlı Olsun




Alıntı Kaynak : mybbdestek.com
Hocam Resimlerde Bi Sorun Var Yenilerseniz İyi olur.
oldu saol