https://instagram.com/alphazzers
   
Konuyu Oyla:
  • Toplam: 2 Oy - Ortalama: 5
  • 1
  • 2
  • 3
  • 4
  • 5
[MyBB] ByHayaLeT Header v2
#1
Tasarım ve Kodlama ByHayaLeT

wvk46e.png

Kq6BDw.png

Kurulum:

Admin KP - Temalar ve Şablonlar - Temalar - Temanız - Css Oluştur;

Dosya Adı: header.css
Genel Stil
Kendi İçeriğimi Yazmak İstiyorum

Kod:
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:500);
/* 2f4b87 */
/* 2f4b87 */
/* #1f325d */
/* Menu CSS */#cssmenu {
  width: auto;
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  padding: 0;
  margin: 0;
  line-height: 1;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
  -webkit-transition: all ease .3s;
  -o-transition: all ease .3s;
  -moz-transition: all ease .3s;
  -ms-transition: all ease .3s;
  transition: all ease .3s;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
  content: '';
  display: table;
}
#cssmenu:after,
#cssmenu > ul:after {
  clear: both;
}
#cssmenu a {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
#cssmenu ul {
  background: #3b5998;
  border-radius: 3px;
  border: 1px solid #2b4479;
  border: 1px solid #2d4373;
  -webkit-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  -o-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  -moz-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  -ms-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}
#cssmenu ul > li {
  float: left;
  list-style: none;
}
#cssmenu ul > li > a {
  display: block;
  text-decoration: none;
  padding: 15px 44px;
  position: relative;
}
#cssmenu ul > li > a:hover {
  background: #2d4373;
  -webkit-box-shadow: inset 0 0 1px #1e2e4f;
  -o-box-shadow: inset 0 0 1px #1e2e4f;
  -moz-box-shadow: inset 0 0 1px #1e2e4f;
  -ms-box-shadow: inset 0 0 1px #1e2e4f;
  box-shadow: inset 0 0 1px #1e2e4f;
  -webkit-transition: all ease .3s;
  -o-transition: all ease .3s;
  -moz-transition: all ease .3s;
  -ms-transition: all ease .3s;
  transition: all ease .3s;
}
#cssmenu ul > li > a:hover:before {
  content: '';
  z-index: 2;
  position: absolute;
  border: 1px solid white;
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: -1px;
  opacity: .2;
}
#cssmenu ul > li > a:hover:after {
  content: '';
  z-index: 2;
  position: absolute;
  border: 1px solid white;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  width: 100%;
  height: 100%;
  top: 0;
  right: -1px;
  opacity: .2;
}
#cssmenu > ul > li > ul {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}
#cssmenu > ul > li:hover > ul {
  opacity: 1;
  visibility: visible;
  position: absolute;
  border-radius: 0 0 3px 3px;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
}
#cssmenu > ul > li > ul {
  width: 200px;
  position: absolute;
}
#cssmenu > ul > li > ul > li {
  float: none;
  position: relative;
}
#cssmenu > ul > li > ul > li > ul {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}
#cssmenu > ul > li > ul > li:hover > ul {
  opacity: 1;
  visibility: visible;
  position: absolute;
}
#cssmenu > ul > li > ul > li > ul {
  left: 200px;
  top: 1px;
  width: 200px;
}
#cssmenu > ul > li > ul > li > ul > li {
  float: none;
}
#hayaletv3{
        border:none;
        border:0px;
        margin:0px;
        padding:0px;
        font-family:times new roman;
        font-size:14px;
        font-weight:bold;
        color:8e8e8e;
        }
#hayaletv3 ul{
        background:url(http://j1307.hizliresim.com/1c/r/qp99c.gif) top left repeat-x;
        height:43px;
        list-style:none;
        margin:0;
        padding:0;
        }
#hayaletv3 li{
        float:left;
        padding:0px 8px 0px 8px;
        }
#hayaletv3 li a:hover{
        color:#000000;
        text-decoration:none;
        }
#hayaletv3 li ul{
        background:#e0e0e0;
        border-left:2px solid #fce10e;
        border-right:2px solid #fce10e;
        border-bottom:2px solid #fce10e;
        display:none;
        height:auto;
        filter:alpha(opacity=95);
        opacity:0.95;
        position:absolute;
        width:225px;
        z-index:200;
        /*top:1em;
        /*left:0;*/
        }
#hayaletv3 li:hover ul{
        display:block;
        }
