İyinet'e Hoşgeldiniz!

Türkiye'nin En Eski Webmaster Forum'una Hemen Kayıt Olun!

Kayıt Ol!

WHMCS Tema Tasarımı -Full Anlatım-

L

limitlerikaldir

0
İyinet Üyesi
Katılım
4 Şubat 2011
Mesajlar
327
Reaction score
1
Merhabalar iyinet.com webmaster ekibi,
Bir HTML temayı WHMCS sistemine çevirmeye 79 TL isteniyor.Bunun o kadar zor bir iş olmadığını ve profesyonellikle gerçek bir tema olmasıyla alakası olmadığını söylüyorum.Mantık şu şekilde ; HTML temanızı header ,footer ve içerik olarak 3'e ayırmanız gerekiyor.

Header olarak ayırdığınız kısım : header.tpl
Footer olarak ayırdığınız kısım : footer.tpl
İçerik olarak ayırdığınız kısım : homepage.tpl

Müşteri Paneli kişiselleştirmek için ;
{if $loggedin}
Üye giriş yapmıştır.Menünüze uygulayınız.
{else}
Üye giriş yapmamıştır.Varsayılan menü uygulayınız.
{/if}

Örnek bir html dosyası ve bu dosyanın "header,footer"olarak bölünmüş hali.Dikkatle inceleyiniz.
Resimler ve csslerin uzantıları değişik olacak.CSS'ler ve resimler şu şekilde olmayacak ;
Yanlış olanı : /dosyadi/resimler/cssler/cssadi.css
Doğru olanı : /templates/{$templates}/cssadi.css
Resimlerinizide aynı şekilde yapacaksınız.Yoksa boş sayfa çıkar ve tema çalışmaz.Eğer varolan bir whmcs temasını başka bir siteden alıp whmcsye çevirecekseniz bunları uygulamanıza gerek yok.


İŞİNİZE YARAYACAK KOD PARÇALARI
{$companyname} - Şirket İsmi
{$pagetitle} - Sayfa Başlığı
{$template} - Temanın ismi
{$systemurl} - WHMCS sistemin URL'si
{$loggedin} - Üye giriş yapmış
{$clientsdetails.id} - Kullanıcı Bilgisi
{$clientsdetails.firstname}
{$clientsdetails.lastname}



örnek tema dosyası (html)
PHP: 
<head> 
<link rel="shortcut icon" href="favicon.ico"> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title> NET BILISIM deneme deneme</title> 
<base  /> 
<link rel="stylesheet" type="text/css" href="templates/emrewebs-tema-no1/style.css" /> 
 
 
 
 
<script type="text/javascript" src="templates/emrewebs-tema-no1/js/jquery-1.3.2.min.js"></script> 
 
<script src="templates/emrewebs-tema-no1/js/cufon-yui.js" type="text/javascript"></script> 
 
<script src="templates/emrewebs-tema-no1/js/MyriadPro-Regular_0_400.font.js" type="text/javascript"></script> 
<script src="templates/emrewebs-tema-no1/js/MyriadPro-BoldIt_italic_700.font.js" type="text/javascript"></script> 
<script src="templates/emrewebs-tema-no1/js/BebasNeue_400.font.js" type="text/javascript"></script> 
<script src="templates/emrewebs-tema-no1/js/YanoneKaffeesatz-Regular_400.font.js" type="text/javascript"></script> 
<script src="templates/emrewebs-tema-no1/js/Aller_Bd_700.font.js" type="text/javascript"></script> 
<script src="templates/emrewebs-tema-no1/js/MyriadPro_400.font.js" type="text/javascript"></script> 
 
<script type="text/javascript"> 
Cufon.replace('.MyriadPro-Regular_0', { fontFamily: 'MyriadPro-Regular_0', hover: 'True' });
Cufon.replace('.MyriadPro-BoldIt', { fontFamily: 'MyriadPro-BoldIt', hover: 'True' });
Cufon.replace('.BebasNeue', { fontFamily: 'BebasNeue', hover: 'True' });
Cufon.replace('.YanoneKaffeesatz-Regular', { fontFamily: 'YanoneKaffeesatz-Regular', hover: 'True' });
Cufon.replace('.Aller_Bd', { fontFamily: 'Aller_Bd', hover: 'True' });
Cufon.replace('.MyriadPro', { fontFamily: 'MyriadPro', hover: 'True' }); 
</script> 
 
