Profosyonel Mybb Tema Yapımı (Sabitlenmeli)

[leoan]

Herkese Merhaba Arkadaşlar Bugün Sizlere Gerçekten Sabitlenmesi
Gereken Bir KONUYU huzurlarınıza Sunacağım bu Anlatım Sayesinde
Profosyonel Anlamda Tema Yapabilirsiniz İlk Temaya Yapmaya Geçmeden
Tema Yapmamız İçin Gerekli olan Alanları Bir Ayıralım..

1.Yeni Tema Oluştur=Kendi Default temanızı tekrardan oluşturma İmkanı Verir.
2.Tema Yükle=Dosya Biçiminde Veya XML biçiminde Tema YükleyeBileceğiniz Alan
3.Tema Ara=Yüklediğiniz temaları Kimlikleri İle Arayabilirsiniz.
4.Temalar=Yüklediğiniz Temalar burada Gözükmektedir.

not:Bu yazılan Anlatımları kesinlikle unutmayın lazım olacaklar..

TEMA YÜKLEME ?
Biz bu dersimizde Kendi Temamızı Yapacaktık Ama Sizler uğraşmayın Diye
Bu konuyada Bir Değindim

İlk olarak şablon ve Stil>>>Tema Yükle>>>>Sürüm uyumluluğunu Yoksay>>>>url>>>>>>Deneme Tema:xml: http://webhusotema.com.nu/Temalar/Leoan%20v2%20-theme.xml
Tema Resimleri için Konu Linki: http://destek.10tl.net/showthread.php?tid=26494 Tüm Bunları Yaptıktan Sonra umarım tema Yükleyemi çözmüssünüzdür.

TEMA YAPMAYA BAŞLADIK !
Anlatıma Devam Ediyorum şimdi ilk başlangıç Css Menü Eklemede bu yüzden Anlatacağım ve size Css menü kodu vereceğim

Aynen Yukardaki Resim gibi Bir Menü Ekleyeceğiz bunu şu işlemler İle Yapacağız

Kod: Tümünü Seç Tümünü Kopyala

/* Let's import the lovely google font, please keep this line at the top of your stylesheet */

@import url(http://fonts.googleapis.com/css?family=Capriola);



/* Menu CSS */

#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a{
    
    padding: 0;
    margin: 0;
    line-height: 1;
    font-family: 'Capriola', sans-serif;
    
}

#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {

    content: '';
    display: table;
    
}


#cssmenu:after, #cssmenu > ul:after {

    clear: both;
    
}

#cssmenu {

    zoom:1;
    height: 69px;
    background: url(http://cssmenumaker.com/sites/default/files/menu/148/bottom-bg.png) repeat-x center bottom;
    border-radius: 2px;
    
}
#cssmenu ul{

    background: url(http://cssmenumaker.com/sites/default/files/menu/148/nav-bg.png) repeat-x 0px 4px;
    height: 69px;
    
}

#cssmenu ul li{

    float: left;
    list-style: none;
    
}

#cssmenu ul li a{
    
    display: block;
    height: 37px;
    padding: 22px 30px 0;
    margin: 4px 2px 0;
    border-radius: 2px 2px 0 0;
    text-decoration: none;
    font-size: 15px;
    color: white;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .75);
    font-weight: 400;
    opacity: .9;
    
}

#cssmenu ul li:first-child a{
    
    margin: 4px 2px 0 0;
    
}

#cssmenu ul li a:hover, #cssmenu ul li.active a{
    
    background: url(http://cssmenumaker.com/sites/default/files/menu/148/color.png) center bottom;
    display: block;
    height: 37px;
    margin-top: 0px;
    padding-top: 26px;
    color: #600000;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .35);
    opacity: 1;
    
}

Üstteki Kodu Admin KP >> Şablon & Stil >> Temanız >> Global.css >> Gelişmiş Düzenleme

En alta yapıştırın

Admin KP >> Şablon & Stil >> Şablonlar >> Header Şablonlar >> header

En alta veya istediğiniz yere yapıştırın aşağıdaki kodu

Kod: Tümünü Seç Tümünü Kopyala

