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).
eatik avatar
Konuyu Oyla:
  • Derecelendirme: 5/5 - 1 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 5/5 - 1 oy

Siyah Header


Sponsor Reklam
media venus

Çevrimdışı eatik
 Tarih: 01-07-2014, Saat:23:31
(Son Düzenleme: 31-08-2014, Saat:16:41, Düzenleyen: xpserkan.)
#1
Arkadaşlar QwerT v3 tasarımında kullanmayı düşünüp sonradan vazgeçtiğim headeri paylaşmak istiyorum. Yeni tasarım yapanlar veya mevcut temasında kullanmak isteyenler olursa buyursunlar kullansınlar. Kodlama tamamen bana ait olup bazı bölümler hazır çizimdir. Kendi temamın renkleriyle uyumsuz bulduğum için kullanmaktan vazgeçtim.

Önizleme;

Giriş Yapmadan;

resim

Giriş Yapılınca;

resim

Kullanım;

^^Lütfen önce temanızın yedeğini alın. Oluşabilecek hatalardan sorumluluk kabul etmiyorum.^^

Alttaki css kodlarını isterseniz temanızın global.css dosyasına, isterseniz yeni bir css oluşturup onun içerisine ekleyin.

Kod:
#header {
height: 159px;
width: 91%;
margin: 0 auto;
}
#header a {
color: #fff;
}
.ustheader {
height: 110px;
background: url(images/header/headerBg.png) repeat-x;
}
.menu ul {
float:right;
margin-top: 30px;
margin-right: 25px;
}
.menu ul li {
list-style: none;
font-size: 16px;
float: left;
margin-right: 15px;
}
.menu ul li a {
color: #fff;
text-decoration: none;
font-family: Trebuchet MS;
}
.menu ul li:hover {
color: #999;
}
#eptorrent {
float:left;
margin-left: 45px;
margin-top: 10px;
}
.altheader {
height: 65px;
background: url(images/header/altBg.png) repeat-x;
}
.social {
float:right;
margin-right: 40px;
}
.social img:hover {
opacity: 0.8;
}
.social ul {
list-style:none;
}
#pmbox {
background: url(images/header/massage.png) no-repeat;
width: 45px;
height: 30px;
}
.pmnew {
background: #b32720;
border-radius: 4px;
moz-border-radius: 4px;
webkit-border-radius: 4px;
width: 10px;
height: 10px;
margin-left: 20px;
font-family: Arial,sans-serif;
color: #fff;
padding:3px;
font-size: 9px;
text-align: center
}
#alertbox {
background: url(images/header/alert.png) no-repeat;
width: 45px;
height: 30px;
}
.alertnew {
background: #b32720;
border-radius: 4px;
moz-border-radius: 4px;
webkit-border-radius: 4px;
width: 10px;
height: 10px;
margin-left: 20px;
font-family: Arial,sans-serif;
color: #fff;
padding:3px;
font-size: 9px;
text-align: center
}
.social ul li {
float:left;
margin-right: 10px;
}
.latesttweet {
float:left;
margin-left: 20px;
margin-top: 19px;
font-family: Georgia;
font-size: 16px;
color: #aaa;
text-decoration: italic;
}
.arama {
float:right;
margin-top: 16px;
margin-right: -10px;
height: 40px;
}
.arama input {
background: #3d3d3d;
width: 187px;
outline:none;
height: 25px;
border:none;
color: #fff;
border-radius: 9px;
text-align: center;
webkit-border-radius: 9px;
moz-border-radius: 9px;
font-family: Georgia;
}
.arama button {
background: #3d3d3d;
border-radius: 9px;
color: #fff;
webkit-border-radius: 9px;
moz-border-radius: 9px;
height: 25px;
cursor: pointer;
border:none;
}
.panel {
background: url(images/header/panelBg.png);
height: 30px;
font-family: Georgia;
padding: 7px 15px 7px 15px;
font-size: 16px;
color: #fff;
}
.panel a {
color: #fff;
}
.panel img {
margin-right: 14px;
}
.panel li:hover {
opacity: 0.9;
}
.giris {
float:right;
}
.giris input {
border-radius: 3px;
moz-border-radius: 3px;
webkit-border-radius: 3px;
color: #3d3d3d;
outline: none;
background: #fff;
font-family: Arial, sans-serif;
borrder: 1px solid #999;
}
.giris button {
background: #3d3d3d;
border-radius: 2px;
color: #fff;
webkit-border-radius: 2px;
moz-border-radius: 2px;
height: 25px;
cursor: pointer;
border:none;
}
.giris ul {
list-style:none;
margin-top: -3px;
}
.giris ul li {
float:left;
}
.paneltext {
float:left;
}

