Evet arkadaşlar şimdi sizlere elimden geldiğince SMF temalara css menü uyarlamayı anlatacağım. Her temada farklılık gösterebilir kodlar vs, o yüzden default tema üzerinden anlatacağım. Mantığı anladınız mı zaten istediğiniz temada uygularsınız.

Buraya tıklayarak önce kendimize bir menü seçelim. Kaynak olarak ben dynamicdrive verdim.

Ben DD Color Tabs II isimli menüyü seçtim, onun üzerinden anlatımı yapacağım.

Önce style.css dosyasını açıyoruz ve en son satıra sitede verilen css kodlarını ekliyoruz;

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#invertedtabs{
margin-left: 4px;
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 5px;
}

#invertedtabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin:0;
margin-bottom: 1em; /*margin between menu and rest of content*/
padding:0;
list-style:none;
}

#invertedtabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
line-height: 1.5em;
}


#invertedtabs a{
float:left;
color: white;
background: #8b0000 url(media/color_tabs_left2.gif) no-repeat left bottom;
margin:0 2px 0 0;
padding:0 0 0 3px;
text-decoration:none;
letter-spacing: 1px;
}

#invertedtabs a span{
float:left;
display:block;
background: transparent url(media/color_tabs_right2.gif) no-repeat right bottom;
padding:3px 9px 3px 6px;
}

#invertedtabs a span{
float:none;
}


#invertedtabs a:hover{
background-color: #d50509;
}

#invertedtabs a:hover span{
background-color: #d50509;
}

#invertedtabs #current a, #invertedtabs #current span{ /*currently selected tab*/
background-color: #d50509;
}

#invertedtabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #8b0000;
border-bottom: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}

</style>

Demo'nun altında verilen resimleri isimlerini değiştirmeden kaydediyoruz temanın images klasörüne atıyoruz.

Şimdi style.css dosyasına eklediğimiz kodlardan resim yollarını bulup değiştiriyoruz;

media/color_tabs_right2.gif => images/color_tabs_right2.gif

gibi...

Şimdi HTML kodlarını inceleyelim;

<div id="invertedtabsline">&nbsp;</div>

<div id="invertedtabs">
<ul>
<li style="margin-left: 1px"><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New"><span>New</span></a></li>
<li id="current"><a href="http://www.dynamicdrive.com/revised.htm" title="Revised"><span>Revised</span></a></li>
<li><a href="http://tools.dynamicdrive.com" title="Tools"><span>Tools</span></a></li>	
<li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums"><span>Forums</span></a></li>	
</ul>
</div>

<br style="clear: left" />

Kodlarda da göründüğü gibi her menü öğesi için <li><a href="LİNK"><span>TEXT</span></li> kodları yazılmış.

Bundan sonra yapabileceğimiz iki şey var; SMF için olan tüm menü öğelerini tek tek yazmak ve ziyaretçi / üye görünümlerini ayarlamak veya en kolay ve benim de anlatacağım yol olan; menü kaynak kodlarını editlemek.

template_menu(); temalarda menüyü çağırmak için kullanılır. Kaynak kodlarının bulunduğu fonksiyonun adı ise function template_menu(). index.template.php dosyasının 487. satırından itibaren başlıyor bu kaynak kodları.

Öncelikle menüyü şekillendiren tablo kodlarını silelim, çünkü bizim kendi tablo kodlarımız olacak.

	// Show the start of the tab section.
	echo '
			<table cellpadding="0" cellspacing="0" border="0" style="margin-left: 10px;">
				<tr>
					<td class="maintab_' , $first , '">&nbsp;</td>';

	// The end of tab section.
	echo '
				<td class="maintab_' , $last , '">&nbsp;</td>
			</tr>
		</table>';

Yukarıdaki kodları siliyoruz.

Şimdi sıra geldi menü öğelerini düzenlemeye;

	// How about the [search] button?
	if ($context['allow_search'])
		echo ($current_action == 'search' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
				<td valign="top" class="maintab_' , $current_action == 'search' ? 'active_back' : 'back' , '">
					<a href="', $scripturl, '?action=search">' , $txt[182] , '</a>
				</td>' , $current_action == 'search' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

Örnek olarak arama butonunu seçtim ben.

Şu şekilde değiştiriyoruz;

	// How about the [search] button?
	if ($context['allow_search'])
		echo '
				<li><a href="', $scripturl, '?action=search"><span>' , $txt[182] , '</span></a></li>';

Yazımın başında belirtmiş olduğum menü öğeleri için kullanacağımız kodları uyguladım yani. Diğer menü öğelerini de aynı şekilde düzenliyoruz.

Şimdi sıra temaya yerleştirmeye;

	// Show the menu here, according to the menu sub template.
	template_menu();

index.template.php dosyasında menü bu kod ile çağırılıyor. Biz şimdi kendi html kodlarımıza göre düzenleyeceğiz.

Yani;

	// Show the menu here, according to the menu sub template.
echo '
<div id="invertedtabsline">&nbsp;</div>

<div id="invertedtabs">
<ul>
	', template_menu(), '
</ul>
</div>';

Şeklinde değiştireceğiz.

İşlem bu kadar, umarım anlatabilmişimdir.