MyBBDepo - Türkiyenin MyBB Deposu Forumuna Hoşgeldiniz
Eğer sitemize yaptığınız ilk ziyaretiniz ise, lütfen öncelikle Forum Kurallarını okuyunuz. Forumumuzda bilgi alışverişinde bulunabilmeniz için Kayıt olmalısınız. Üye olmayanlar forumumuzdan yararlanamazlar.
Eğer zaten kayıtlı kullanıcı iseniz, lütfen kullanıcı adınız ve şifreniz ile, Giriş yapınız. (Sitemize üyelik ücretsizdir).
007combatant avatar
Konuyu Oyla:
  • Derecelendirme: 2.5/5 - 2 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 2.5/5 - 2 oy

Açılır Kapanır Giriş Paneli / Sliding Login Panel


Sponsor Reklam
media venus

Çevrimdışı 007combatant
 Tarih: 15-10-2011, Saat:22:16
(Son Düzenleme: 08-03-2013, Saat:06:18, Düzenleyen: S.G.)
#1
Ö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:

.rar   images.rar (Dosya Boyutu: 13.62 KB / İndirme Sayısı: 64)

Ö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
Cevapla
Bunu Beğenenler: LonelyDay , S.G , Teknology
Sponsor Reklam
sponsor reklam sponsor reklam

Çevrimdışı LonelyDay
 Tarih: 28-10-2012, Saat:17:26
#2
Hocam Resimlerde Bi Sorun Var Yenilerseniz İyi olur.
Cevapla
Bunu Beğenenler:

Çevrimdışı hüsamettin
 Tarih: 03-03-2013, Saat:16:38
#3
oldu saol
Cevapla
Bunu Beğenenler:

 


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  DVZ Sohbet Panel Eklentisi DOGANORAL 10 2,514 09-07-2014, Saat:14:24
Son Yorum: Machine
  Sitede Sol Üstte Türk Bayrağı Açılır Şekilde xGhos 3 837 09-03-2014, Saat:14:09
Son Yorum: xGhos
  Mybb default temadaki paneli transparent yapma Teknology 2 928 23-01-2014, Saat:23:34
Son Yorum: Teknology
  Mor Neon Isıklı Duyuru Paneli alfurkan1064 0 1,875 06-08-2013, Saat:06:43
Son Yorum: alfurkan1064
  Süper Panel Kendi Yapımım! xdersf 2 1,749 08-07-2013, Saat:16:01
Son Yorum: black_king



Konuyu Okuyanlar: 1 Ziyaretçi