Daha sonra alttaki işlemleri uygulayın.

Admin Panel Sağ Ok Şablonlar Sağ Ok Kullandığınız Tema Şablonlar Sağ Ok Header Şablonlar Sağ Ok header şablonunu açın, tamamen silip alttakileri yerleştirin. (Bunu kendinize göre düzenleyebilirsiniz, default tema kullananlar direk bunu yazabilir.)

Kod:
<html>
<head>
</head>
<body>
        <a name="top" id="top"></a>
<div id="header">
<div class="panel">
{$welcomeblock}
</div>
<div class="ustheader">
<div class="menu">
<ul>
<li><a href="/">Ana Sayfa</a></li><li><a href="#">Deneme</a></li><li><a href="#">Deneme</a></li><li><a href="#">Deneme</a></li><li><a href="#">Deneme</a></li>
</ul>
</div>
<div id="eptorrent"><a href="/"><img src="images/QwerTv3/logo.png"/></a></div>
</div>
<div class="altheader">
<div class="social">
<ul>
<li><a href="#"><img src="images/header/youtube.png"></a></li><li><a href="#"><img src="images/header/twitter.png"></a></li><li><a href="#"><img src="images/header/linkedin.png"></a></li><li><a href="#"><img src="images/header/facebook.png"></a></li>
</ul>
</div>
<div class="latesttweet">
<img src="images/header/duyuru.png"/> <span style="margin-left: 10px; margin-top: -10px">Lorem Ipsum Dolar Sit Amet</span>
</div>
<div class="arama">
    <form action="search.php" method="post">
        <input type="text" name="keywords" onblur="if (value =='') {value = 'Ne aramıştınız?'}" onfocus="if (value == 'Ne aramıştınız?') {value =''}" type="text" value="Ne aramıştınız?" />
<button type="submit">Ara</button>
    </form>
</div>
</div>    
            </div>
<br class="clear"><br/>
<div id="container">
        <div id="content">
            {$pm_notice}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
            {$pending_joinrequests}
            <navigation>
</body>
</html>

Admin Panel Sağ Ok Şablonlar Sağ Ok Kullandığınız Tema Şablonlar Sağ Ok Header Şablonlar Sağ Ok header_welcomeblock_guest şablonunu açın, tamamen silip alttakileri yerleştirin.

Kod:
<div class="paneltext">Hoşgeldiniz. İçeriklerden yararlanmak için üye olunuz.</div>
<div class="giris"><form method="post" action="{$mybb->settings['bburl']}/member.php">
<input type="hidden" name="action" value="do_login" /><input type="hidden" name="url" value="{$portal_url}" />
Kullanıcı Adı <input type="text" class="textbox" name="username"  /> Şifre <input type="password" class="textbox" name="password" value="" /> <button title="Giriş Yap" type="submit">Giriş</button> <a href="member.php?action=register"><input title="Kayıt Ol" style="border:none; background: #3d3d3d; color: #fff;"class="button" type="button" ONCLICK="href('member.php?action=register');" value="+"/></a><a href="member.php?action=lostpw"><input title="Şifremi Unuttum" style="border:none; background: #3d3d3d; color: #fff;"class="button" type="button" ONCLICK="href('member.php?action=register');" value="?"/></a></form></div>

Admin Panel Sağ Ok Şablonlar Sağ Ok Kullandığınız Tema Şablonlar Sağ Ok Header Şablonlar Sağ Ok header_welcomeblock_member şablonunu açın, tamamen silip alttakileri yerleştirin.

Kod:
<div class="paneltext">Forumlarımıza Tekrar Hoşgeldiniz Sayın <a href="{$mybb->user['profilelink']}">{$mybb->user['username']}</a></div>
<div class="giris"> <ul><li><a href="{$mybb->settings['bburl']}/usercp.php"><img title="Kullanıcı Kontrol Paneli" src="images/header/user.png"/></a></li><li> {$modcplink}</li><li> {$admincplink} </li><li title="Özel Mesajlar"><div id="pmbox"><div class="pmnew"><a href="{$mybb->settings['bburl']}/private.php">{$mybb->user['unreadpms']}</a></div></div></li>  <li title="Bildirimler"><div id="alertbox"><div class="alertnew"><a href="usercp.php?action=alerts">{$mybb->user['unreadalerts']}</a></div></div></li> <li> <a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}"><img title="Çıkış" src="images/header/logout.png"/</a></li></div>

Admin Panel Sağ Ok Şablonlar Sağ Ok Kullandığınız Tema Şablonlar Sağ Ok Header Şablonlar Sağ Ok header_welcomeblock_member_admin şablonunu açın, tamamen silip alttakileri yerleştirin.