<div id='cssmenu'>
<ul>
   <li class='active '><a href='/index.php'><span>Anasayfa</span></a></li>
   <li><a href='#'><span>PixelPuan Göndermek</span></a></li>
   <li><a href='#'><span>Galeri</span></a></li>
   <li><a href='#'><span>Modifiye İstek</span></a></li>
</ul>
</div>

Css menü kodumuzu Ekledik Ve Bu Aşamayı Tamamladık

TASARIMA BAŞLADIK=LOGO ?

Şimdi Arkadaşlar hem logo Url Ekleme hemde Logo Nasıl Yapılır Onu Öğreneceğiz Yeni tema Yapaya Başlayanlar Genelde Photoshop bilgisine sahip olmadığı için Cooltext Veya Text Space Sitelerini öneriyorum

adres: http://www.textspace.com En çok bunu Öneriyorum

Anlatım:
Yukardaki Siteye Girelim

Yukardaki yazı stillerinden Birini Seçelim Sitenize uygunluğuna Dikkat Ederek SEÇEBİLİRSİNİZ.seçtikten sonra renkleri gelecek renginide seçin ve yapmaya başlayın..

Karşınıza bu şekilde bir Editör Gelecek.
nasıl yükleyeceğiz Hemen Düzenlediğimiz Temaya Tıklayalım Ve Tema logosu Yazan yere yaptığımız logonun urlsini yapıştıralım..

Bu Aşamada tamamlanmış bulunmaktadır....

TEMA YAPMAYA BAŞLADIK=KULLANICI PANELİ ?
Herkese Merhaba Arkadaşlar ŞİMDİDE görünüşünü sevmediğiniz kullanıcı panelini resimli ve hoş bir görüntüye sahip olması için aşağıdakine benzer resimden görebilirsiniz.

Bu Resimdeki gibi hoş bir kullanıcı paneli eklemek çok kolay size benim tercihi ettiğim kullanıcı kp'nin kodlarını vereyim

İlk olarak css oluşturalım.

Admincp > Temalar &> Şablonlar > temanız > CSS oluştur diyoruz.

Stil Adı:

Kod: Tümünü Seç Tümünü Kopyala

kullanıcı_paneli.css

Bağlı olduğu dosyalar:

Kod: Tümünü Seç Tümünü Kopyala

Genel Stil

Alta Kendi içeriğimi yazmak istiyorum tıklayın ve açılan kutucuğa aşağıdaki css kodlarını ekleyin ve kaydedin..

Kod: Tümünü Seç Tümünü Kopyala

/* Kullanici Paneli CSS */
#panel-cerceve {
border: 1px solid #a1a1a1;
margin: 0px 0px;
}

#panel-avatar {
background: #eee;
border: 1px solid #fcfcfc;
border-right: 1px solid #a1a1a1;
padding: 1px;
width: 43px;
height: 43px;
vertical-align: middle;
}

#panel-ust {
background: #eee;
color: #000000;
font-size: 11px;
border: 1px solid #fcfcfc;
border-bottom: 1px solid #cdcdcd;
padding: 5px;
}

#panel-alt {
background: #eee;
color: #000000;
font-size: 11px;
border: 1px solid #fcfcfc;
padding: 5px;
}

#panel .remember_me input {
vertical-align: middle;
margin-top: -1px;
}

#panel-alt .links {
margin: 0;
float: right;
}

/* Kullanici Paneli Icons CSS */

.profiles {
    background: url(images/usercp/viewprofile.gif) no-repeat 0px 0px;
    padding: 2px;
    padding-left: 20px;
}

.arkadas {
    background: url(images/usercp/editlists.gif) no-repeat 0px 0px;
    padding: 2px;
    padding-left: 20px;
}

.cikis-yap {
    background: url(images/usercp/cikis.png) no-repeat 0px 0px;
    padding: 2px;
    padding-left: 20px;
}

.son_yorumlar {
    background: url(images/usercp/subscriptions.gif) no-repeat 0px 0px;
    padding: 2px;
    padding-left: 20px;
}

.bugun_yorumlar {
    background: url(images/usercp/fsubscriptions.gif) no-repeat 0px 0px;
    padding: 2px;
    padding-left: 20px;
}

