02-11-2014, 07:46 PM
(01-03-2014, 02:38 PM)Profilee Nickli Kullanıcıdan Alıntı: Tasarım ve Kodlama ByHayaLeT
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> — <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&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.
Ç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.