Kod:
<a href="{$mybb->settings['bburl']}/{$config['admin_dir']}/index.php"><img title="Admin Paneli" src="images/header/admincp.png"/></a>

Admin Panel Sağ Ok Şablonlar Sağ Ok Kullandığınız Tema Şablonlar Sağ Ok Header Şablonlar Sağ Ok header_welcomeblock_member_moderator şablonunu açın, tamamen silip alttakileri yerleştirin.

Kod:
<a href="{$mybb->settings['bburl']}/modcp.php"><img title="Moderatör Paneli" src="images/header/modcp.png"/></a>

Alttaki arşivi indirin, images klasörünün içine atın.


.rar   header.rar (Dosya Boyutu: 180.58 KB / İndirme Sayısı: 76)

Not: Arama sistemini Mybb'ye uyarlamamıştım isteyen basit bir şekilde uyarlayabilir.
Cevapla
Bunu Beğenenler: iCarly , __Smile__ , Richardio , Pegasus86
Sponsor Reklam
sponsor reklam sponsor reklam

Çevrimdışı NY.Net
 Tarih: 01-07-2014, Saat:23:57
#2
güzel tasarım ama şöyle bir sorun var mybb de headerler biraz sorunlu css çakışma yaşatabilir sitenize o yüzden ya direk temada verilmesi daha uygun yada çok özgün kod adlarıyla mesela div id="headertorrent" fln gibi
Cevapla
Bunu Beğenenler:

Çevrimdışı eatik
 Tarih: 02-07-2014, Saat:00:12
#3
(01-07-2014, Saat:23:57)NY.Net Adlı Kullanıcıdan Alıntı: güzel tasarım ama şöyle bir sorun var mybb de headerler biraz sorunlu css çakışma yaşatabilir sitenize o yüzden ya direk temada verilmesi daha uygun yada çok özgün kod adlarıyla mesela div id="headertorrent" fln gibi

Aynen. Paylaşmadan önce bunu düşündüm fakat eski header kodlarını silip temiz olarak eklerler ise sorun olmayacaktır. Veya dediğiniz gibi onlar #header idinin adını değiştirebilirler pek zor olmasa gerek Melek - Masum
Cevapla
Bunu Beğenenler:

Çevrimdışı bitanem03
 Tarih: 02-07-2014, Saat:00:37
#4
twitter den son paylaşımları çekebilmek için ne yapmalı ?
Cevapla
Bunu Beğenenler:

Çevrimdışı NY.Net
 Tarih: 02-07-2014, Saat:03:25
#5
Arkadaş son paylaşımları facebook tada olduğu gibo kutu halinde sitene ekleyebilirsin google a yaz bi istersen kutu sonra istediğin yere ekle
Cevapla
Bunu Beğenenler:

Çevrimdışı depresif
 Tarih: 02-07-2014, Saat:03:41
#6
Kardeşim eline sağlık fakat cssler vs hiç olmadı görüntü vermedi.
Cevapla
Bunu Beğenenler:

Çevrimdışı Saint
 Tarih: 02-07-2014, Saat:03:57
#7
defaultta olmuyor :/
Cevapla
Bunu Beğenenler:

Çevrimdışı eatik
 Tarih: 02-07-2014, Saat:10:34
#8
Arkadaşlar 1.6.14 default temada tekrar denedim yine sorun yok. Önizlemeler de default temadan zaten. Eğer görüntü gelmiyorsa @NY.Net'in de dediği gibi önceki #header kodlarınla birlikte çağrılıyordur ve doğal olarak görüntü vermiyordur. Eğer düzenlemekle uğraşmak istemiyorsanız bu etiketlerin adlarını değiştirip öyle kullanabilirsiniz.

Yine de header şablonuna eklenecek kodları güncelledim, tekrar deneyebilirsiniz.
Cevapla
Bunu Beğenenler:

 


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  Header & Footer çizimi önerileri ve görüşleri alabilirmiyim? BeastlyMan 2 425 24-03-2016, Saat:23:11
Son Yorum: BeastlyMan
  Basit Header Tasarımı aykutgunes 4 908 17-08-2015, Saat:11:48
Son Yorum: EmreKRMN
Onay ST 2013 Header Tasarımı | Beta Time Traveler 9 2,785 15-08-2014, Saat:17:34
Son Yorum: Time Traveler
  Fifa 14 Header MehmetMsM 4 1,609 24-03-2014, Saat:22:21
Son Yorum: Leoan
  İstek Header rsylmz 3 1,354 26-09-2012, Saat:21:10
Son Yorum: rsylmz



Konuyu Okuyanlar: 1 Ziyaretçi