<script type="text/javascript" src="templates/emrewebs-tema-no1/js/jcarousellite_1.0.1.js"></script> 
        
<script type="text/javascript"> 
$(function() {
    $(".scroll").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
	    visible: 1
    });
});
</script> 
 
<script type="text/javascript" src="templates/emrewebs-tema-no1/js/chrome.js"></script> 
 
 
	<script type="text/javascript" src="templates/emrewebs-tema-no1/js/jquery.featureList-1.0.0.js"></script> 
 
<script language="javascript"> 
$(document).ready(function() {
$.featureList(
$("#tabs li a"),
$("#output li a"), {
transition_interval : 0,
start_item	:	0
} );
});
</script> 
 
 
</head> 
 
<body><div class="entepe"><ul> 
<li><a href="hakkimizda.html">Hakkımızda</a></li> 
<li><a href="firma.html">Firma Bilgileri</a></li> 
<li><a href="banka.html">Ödeme Yolları</a></li> 
<li><a href="knowledgebase.php">Sık Sorulan Sorular</a></li> 
<li><a href="contact.php">İletişim ve Ulaşım Bilgisi</a></li> 
<li><a href="register.php">Yeni Müşteri Kaydı</a></li> 
</ul><a class="sepetiniz" href="cart14c8.html?a=view"></a><a class="musterialani" href="clientarea.php"></a></div> 
##içerik bölümü
denemedeneme
##footer
FOOTER BÖLÜMÜ

Şimdide header.tpl , footer.tpl , homepage.tpl olarak bölünmüş halini aşağıda görebilirsiniz.

header.tpl ;
PHP: 
head> 
<link rel="shortcut icon" href="favicon.ico"> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title> {$companyname} </title> 
<base  /> 
<link rel="stylesheet" type="text/css" href="templates/emrewebs-tema-no1/style.css" /> 
 
 
 
 
<script type="text/javascript" src="templates/emrewebs-tema-no1/js/jquery-1.3.2.min.js"></script> 
 
<script src="templates/emrewebs-tema-no1/js/cufon-yui.js" type="text/javascript"></script> 
 
<script src="templates/emrewebs-tema-no1/js/MyriadPro-Regular_0_400.font.js" type="text/javascript"></script> 
<script src="templates/emrewebs-tema-no1/js/MyriadPro-BoldIt_italic_700.font.js" type="text/javascript"></script> 
<script src="templates/emrewebs-tema-no1/js/BebasNeue_400.font.js" type="text/javascript"></script> 
<script src="templates/emrewebs-tema-no1/js/YanoneKaffeesatz-Regular_400.font.js" type="text/javascript"></script> 
<script src="templates/emrewebs-tema-no1/js/Aller_Bd_700.font.js" type="text/javascript"></script> 
<script src="templates/emrewebs-tema-no1/js/MyriadPro_400.font.js" type="text/javascript"></script> 
 
<script type="text/javascript"> 
Cufon.replace('.MyriadPro-Regular_0', { fontFamily: 'MyriadPro-Regular_0', hover: 'True' });
Cufon.replace('.MyriadPro-BoldIt', { fontFamily: 'MyriadPro-BoldIt', hover: 'True' });
Cufon.replace('.BebasNeue', { fontFamily: 'BebasNeue', hover: 'True' });
Cufon.replace('.YanoneKaffeesatz-Regular', { fontFamily: 'YanoneKaffeesatz-Regular', hover: 'True' });
Cufon.replace('.Aller_Bd', { fontFamily: 'Aller_Bd', hover: 'True' });
Cufon.replace('.MyriadPro', { fontFamily: 'MyriadPro', hover: 'True' }); 
</script> 
 
<script type="text/javascript" src="templates/emrewebs-tema-no1/js/jcarousellite_1.0.1.js"></script> 
        
<script type="text/javascript"> 
$(function() {
    $(".scroll").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
	    visible: 1
    });
});
</script> 
 
<script type="text/javascript" src="templates/emrewebs-tema-no1/js/chrome.js"></script> 
 
 
	<script type="text/javascript" src="templates/emrewebs-tema-no1/js/jquery.featureList-1.0.0.js"></script> 
 
<script language="javascript"> 
$(document).ready(function() {
$.featureList(
$("#tabs li a"),
$("#output li a"), {
transition_interval : 0,
start_item	:	0
} );
});
</script> 
 
 
</head> 
 