.pmler {
    background: url(images/usercp/composepm.gif) no-repeat 0px 0px;
    padding: 2px;
    padding-left: 20px;
}

.mods-paneli {
    background: url(images/usercp/options.gif) no-repeat 0px 0px;
    padding: 2px;
    padding-left: 20px;
}

.admins-paneli {
    background: url(images/usercp/admins.png) no-repeat 0px 0px;
    padding: 2px;
    padding-left: 20px;
}

/* Panel Login-Register Icon */

#nick {
padding: 4px 4px 4px 20px;
border: 2px solid #ccc;
background: #fff url(admin/styles/default/images/icons/user.gif) 2px center no-repeat;
color: #6F6F6F;
width: 175px;
font:bold 12px "Lucida Grande", Arial, sans-serif;
}

#nick:focus {
background: #fff url(admin/styles/default/images/icons/user.gif) 2px center no-repeat;
border: 2px solid #73A6FF;
color: #000;
}

#sifre {
padding: 4px 4px 4px 20px;
border: 2px solid #ccc;
background: #fff url(admin/styles/default/images/icons/sifre.png) 2px center no-repeat;
color: #6F6F6F;
width: 175px;
font:bold 12px "Lucida Grande", Arial, sans-serif;
}

#sifre:focus {
background: #fff url(admin/styles/default/images/icons/sifre.png) 2px center no-repeat;
border: 2px solid #73A6FF;
color: #000;
}

Admincp • Temalar •& Şablonlar • Şablonlar • Temanız • Header Şablonlar • header_welcomeblock_guest şablonu açıp aşağıdaki kod ile komple değiştiriyoruz.

Kod: Tümünü Seç Tümünü Kopyala

<script type="text/javascript">
<!--
    lang.username = "{$lang->login_username}";
    lang.password = "{$lang->login_password}";
    lang.login = "{$lang->login}";
    lang.lost_password = " &mdash; <a href=\"{$mybb->settings['bburl']}/member.php?action=lostpw\">{$lang->lost_password}<\/a>";
    lang.register_url = " &mdash; <a href=\"{$mybb->settings['bburl']}/member.php?action=register\">{$lang->welcome_register}<\/a>";
    lang.remember_me = "{$lang->remember_me}";
// -->
</script>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="panel-cerceve">
    <tr>
        <td rowspan="2" width="44" valign="middle" align="center" id="panel-avatar"><img src="{$theme['imgdir']}/default_avatar.png" alt="avatar" width="42" height="42" /></td>
        <td id="panel-ust"><span style="float: right;">{$lang->welcome_current_time}</span>{$lang->welcome_guest}</td>
    </tr>
    <tr>
<td id="panel-alt">
<form class="clearfix" action="member.php" method="post">
<input type="hidden" name="action" value="do_login" />
<input class="field" type="text" id="nick" name="username" size="23" value="Kullanıcı Adınız.. " onfocus="this.value=''" />
<input class="field keyboardInput" type="password" id="sifre" name="password" size="23" value="şifreniz.. " onfocus="this.value=''" />
<input type="submit" name="submit" value="{$lang->login}" class="bt_login" />
<label class="black" for="remember"><input type="checkbox" name="remember" id="remember" value="yes" checked="checked" />
<acronym title="Bu seçenek, sitemize her ziyaretinizde giriş bilgilerinizin otomatik olarak hatırlanmasını sağlar.">{$lang->remember_me}</acronym></label>&nbsp;&nbsp;<a class="lost-pwd" rel="nofollow" href="member.php?action=lostpw">{$lang->lost_password}</a>
&nbsp;&nbsp;<a rel="nofollow" href="{$mybb->settings['bburl']}/member.php?action=register" title="Ücretsiz ve hızlı kayıt olabilmek için tıklayın."><img src="images/uye-ol.gif" style="vertical-align: middle;" alt="kayıt ol" border="0" height="14" width="58"></a></form>
</td>
</tr>
</table>
<br>

Admincp Temalar & Şablonlar Şablonlar Temanız Header Şablonlar header_welcomeblock_member şablonu açıp aşağıdaki kod ile komple değiştiriyoruz.

