MyBB Depo Forum

Orjinalini görmek için tıklayınız: Siyah Header
Şu anda (Arşiv) modunu görüntülemektesiniz. Orjinal Sürümü Görüntüle internal link
Sayfalar: 1 2
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.

[attachment=1308]

Not: Arama sistemini Mybb'ye uyarlamamıştım isteyen basit bir şekilde uyarlayabilir.
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
(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
twitter den son paylaşımları çekebilmek için ne yapmalı ?
Arkadaş son paylaşımları facebook tada olduğu gibo kutu halinde sitene ekleyebilirsin google a yaz bi istersen kutu sonra istediğin yere ekle
Kardeşim eline sağlık fakat cssler vs hiç olmadı görüntü vermedi.
defaultta olmuyor :/
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.
Sayfalar: 1 2