<body><div class="entepe"><ul> 
<li><a href="hakkimizda.html">Hakkımızda</a></li> [COLOR="Lime"]#Menü bölümlerinizi yukarıdaki gibi kendinize göre düzenleyiniz.[/COLOR]
<li><a href="firma.html">Firma Bilgileri</a></li> 
<li><a href="banka.html">Ödeme Yolları</a></li> 
<li><a href="knowledgebase.php">Sık Sorulan Sorular</a></li> 
<li><a href="contact.php">İletişim ve Ulaşım Bilgisi</a></li> 
<li><a href="register.php">Yeni Müşteri Kaydı</a></li> 
</ul><a class="sepetiniz" href="cart14c8.html?a=view"></a><a class="musterialani" href="clientarea.php"></a></div>

homepage.tpl bölümü ;
PHP: 
##içerik bölümü
denemedeneme

footer.tpl bölümü
PHP: 
##footer
FOOTER BÖLÜMÜ
[/PHP]

Bu şekilde parçalayacaksınız.İlgili değerleri yukarıda belirttim html temanızı yukarıdaki "İşe yarar kod parçalarını" kullanarak düzenleyeniz düzenledikten sonra header.tpl , footer.tpl , homepage.tpl olarak ayırınız ve bu 3 dosyayı /templates/portal içine atınız.Temanız hazırdır.Teması olmayan host şirketi kalmayacak kimse 79 tl verip kazık yemeyecek. :alkış:
 
L

limitlerikaldir

0
İyinet Üyesi
Katılım
4 Şubat 2011
Mesajlar
327
Reaction score
1
Bu iş bu kadardır arkadaşlar dikkatle bakarsanız anlamayacağınız birşey yok.Yeterki sonuna kadar okuyun inceleyin.Bunu 3-4 kere denediğinizde bu işin ustası olursunuz.İsteyenler Team Viever üzerinden ücretsiz seminer verilecektir.10 kişi üzerine...
 
K

KIVANCEFE

0
Yasakli Uye
Katılım
18 Temmuz 2010
Mesajlar
1,505
Reaction score
39
Konum
Gaziantep
çok güzel paylaşım bu olayı gerçekten çok büyük hale getirmenin bir anlamı yok html bilginiz varsa tpl sizi korkutmasın derim paylaşımın içinde teşekkürler emeğine sağlık yararlı olacaktır bence
 
L

limitlerikaldir

0
İyinet Üyesi
Katılım
4 Şubat 2011
Mesajlar
327
Reaction score
1
KIVANCEFE' Alıntı:
çok güzel paylaşım bu olayı gerçekten çok büyük hale getirmenin bir anlamı yok html bilginiz varsa tpl sizi korkutmasın derim paylaşımın içinde teşekkürler emeğine sağlık yararlı olacaktır bence
Genişletmek için tıkla ...

Sağolasın webmaster kardeşim.Bunu büyütmenin anlamı yok.HTML dosyasını WHMCS yazılımının tpl formatına çevirmek istiyorsanız ücret ödemenize asla gerek yok.:alkış:
 
K

kackarmedia

0
İyinet Üyesi
Katılım
4 Mart 2011
Mesajlar
11
Reaction score
0
ben bu olayı gene anlamadım yha yapamadım arkadaşlar yardımcı olursanız sevınrım
 
L

limitlerikaldir

0
İyinet Üyesi
Katılım
4 Şubat 2011
Mesajlar
327
Reaction score
1
En basit yolu şudur ;
En orta kısma içerik geleceğini biliyorsunuz.En orta kısma "XYZXYZ" diye bir yazı yazın.Daha sonra XYZXYZ nin üstündekileri kopyalayın "header.tpl" ye kaydedin.XYZXYZ nin altındakileri kopyalayın "footer.tpl" olarak kaydedin.homepage.tpl ye isterseniz XYZXYZ diye kaydedebilirsiniz.Bu dosyaları portal temasının içine atınca basit temanız hazır olacaktır.Basit olarak yapımı budur.
 
Cevap yazmak için giriş yap yada kayıt ol.

Türkiye’nin ilk webmaster forum sitesi iyinet.com'da forum üyeleri tarafından yapılan tüm paylaşımlardan; Türk Ceza Kanunu’nun 20. Maddesinin, 5651 Sayılı Kanununun 4. maddesinin 2. fıkrasına göre, paylaşım yapan üyeler sorumludur.

Backlink ve Tanıtım Yazısı için iletişime geçmek için Skype Adresimiz: .cid.1580508955483fe5

Üst