Kod: Tümünü Seç Tümünü Kopyala

<table border="0" cellpadding="0" cellspacing="0" width="100%" id="panel-cerceve">
    <tr>
        <td rowspan="2" width="44" valign="middle" align="center" id="panel-avatar"><a rel="nofollow" href="{$mybb->settings['bburl']}/usercp.php?action=avatar" title="Avatarını Değiştirmek için Tıkla." class="panel-avatar"><img src="{$mybb->user['avatar']}" alt="avatar" width="42" height="42" /></a></td>
        <td id="panel-ust"><span style="float:right;">{$lang->welcome_current_time}</span>{$lang->welcome_back}   <a rel="nofollow" class="profiles" href="{$mybb->settings['bburl']}/usercp.php"><strong>{$lang->welcome_usercp}</strong></a> <a href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup', 'buddyList', 350, 350);">{$lang->welcome_open_buddy_list}</a> <a rel="nofollow" class="cikis-yap" href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}">{$lang->welcome_logout}</a></td>
    </tr>
    <tr>
        <td id="panel-alt"><span class="links">{$modcplink} {$admincplink}</span><a rel="nofollow" class="son_yorumlar" href="{$mybb->settings['bburl']}/search.php?action=getnew">{$lang->welcome_newposts}</a> <a rel="nofollow" class="bugun_yorumlar" href="{$mybb->settings['bburl']}/search.php?action=getdaily">{$lang->welcome_todaysposts}</a> <a class="pmler" href="{$mybb->settings['bburl']}/private.php">{$lang->welcome_pms}</a> {$lang->welcome_pms_usage}<!-- ProfileComments --> | <a href="{$mybb->settings['bburl']}/member.php?action=profile&uid={$mybb->user['uid']}" title="{$lang->profile_comments}">{$lang->profile_comments_new_inmenu}</a> {$lang->profile_comments_new_inmenu_count}<!-- /ProfileComments --></td>
    </tr>
</table>
<br>

Admincp Temalar & Şablonlar Şablonlar Temanız Header Şablonlar header_welcomeblock_member_admin şablonu açıp aşağıdaki kod ile komple değiştiriyoruz.

Kod: Tümünü Seç Tümünü Kopyala

<a class="admins-paneli" rel="nofollow" href="{$mybb->settings['bburl']}/{$admin_dir}/index.php">{$lang->welcome_admin}</a>

Admincp Temalar & Şablonlar Şablonlar Temanız Header Şablonlar header_welcomeblock_member_moderator şablonu açıp aşağıdaki kod ile komple değiştiriyoruz

Kod: Tümünü Seç Tümünü Kopyala

<a rel="nofollow" class="mods-paneli" href="{$mybb->settings['bburl']}/modcp.php">{$lang->welcome_modcp}</a>

Hepsini
uyguladıktan sonra Şu şekilde olacaktır

hayırlı Olsun ! Bu aşamayıda tamamladık.

TASARIM YAPMAYA BAŞLADIK=MCRT STİLLİ NAGVATİON


Arkadaşalr Bunu Anlatmaya Bek gerek yok Direk Size Konunun bulunduğu linki vereceğim oradan Bunu halledebilirsiniz.
http://destek.10tl.net/showthread.php?tid=22107&highlight=mct
Bitti




amlatım devam edecektir güncel++

---

GÜNCEL

[kaRanLık-61]

Hmm güzel konuymuş + Sabit

[TaaRRuz]

Teşekkürler +Rep.

[Kamil55]

başarılı

[Kamil55]

Admincp > Temalar &> Şablonlar > temanız > CSS burda şablonlardan neyi seççez

[Matrix4040]

Sağol Güzel Konu Tema Yapmayı Denicem :)

[#Power]

Header şablonlar yok

[BayEkSeLaNs]

http://www.textspace.com/ dostum site ölmus

[JewelRock]

teşekkürler yararlı konu tema yapımcılarının işine yarayabilir

[ByKanser]

Gerçektende Çok İyi

[rbarut]

Teşekkürler +Rep.

banlı üyelerin emeğini kaldırın, konuyu silin.emek hırsızlığına giriyor bu yapılan.