#hayaletv3 li li {
        display:block;
        float:none;
        padding:0px;
        width:225px;
        }
#hayaletv3 li ul a{
        display:block;
        font-size:12px;
        font-style:normal;
        padding:0px 10px 0px 15px;
        text-align:left;
        }
#hayaletv3 li ul a:hover{
        background:#FFCC00;
        color:#FF0000;
        opacity:1.0;
        filter:alpha(opacity=100);
        }
/*--------[Pro-v8 NavBar Css - 2013 X.S]--------*/
#navigasyon {
    font-family: tahoma;
    background: #E9EFF5 url(http://st.10tl.net/tema/diesel/nav_bg.png) repeat-x 0 0;
    display: block;
    height: 35px;
    line-height: 35px;
    margin: auto;
    border: 1px solid #D1D1D1;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size: 11px;
}

#navigasyon ol li {
    float: left;
    display: inline-block;
    margin: 0 3px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}

#navigasyon ol li a {
    color: #757575;
    text-shadow: 1px -1px 1px #eee;
    padding-left: 12px;
    background: url(http://st.10tl.net/tema/diesel/nav_hover_bg.png) no-repeat 0 0;
    display: block;
    outline: none;
    text-decoration: none;
    margin-left: -15px;
}

#navigasyon ol li:first-child {
    width: 30px;
    margin-left: 15px;
}

#navigasyon ol li a img {
    display: none;
}

#navigasyon_list li:first-child:hover img {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

#navigasyon_list li:first-child a {
    background: url(http://st.10tl.net/tema/diesel/nav_hover_bg.png) right top !important;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    position: relative;
    width: 35px;
    height: 35px;
}

#navigasyon_list li:first-child a:hover {
    background-position: 100% -43px !important;
}

#navigasyon_list li:first-child a img {
    display: block;
    position: relative;
    max-width: 22px;
    right: 3px;
    top: 7px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
}

/* div yerine span eklendi */
#navigasyon_list li:first-child a i {
    display: none;
}

#navigasyon_list li:last-child span {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: none;
}

#navigasyon_list li:first-child span:hover {
    background-position: 100% -43px !important;
}

#navigasyon_list li:last-child a {
    font-family: tahoma;
    font-weight: bold;
    color: #555;
    font-size: 11px;
    background: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

#navigasyon li:hover a {
    background-position: 0 -43px;
    color: #444;
}

#navigasyon li:active a {
    color: #666;
    text-shadow: none;
    background-position: 0 -86px;
}

#navigasyon ol li a span {
    background: url(http://st.10tl.net/tema/diesel/nav_hover_bg.png) right top;
    display: block;
    padding-left: 4px;
    padding-right: 12px;
}

#navigasyon li:hover span {
    background-position: 100% -43px;
}

#navigasyon li:active span {
    background-position: 100% -86px;
}

#navigasyon_list {
margin:0px; padding:0px;
}
/*-----[Pro-v8 NavBar Font Hover Css - 2013 X.S]-------*/
.nav_font {
    font-weight: bold;
        font-style: normal;
    font-family: Tahoma, Geneva, Sans-Serif;
}

.nav_font_aktif {
    font-size: 12px;
        color: #3C4A9A;
}

.nav_font_aktif:hover {
        color: #333;
}
.slideright:hover {
    -webkit-transform: translate(1em, 0pt);
    -moz-transform: translate(1em, 0pt);
    -o-transform: translate(1em, 0pt);
    -ms-transform: translate(1em, 0pt);
}

.showbox {
    -webkit-transition: all 1s ease-in-out 0s;
    -moz-transition: all 1s ease-in-out 0s;
    -o-transition: all 1s ease-in-out 0s;
    -ms-transition: all 1s ease-in-out 0s;
}
.hayaletemre {
    background: #efefef urlhttp://st.10tl.net/tema/karanlik/destek.10tl.net-v4/kirmizi/arkaplan_bg_k.gif);
    color: #000;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 13px;
    text-align: center;
    line-height: 1.4;
        background-attachment: fixed;
}

Admin KP - Temalar ve Şablonlar - Şablonlar - Temanız - Header Şablonları

header'in İçindekileri Sil ve Aşağıdakileri Yerleştir

