Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
[MyBB] ByHayaLeT Header v2
#1
(01-03-2014, 02:38 PM)Profilee Nickli Kullanıcıdan Alıntı:  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 :) :)
Okyanusta batan gemidir yalnızlık,
Çok derinlerdedir gücün yetmez onu oradan çıkarmaya.
Kaybolup gider daha sonra.
Kendi kendine konuşmaktır yalnızlık...
Belkide en iyi tarafıdır bu
Kendini sorgularsın, bir kez olsun çekersin köşeye nefsini hayatı anlamaya çalışırsın.

Cevapla


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