Smf Teması Yapmak

T-GeNeRaLs · 20 Şub 2008

Evet hassas ve uzmanı oldugum bi konu...Size kabataslak biraz bilgi vermek istiyorum..

Bir SMF Temasındaki renk düzenini değiştirmek ve tablolara yada arka plana veya herhangi bir yere resim dosyası kondurmak temanın style.css dosyasının editlenmesi ile mümkündür...Örnek olarak arka plana resim koyma ve link renkleri ve stilleri hakkında bir kod sunayım..

Kodun yalın hali bu olabilir:

Kod:

* The main body of the entire forum. */
body
{
	background-color: #ffffff;
		background-repeat: repeat-x;
	margin: 5px;
	padding: 10px
}

Bu kodu şu şekilde editlerseniz foruma arka plan koymuş olursunuz:

Kod:

/* The main body of the entire forum. */
body
{
background-color: #ffffff;
[COLOR=#ff0000]background-image: url(images/arkaplan.jpg);[/COLOR]
background-repeat: repeat+x;
margin: 5px;
padding: 10px
}

Arka plan için bir images linklendirdikten sonraki alt satırda bulunan reat+x'deki + simgesi arka planın tum sayfaya yayılmasını saglar.. - olarak kullanırsanız sadece arkaplanın boyutları kadar indexinizde gorunur...

Örneğin birde genel board linklerine renk verelim..Yalın hali bu diyelim:

Kod:

/* Normal, standard links. */
a:link
{
	color: #ff0000;
	text-decoration: none;
}
a:visited
{
	color: #ff0000;
	text-decoration: none;
}
a:hover
{
	text-decoration: underline;
}

Aslında kodlama bilmek demek birazda ingilizce demektir..Mesela a:link yazna yerın altındakı editler normal link görünümü..
a:visited yazan yerin altındakiler ziyaret edilmiş linklerin renginin veya eklersenız buyuklugunun,yazı tipinin,yazı karakterının editlendıgı yerdır..

style.css dosyası temanın özünü olusturur...Tüm renk duzenlerı,yazı tipleri,boyutları ve temanın bir yerlerıne tablolarına falan resım eklemek için bu dosyayı editleriz...

Şimdide temanın index.template.php dosyasını biraz editleyelım..Bununla ne gibi editler yapabiliriz?
Forum sayfamızın genel görüntüsünü oluşturur...Ana sayfa butonları,erhangi bir yere link veya tenaların altında gördüğünüz copyriht editi bu dosyadan yapılır..Tekrar sölüyorum editlemek için deli gibi kod bilmek gerekmez..Biraz mantık ve ingilizce yeterlidir..

Örneğin forumumuzun alt kısmana bir flash chat paneli kondurmak istiyoruz....index.template.php'de şöle bir edit yapıyoruz:

Şu kodların altına (genelde her smf temasında standarttır benım kullandıgım temaya göre anlatıyorum) :

Kod:

	</td>
				<td valign="middle" align="center" style="white-space: nowrap;">
					', theme_copyright(), '<br><font color="white">Design by ShaLgam </font><a href="http://www.izmirtasarim.org">İzmir Tasarım © 2007</a>
				</td>

Şu şekilde chat kodlarımızı ekliyoruz:

Kod:

<br>
<center><embed src=http://www.xatech.com/web_gear/chat/chat.swf quality=high bgcolor=#000000 width=900 height=300 name=chat FlashVars="id=7134591" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.xatech.com/update_flash.shtml" /><br><small><a target="_BLANK" href="http://www.xatech.com/web_gear/?cb">Get your own Chat Box!</a> <a target="_BLANK" href="http://www.xatech.com/web_gear/chat/go_large.php?id=7134591">Go Large!</a></small><br></center>
<br>

Yani kısaca demek istediğim temanın genel görünümünün şablonunu bu index.template.php dosyasından ayarlıyoruz..

Şimdide boardindex.template.php dosyalarının ne işe yaradığını nereleri editlediğini inceleyelim..Bu dosya kategori tablololarının düzenlerini ayarlar...Mesela yeni mesajlar gönderen mesaj konu son mesaj tabloları...tablo yanına yenı tablo olusturmak gibi..Mesela bölümün moderatör tablosu gibi...
Mesela şimdi tablodaki en son mesajları gösteren kutucuga ufak bir resim koyalım..Genelde ok işareti koyarız..En son mesaja git manasına..

Şu kodların altına (tekrar sölüyorum standart olmayabilir):

Kod:

  	/* The board's and children's 'last_post's have:
				time, timestamp (a number that represents the time.), id (of the post), topic (topic id.),
				link, href, subject, start (where they should go for the first unread post.),
				and member. (which has id, name, link, href, username in it.) */
				if (!empty($board['last_post']['id']))
					echo '
						<img align="left" src="', $settings['images_url'], '/post/xx.gif"/>
												<font style="font-size:8pt">', $txt['smf88'], ' <b>', $board['last_post']['link'], '</b></font><br />
												 <div align="right">', $txt[525], ' ', $board['last_post']['member']['link'] , '											
												', $txt[30], ' ', $board['last_post']['time'], '<a href="', $board['last_post']['href'], '">

Şu kodu koyarız:

Kod:

<img alt"Son Yazılan Mesaja Git"  src="', $settings['images_url'], '/lastpost.gif"  border="0" /></a></div>';

Kategori ve tablolarımızın bilgimiz ve isteğimiz dahilinde işte bu boardindex.template.php dosyasından editliyoruz

Messageindex.template.php dosyasına gelelim..Forumumuzda herhangi bir kategoriye girdik..Topiclerin yanı konuların sıralandıgı liste sayfası bu dosyayla ilişkindir..Mesela sabit konu normak konu diye güzel bir ayrım tablosu yapalım..Dosyadaki // No topics.... just say, "sorry bub". adlı kod tablosu başlığının başyaşından bitimine kadar yani // Do we want to seperate the sticky and lock status out? 'a kadar olan kısım şu şekilde editlenmelidir:

Kod:

	// No topics.... just say, "sorry bub".
		else
			echo '
						<td class="catbg3" width="100%" colspan="7"><b>', $txt[151], '</b></td>';

		echo '
					</tr>';

		if (!empty($settings['display_who_viewing']))
		{
			echo '
					<tr class="windowbg2">
						<td colspan="' , !empty($options['display_quick_mod']) ? '8' : '7' , '"><small>';
			if ($settings['display_who_viewing'] == 1)
				echo count($context['view_members']), ' ', count($context['view_members']) == 1 ? $txt['who_member'] : $txt[19];
			else
				echo empty($context['view_members_list']) ? '0 ' . $txt[19] : implode(', ', $context['view_members_list']) . ((empty($context['view_num_hidden']) or $context['can_moderate_forum']) ? '' : ' (+ ' . $context['view_num_hidden'] . ' ' . $txt['hidden'] . ')');
			echo $txt['who_and'], $context['view_num_guests'], ' ', $context['view_num_guests'] == 1 ? $txt['guest'] : $txt['guests'], $txt['who_viewing_board'], '
						</small></td>
					</tr>';
		}

		$stickybar = false;
$normalbar = false;

foreach($context['topics'] as $topic)
{
if($topic['is_sticky'] && !$stickybar)
{
echo'<tr class="titlebg"><td colspan="', empty($options['display_quick_mod']) ? '7' : '8', '"><b> [COLOR=#ff0000]Sabit Konular[/COLOR]</b></td></tr>';
$stickybar = true;
}
else if(!$topic['is_sticky'] && $stickybar && !$normalbar)
{
echo'<tr class="titlebg"><td colspan="', empty($options['display_quick_mod']) ? '7' : '8', '"><b> [COLOR=#ff0000]Normal Konular[/COLOR]</b></td></tr>';
$normalbar = true;
}

Şimdide display.template.php dosyasının temada nereyle ilişkin olduğuna deyinelim..Bu dosya mesajları okuduğumuz alanla ilgilidir.Yani şu an siz benim bu anlatımımı okuyorsunuz ya işte bu alan

Burda örneğin şunu yapabiliriz..Profil görünümünü değiştirebiliriz..Default cok basit geliyor ben her zaman editlerim bu dosyada bu profil görünümü olayını..vBullletin tarzı profil görünümü koyalım:

Şu iki kodun arasındaki herseyi sileriz:

Kod:

 	// Show information about the poster of this message.

Kod:

 	// Show the profile, website, email address, and personal message buttons.

araya şu kodları koyarız:

Kod:

echo '
				<table width="100%" cellpadding="5" cellspacing="0" style="table-layout: fixed;">
					<tr>
						<td valign="top" align="center" width="22%" rowspan="2" style="overflow: hidden;"  class="', $message['alternate'] == 0 ? 'windowbg9' : 'windowbg8', '"><fieldset>
						<legend><b>Üye Bilgileri</b></legend>
							<b>', $message['member']['link'], '</b>
							<div class="smalltext">';
							
							// Show the member's custom title, if they have one.
		if (isset($message['member']['title']) && $message['member']['title'] != '')
			echo '
								', $message['member']['title'], '<br />';

		// Show the member's primary group (like 'Administrator') if they have one.
		if (isset($message['member']['group']) && $message['member']['group'] != '')
			echo '
								', $message['member']['group'], '<br />';
								
								// Don't show these things for guests.
		if (!$message['member']['is_guest'])
		{
			// Show the post group if and only if they have no other group or the option is on, and they are in a post group.
			if ((empty($settings['hide_post_group']) || $message['member']['group'] == '') && $message['member']['post_group'] != '')
				echo '
								', $message['member']['post_group'], '<br />';
			echo '
								', $message['member']['group_stars'], '<br />';
								
							// Show avatars, images, etc.?
			if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']))
				echo '
								<div style="overflow: auto; width: 100%;">', $message['member']['avatar']['image'], '</div><br />';

			
			// Show the member's gender icon? if (!empty($settings['show_gender']) && $message['member']['gender']['image'] != '')
				echo '<fieldset>
<legend><b>Nüfus</b></legend>
								', $txt[231], ': ', $message['member']['gender']['image'], '<br /></fieldset>';
// Show the member's ********
echo '<fieldset>
<legend><b>Konum</b></legend>
Nerden: ', $message['member']['********'], '<br /></fieldset>';

			// date + time registered
echo '<fieldset>
<legend><b>Giriş</b></legend>
Kayit tarihi ', $message['member']['registered'], '<br /></fieldset>
'; 
			// Show how many posts they have made.
			echo '<fieldset>
			<legend><b>Toplam İleti</b></legend>
								', $txt[26], ': ', $message['member']['posts'], '
								<br /></fieldset>';

			// Show their personal text?
			if (!empty($settings['show_blurb']) && $message['member']['blurb'] != '')
				echo '<fieldset>
								', $message['member']['blurb'], '<br />
								<br /></fieldset>';
								
								// Is karma display enabled?  Total or +/-?
			if ($modSettings['karmaMode'] == '1')
				echo '<fieldset>
				<legend><b>Rap Gücü</b></legend>
								', $modSettings['karmaLabel'], ' ', $message['member']['karma']['good'] - $message['member']['karma']['bad'], '<br /></fieldset>';
			elseif ($modSettings['karmaMode'] == '2')
				echo '
								<br />
								', $modSettings['karmaLabel'], ' +', $message['member']['karma']['good'], '/-', $message['member']['karma']['bad'], '<br />';

			// Is this user allowed to modify this member's karma?
			if ($message['member']['karma']['allow'])
				echo '<fieldset>
								<a href="', $scripturl, '?action=modifykarma;sa=applaud;uid=', $message['member']['id'], ';topic=', $context['current_topic'], '.' . $context['start'], ';m=', $message['id'], ';sesc=', $context['session_id'], '">', $modSettings['karmaApplaudLabel'], '</a>
								<a href="', $scripturl, '?action=modifykarma;sa=smite;uid=', $message['member']['id'], ';topic=', $context['current_topic'], '.', $context['start'], ';m=', $message['id'], ';sesc=', $context['session_id'], '">', $modSettings['karmaSmiteLabel'], '</a><br /></fieldset>';

			// This shows the popular messaging icons.
			echo '<fieldset>
			<legend><b>İrtibat</b></legend>
								', $message['member']['icq']['link'], '
								', $message['member']['msn']['link'], '
								', $message['member']['aim']['link'], '
								', $message['member']['yim']['link'], '<br />';

T-GeNeRaLs · 20 Şub 2008

Kısaca anlatmak istediğim şu ki arkadaşlar; Bu saydığımız dosyaları editlersek temamıza istediğimiz şekli veririz..Bir tema yapmanın temel unsuru bu dosyaları editlemek..Verdiğim tüm kodlar bir önfikir edinmeniz için birer örnekti ve dosyaların ne işe yaradıgını nereleri editledıgını anlayabilmenızı saglamaktı..
Hep belirttiğim gibi biraz ingilizce,biraz mantık ve tasarım hakkında hayal gücü..En önemlisi de bol bol zaman harcamak,deneme yanılma yoluna başvurmak ve kod bilginizi,hangi karakterın kodlamaya ne özellikler kattığını öğrenmektir..

Diğer tema dosyalarının editide hemen hemen aynı yollardadır..Bİz sadece tema dosyalarını ve temel şekillendirmeyi sunduk..Yani tüm görünüm öğelerini bu dosyalarla düzenliyorsunuz..

Temamız için logo yapmak gif resimlerini değiştirmek için şu yola basvurmalıyız:

Temada değiştirmek istediğin herhangi bir resim veya icona sitedeyken sağ tıklıyoruz..Özellikleri seçiyoruz..Resmin temadaki yolunu belirtir..Mesela forum sayfamızdaki yeni mesaj yok resimciği.. Bendeki yolu şu:

http://www.izmirtasarim.org/forums/Themes/.../images/off.gif

Ftp'den alanımıza bağlanarak bu yolu takip ediyor ''off.gif'' dosyamızı aynı isim ve formatta olmak kaydıyla baska bir resımle değişiyoruz...

Comiser-ex tarafından yapılmıstır.

Smf Teması Yapmak

T-GeNeRaLs

Kadim Üye

T-GeNeRaLs

Kadim Üye

Sosyal medya sayfalarımız