Kod:
<div id="header">
<div id='cssmenu'>
<ul>
   <li class='active'><a href='/'><span>Anasayfa</span></a></li>
   <li class='has-sub'><a href='/portal.php'><span>Portal</span></a></li>
   <li><a href='/memberlist.php'><span>Üye Listesi</span></a></li>
   <li class='last'><a href='/search.php'><span>Arama</span></a></li>
   <li class='last'><a href='/calendar.php'><span>Takvim</span></a></li>
   <li class='last'><a href='/misc.php?action=help'><span>Yardım</span></a></li>
   <li class='last'><a href='https://www.facebook.com/hayalet.designnn'><span>ByHayaLeT</span></a></li>
   <li class='last'><a href='Link Ekle'><span>Link -1</span></a></li>
   <li class='last'><a href='Link Ekle'><span>Link -2</span></a></li>
</ul>
</div>
<div class="hayaletemre"><div class="float_left"><div class="showbox slideright"><div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div></div></div><div float_right">{$welcomeblock}</div></div>
<br>
<br>
<br>
<navigation>
<br>
    <div id="container">
        <hr class="hidden" />
        <br class="clear" />
        <div id="content">
            {$pm_notice}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
            {$pending_joinrequests}
            <br />

Admin KP - Temalar ve Şablonlar - Şablonlar - Temanız - Header Şablonları

header_welcomeblock_guest'in İçindekileri Sil ve Aşağıdakileri Yerleştir

Kod:
<br>
<br>
<span style="float: right;">
<fieldset><a href="{$mybb->settings['bburl']}/member.php?action=login">{$lang->welcome_login}</a> &mdash; <a href="{$mybb->settings['bburl']}/member.php?action=register">{$lang->welcome_register}</a></span></fieldset>
<br>
<br>

Admin KP - Temalar ve Şablonlar - Şablonlar - Temanız - Header Şablonları

header_welcomeblock_member'in İçindekileri Sil ve Aşağıdakileri Yerleştir

Kod:
<div class="float_right"><fieldset><img src="{$mybb->user['avatar']}"style="max-height: 25px"/> {$lang->welcome_back} <a href="/member.php?action=profile">Profilim</a> — <a href="/usercp.php">Üye Kontrol Paneli</a> — <a href="/usercp.php?action=profile">Ayarlar</a> {$modcplink}{$admincplink} — <a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}">{$lang->welcome_logout}</a></div>
<br>
<br>

Admin KP - Temalar ve Şablonlar - Şablonlar - Temanız - Navigasyon Şablonları

nav'in İçindekileri Sil ve Aşağıdakileri Yerleştir

Kod:
<div id="navigasyon">
<ol id="navigasyon_list">
{$nav}{$activebit}
</ol>
</div>

Admin KP - Temalar ve Şablonlar - Şablonlar - Temanız - Navigasyon Şablonları

nav_bit'in İçindekileri Sil ve Aşağıdakileri Yerleştir

Kod:
<li><a href="{$navbit['url']}" title="{$mybb->settings['bbname']}"><img alt="{$mybb->settings['bbname']}" src="http://st.10tl.net/tema/diesel/home_nav.png" /><span><i class="nav_font">{$navbit['name']}</i></span></a></li>

Admin KP - Temalar ve Şablonlar - Şablonlar - Temanız - Navigasyon Şablonları

nav_bit_active'in İçindekileri Sil ve Aşağıdakileri Yerleştir

Kod:
<li><a href="{$navbit['url']}" title="{$mybb->settings['bbname']}"><img alt="{$mybb->settings['bbname']}" src="http://st.10tl.net/tema/diesel/home_nav.png" /><span><i class="nav_font nav_font_aktif">{$navbit['name']}</i></span></a></li>

nav_sep ve nav_sep_active'nin içindekileri silin yani boş kalsın içi ve kaydedin.

İşlem Tamamdır ;)

BEN NEXT'İM ARKADAŞLAR :) :)
Ara
Cevapla PGM
Teşekkür verenler:
#2
Güzelmiş Kardeşim Geçmiş Olsun Hesabın Çalınmış die Ama Ben İnanıyorum Sen NEXT Olduguna
Ara
Cevapla PGM
Teşekkür verenler:
#3
Güzel Eline Sağlık ..
Cevapla PGM
Teşekkür verenler:
#4
Son Tema Yapisimda Deneme Temamda Kullandim V1 I Bu Sefer Headeri Yaptim Eyer Yapmasam Kesin Kullanirdim
Ara
Cevapla PGM
Teşekkür verenler:
#5
Fena değil, eline sağlık.
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi


Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping