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

limitlerikaldir

Profesyonel Üye
İYİNET Üyesi
Katılım
4 Şub 2011
Mesajlar
327
Beğeniler
1
Yaş
29
#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ış:
 

limitlerikaldir

Profesyonel Üye
İYİNET Üyesi
Katılım
4 Şub 2011
Mesajlar
327
Beğeniler
1
Yaş
29
#2
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...
 

KIVANCEFE

Üyeliği durduruldu
Katılım
18 Tem 2010
Mesajlar
1,505
Beğeniler
39
Konum
Gaziantep
#3
ç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
 

limitlerikaldir

Profesyonel Üye
İYİNET Üyesi
Katılım
4 Şub 2011
Mesajlar
327
Beğeniler
1
Yaş
29
#4
ç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
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ış:
 

kackarmedia

Pratik Üye
İYİNET Üyesi
Katılım
4 Mar 2011
Mesajlar
11
Beğeniler
0
Yaş
27
#5
ben bu olayı gene anlamadım yha yapamadım arkadaşlar yardımcı olursanız sevınrım
 

limitlerikaldir

Profesyonel Üye
İYİNET Üyesi
Katılım
4 Şub 2011
Mesajlar
327
Beğeniler
1
Yaş
29
#7
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.
 

Bu konuyu okuyanlar (Üyeler: 1, Misafirler: 0)

Üst