Konuyu Oyla:
  • Toplam: 5 Oy - Ortalama: 4
  • 1
  • 2
  • 3
  • 4
  • 5
Profosyonel Mybb Tema Yapımı (Sabitlenmeli)
#1
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%...-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
jhy71.png
Aynen Yukardaki Resim gibi Bir Menü Ekleyeceğiz bunu şu işlemler İle Yapacağız
Kod:
/* 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:
<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
jhydn.png
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..
jhygr.png
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..
jhym4.png
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.
jhyp1.png
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:
kullanıcı_paneli.css
Bağlı olduğu dosyalar:
Kod:
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:
/* 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:
<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:
<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:
<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:
<a rel="nofollow" class="mods-paneli" href="{$mybb->settings['bburl']}/modcp.php">{$lang->welcome_modcp}</a>
Hepsini
uyguladıktan sonra Şu şekilde olacaktır
40123153525848415813.png
hayırlı Olsun ! Bu aşamayıda tamamladık.

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

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




amlatım devam edecektir güncel++

GÜNCEL
Ara
Cevapla PGM
Teşekkür verenler:
#2
Hmm güzel konuymuş + Sabit
Tüm Destek Forumun Kuralları
Görevli Kuralları
Ücretli Mybb Tema Tasarım ve Kodlama , Bootstrap(html/css) duyarlı kodlamalar Yapılır.
Prof. Dr. MyBB Öğretmeni kaRanLık-61( Mustafa SEVİM )[ 2010-2021 => 10TL'de 11 Sene ]

İki Tarafta Zifiri kaRanLık




Mutlu Son İstiyorsan Çabalamalısın. Sadece Oturduğu Yerden Başarıya ulaşan varlık tavuktur. Bir Kurt Asla Evcilleşip Köpek Olmaz...
Cevapla PGM
Teşekkür verenler:
#3
Teşekkürler +Rep.
“Mazlumun zalimden öcünü alacağı gün,
şüphesiz zalimin zulmettiği günden daha çetin olacaktır !"
Hz. Ali (r.a)

Kuş ölür, sen uçuşu hatırla...
Ara
Cevapla PGM
Teşekkür verenler:
#4
başarılı
Cevapla PGM
Teşekkür verenler:
#5
Admincp > Temalar &> Şablonlar > temanız > CSS burda şablonlardan neyi seççez
Cevapla PGM
Teşekkür verenler:
#6
Sağol Güzel Konu Tema Yapmayı Denicem :)
Ara
Cevapla PGM
Teşekkür verenler:
#7
Header şablonlar yok
Ara
Cevapla PGM
Teşekkür verenler:
#8
http://www.textspace.com/ dostum site ölmus
Ara
Cevapla PGM
Teşekkür verenler:
#9
teşekkürler yararlı konu tema yapımcılarının işine yarayabilir
Ara
Cevapla PGM
Teşekkür verenler:
#10
Gerçektende Çok İyi
Ara
Cevapla PGM
Teşekkür verenler:
#11
(29-01-2013 Saat: 19:39)TaaRRuz Nickli Kullanıcıdan Alıntı: Teşekkürler +Rep.
banlı üyelerin emeğini kaldırın, konuyu silin.emek hırsızlığına giriyor bu yapılan.
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi



Reklam yaziniz bostur. ayarlardan duzenleyiniz:raid -

Online Shopping App