22 Mar 2022 14:48 Yeni Konu Oluştur

Haberler:

Sitemiz Smf 2.1 ve Smf 2.0 sürümleri için Destek ve Tema paylaşım forumudur


İletileri Göster

Bu özellik size üyenin attığı tüm iletileri gösterme olanağı sağlayacaktır. Not sadece size izin verilen bölümlerdeki iletilerini görebilirsiniz.

Mesajlar - snrj

3076
SSI.php de öcelikle bunu bul
function ssi_boardNews($board = null, $limit = null, $start = null, $length = null, $output_method = 'echo')
{

Ardından bu fonksiyon içerisindeki şu kodu bul

        // Check that this message icon is there...
         if (empty($modSettings['messageIconChecks_disable']) && !isset($icon_sources[$row['icon']]))
             $icon_sources[$row['icon']] = file_exists($settings['theme_dir'] . '/images/post/' . $row['icon'] . '.gif') ? 'images_url' : 'default_images_url';


Altına Ekle
            // $row['body'] içerisinde <img> kodu ara
   $secimyap = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $row['body'], $sonuc);
   // src="" içindekini al.
if(!empty($matches[0]) && !empty($matches[1]))
   $ilkresim = $sonuc [1] [0];

  else{ // Resim bulunmazsa default resim ekle
     $ilkresim = "http://www.site.com/images/default.jpg";
   }


Bul
'subject' => $row['subject'],
Altına Ekle
'resim' => $ilkresim,

Ve işlememiz tamamlandı. Artık bu resmi haber kısmında kullanacağız. Örneğin eğer SSI.php deki boardnews fonksiyonu değiştirmeden kullanıyorsunuz; aynı fonksiyon içerisindeki şu kısmı bulun

    foreach ($return as $news)
     {
         echo '
             <div>
                 <a href="', $news['href'], '">', $news['icon'], '</a> <b>', $news['subject'], '</b>
                 <div class="smaller">', $news['time'], ' ', $txt['by'], ' ', $news['poster']['link'], '</div>

                 <div class="post" style="padding: 2ex 0;">', $news['body'], '</div>

                 ', $news['link'], $news['locked'] ? '' : ' | ' . $news['comment_link'], '
             </div>';

         if (!$news['is_last'])
             echo '
             <hr style="margin: 2ex 0;" width="100%" />';
     }


Şöyle değiştirin,
foreach ($return as $news)
     {
         echo '
             <div>
                 <a href="', $news['href'], '">', $news['icon'], '</a> <b>', $news['subject'], '</b>
                 <div class="smaller">', $news['time'], ' ', $txt['by'], ' ', $news['poster']['link'], '</div>

                 <div class="post" style="padding: 2ex 0;"><div class="resim_cercevesi">
                 
                 <img src="', $news['image'], '" alt="', $news['subject'], '" class="haber_resmi" /></div>
                 
                 ', $news['body'], '</div>

                 ', $news['link'], $news['locked'] ? '' : ' | ' . $news['comment_link'], '
             </div>';

         if (!$news['is_last'])
             echo '
             <hr style="margin: 2ex 0;" width="100%" />';
     }


Tabiki resim yazılarla bitişk gibi görünecek. Bundan kurtulmak için resme stil vermemiz gerekiyor. Yukarıdaki kodda zaten resme bir class atamıştım.
Şimdiyse bu fonksiyonu kullandığınız alanın kullandığı css dosyasına şunları ekleyin;


.resim_cercevesi
{
float:left;
background:#ddd;
border:1px solid #ccc;}

.haber_resmi{
width:150px;
height:150px;
padding:5px;
margin:3px;
}


Tamam herşey harika. Ama haber metninde resim iki kere çıkıyor. Küçük halini sol tarafa yerleştirdik ama haber metni kısmında kocaman bir resim daha var?

Bunu ben şu şekilde çözüyorum; phpnin standar strip_tags fonksiyonunu veya kendi oluşturduğum bir betikle haber metninden tüm html kodlarını temizliyorum. Böylelikle, hem haber daha düzgün görünüyor hemde resim sadece bir kere görünüyor.

Basitçe; SSI.php'nin en alt kısmına ekleyin;
function temizle($haber) {
     $strs=explode('<',$haber);
     $res=$strs[0];
     for($i=1;$i<count($strs);$i++)
     {
         if(!strpos($strs[$i],'>'))
             $res = $res.'&lt;'.$strs[$i];
         else
             $res = $res.'<'.$strs[$i];
     }
     return strip_tags($res);   
}


Şimdiyse daha önce düzenlediğimiz alana geri dönün ve
  ', $news['body'], '</div> kodunu bulun.

Şu şekilde değiştirin
  ', temizle($news['body']), '</div>

kaynak http://www.simplemachines.org/community/index.php?topic=336895.0
3077
Konu / Konuyu Okumuş Olanları görme
18 Mayıs 2014 15:41

/Sources/Display.php
bul
// What are you gonna display if these are empty?!
if (empty($topic))
fatal_lang_error('no_board', false);
değiştir
// What are you gonna display if these are empty?!
if (empty($topic))
fatal_lang_error('no_board', false);
 if(!empty($_REQUEST['sa']) && $_REQUEST['sa'] == 'log') {
        DisplayLog();
    }
bul
?>değiştir
function DisplayLog()
{
    global $context, $scripturl, $topic, $smcFunc;

    $request = $smcFunc['db_query']('', "
        SELECT
        lt.ID_MEMBER, lt.id_topic, mem.real_name
        FROM {db_prefix}log_topics AS lt
        LEFT JOIN {db_prefix}members AS mem ON (mem.id_member = lt.id_member)
        WHERE id_topic = {int:topic}",
        array(
               'topic' => $topic,
        )
    );
    while ($row = $smcFunc['db_fetch_assoc']($request))
    {
        // Build the array.
        $context['logs'][] = array(
            'member' => array(
                'id' => $row['id_member'],
                'name' => $row['real_name'],
                'link' => '<a href="' . $scripturl . '?action=profile;u=' . $row['id_member'] . '">' . $row['real_name'] . '</a>',
                'href' => $scripturl . '?action=profile;u=' . $row['id_member'],
            ),
        );
    }
    $smcFunc['db_free_result']($request);

    $context['sub_template'] = 'displaylog';
}

?>



/Themes/default/Display.template.php
bul
?>değiştir
function template_displaylog()
{
    global $context, $settings, $options, $txt, $scripturl, $modSettings;

    echo '
    <table border="0" cellpadding="0" cellspacing="0" style="padding-top: 1ex;" align="center">
        <tr class="titlebg">
            <td>Konuyu Kimler Okumuş</td>
        </tr>';

    foreach($context['logs'] as $log) {
        echo '
        <tr class="windowbg">
            <td>', $log['member']['link'], '</td>
        </tr>';
    }
    echo '
    </table>';
}

?>

bul
<h3 class="catbg">
<img src="', $settings['images_url'], '/topic/', $context['class'], '.gif" align="bottom" alt="" />
<span id="author">', $txt['author'], '</span>
', $txt['topic'], ': ', $context['subject'], ' &nbsp;(', $txt['read'], ' ', $context['num_views'], ' ', $txt['times'], ')
</h3>
değiştir
<h3 class="catbg">
<img src="', $settings['images_url'], '/topic/', $context['class'], '.gif" align="bottom" alt="" />
<span id="author">', $txt['author'], '</span>
', $txt['topic'], ': ', $context['subject'], ' &nbsp;(', $txt['read'], ' ', $context['num_views'], ' ', $txt['times'], ')<a style="float: right;" href="' . $scripturl . '?topic='. $context['current_topic'] . '.0;sa=log">Konuyu Okumuş Olanlar</a>
</h3>
3078
Sadece konuya girişte ortaya çıkıcaktır.
resimleri temanızın images kısmına atın.
http://yadi.sk/d/jUgdwiZyGXkQ5

display.template.php
bu kodu function template_main() üzerine ekle.
if ($context['user']['is_guest'])
{

echo '
<div class="girisle" align="center">
     <div class="uyari"></div>
<a class="aktifbuton kayit" href="', $scripturl, '?action=register"></a>
<a class="aktifbuton giris" href="', $scripturl, '?action=login"></a>
</div>';
}
index.css şunları ekle
.girisle {filter:progid:DXImageTransform.Microsoft.alpha(opacity=95);-moz-opacity: 0.95;opacity: 0.95;background: url(../images/art.gif);position:fixed;width:100%;height:100%;padding:10px;}

.aktifbuton {
display:block;
cursor:hand;
cursor:pointer;
text-decoration:none;
}
.kayit {
background: url(../images/kayit.png) no-repeat;
width: 266px;
height: 59px;
padding: 3px;
}
.giris {
background: url(../images/giris.png) no-repeat;
width: 266px;
height: 59px;
padding: 3px;
}
.uyari {
margin-bottom: 15px;
background: url(../images/uyar.png) no-repeat;
width: 495px;
height: 33px;
padding: 3px;
}
.giris .kayit .uyari { text-align: center;}

Resimli demo


Not:söz konusu postion:absolute ile bağımsız olarak üste yerleştirilmiştir.Eğer temanızda positon:relative kullanılmışsa resimdeki gibi gün yüzüne çıkıcaktır.K.gelsin.(bir eksiği)
Asıl kaynak : Vbul çeviri : http://www.vbulletin.gen.tr/546-vbulletin-uye-ol-eklentisi.html


1.1.x üsteki gibi yapmak isterseniz verdiğim kodu en üste yerleştirin ve üsteki css kodlarını alın.Ayrıca ../images yolunu images/  yapın.K.Gelsin
Alıntı yapılan: kaptan_75Hocam kullandığım sürüm 1x siz 2x e göre yapmışsınız sanırım kodlar uyuşmadı, birde tüm sayfayı kaplamasın her mesaj alanında böyle çıksın istiyorum profillerde değil sadece konu içerisinde mesaj alanında böyle çıksın örnekte ki gibi
1.1.x için. Sadece mesajı/konuyu kapsar.
bunları style.css ekle
.girisle {filter:progid:DXImageTransform.Microsoft.alpha(opacity=95);-moz-opacity: 0.95;opacity: 0.95;background: url(images/art.gif);position:absolute;width:74.2%;height:auto;padding:30px;margin:-9px 0;}

.aktifbuton {
display:block;
cursor:hand;
cursor:pointer;
text-decoration:none;
}
.kayit {
background: url(images/kayit.png) no-repeat;
width: 266px;
height: 59px;
padding: 3px;
}
.giris {
background: url(images/giris.png) no-repeat;
width: 266px;
height: 59px;
padding: 3px;
}
.uyari {
margin-bottom: 15px;
background: url(images/uyar.png) no-repeat;
width: 495px;
height: 33px;
padding: 3px;
}
.giris .kayit .uyari { text-align: center;}
sonra resimleri images at .
display.template.php aç
bul
<td valign="top" width="85%" height="100%">hemen altına ekle
';
if ($context['user']['is_guest'])
{

echo '
<div class="girisle" align="center">
     <div class="uyari"></div>
<a class="aktifbuton kayit" href="', $scripturl, '?action=register"></a>
<a class="aktifbuton giris" href="', $scripturl, '?action=login"></a>
</div>';
}
                       echo '
şimdi verdiğiniz demo sitesi belli bir düzeyde 800pxgenislik 600px uzunluk gibi ondan sıkıntı oluşturmuyor.Ama bu böyle değil height auto ile içindeki kapsama kadar büyür.Verdiğiniz sistemle aynı sadece divlerle hallettik.K.GElsin.



Kaynak : http://smf.konusal.com/index.php?topic=34.0

Kaynak belirtilmeden paylaşılamaz.
3079
Merhaba değerli Forumcular. SMF 2.X sürümünde bildiğiniz gibi özelleştirilmiş profil alanı geldi.Bu gelişmiş ve Özelleştirilmiş Profil alanı ile kullanıcılarınızın kayıt esnasında veya profil bölümlerini geliştirebilir, özelleştirebilir veya daha profesiyonel bilgiler sağlayabilirsiniz. SMF 'nin Özelleştirilmiş Profil alanı bu işe yarıyor zaten. Kullanıcılarınızın kullanıcıların profilinde gezerken daha iyi bilgiler / iletişim imkanı sağlıyor. Bunlardan biride başlıkta da okuduğunuz gibi Facebook, Twitter ve +Google eklentisini ekleyeceğiz.


Bu nasıl bir ipucu?




Öncelikle Yönetim > Çekirdek ayarları > Gelişmiş Profil Alanları 'nı aktif edin.


Gelişmiş Profil Alanları: Bu özellik varsayılan profil alanlarını devre dışı bırakmanıza, kayıtta istenecek yeni profil alanları eklemenize ve profil ile ileti görünümünde görüntülenebilecek yeni profil alanları oluşturmanıza olanak sağlar.


Özel profil alanlarına inip yeni alan düğmesine basıp ilk profilimizi ekleyelim.


1- Facebook Profili
Görünen adı: Facebook Profili
Tanıtım: Facebook kullanıcı adınızı yazınız.  Örneğin; http://www.facebook.com/yldrmz.eyldrmz.e kullanıcı isminizdir. Sadece kullanıcı adınızı yazmanız yeterli.
Profil Bölümü: Forum Profili
Kayıt Esnasında Göster: İsteğinize bağlı
Konu Görünümünde Göster: İşaretleyin
Yer seçin: Simgeler ile birlikte
Metin İçerisinde Göster (isteğe bağlı): Aşağıdaki kodları ekleyin.
Kod (ekle) Seç
<a href="http://www.facebook.com/{INPUT}" target="_blank"><img src="{DEFAULT_IMAGES_URL}/cut/facebook.png" title="{INPUT}" /></a>Alan Türü: Metin
Maksimum Genişlik: 50
Aktif: İşaretleyin
Facebook için profiliniz hazır. Şimdi gelelim Twitter'a  :)


2- Twitter Profili:
İsim: Twitter Profiliniz
Tanım: Twitter.com/username username olan yere kendi kullanıcı adınızı yazacaksınız. Örneğin eyildirmaz gibi.
Profil Bölümü: Forum profili
Kayıt Esnasında Göster: İsteğe bağlı
Konu Görünümünde Göster: İşaretleyin
Yer seçin: Simgeler ile birlikte
Metin İçerisinde Göster (isteğe bağlı): Aşağıdaki kodları ekleyin.
Kod (ekle) Seç
<a href="http://twitter.com/{INPUT}" target="_blank"><img src="{DEFAULT_IMAGES_URL}/cut/twitter.png" title="{INPUT}" /></a>Alan Türü: Metin
Maksimum Genişlik: 50
Aktif: İşaretleyin
Twitter profil hesabımızda tamam. Şimdi gelelim sonuncu ve en önemli eklentiye  :)  +Google hesabı


3- +Google Profili
İsim: +Google Profiliniz
Tanım: +Google plus kullanıyorsanız profil hesabınızı ekleyin.  Örneğin: http://plus.google.com/u/0/106358670476145441897/posts/ /0 'dan ssonraki ID sizin IDnizdir. Iradaki rakamı gireceksiniz.
Profil Bölümü: Forum Profili
Kayıt Esnasında Göster: İsteğinize bağlı
Konu Görünümünde Göster: İşaretleyin.
Yer seçin: Simgeler ile birlikte
Metin İçerisinde Göster (isteğe bağlı): Aşağıdaki kodu boş alana ekleyin.
Kod (ekle) Seç
<a href="https://plus.google.com/u/0/{INPUT}" target="_blank"><img src="{DEFAULT_IMAGES_URL}/cut/googlepls.gif" title="{INPUT}" /></a>Alan Türü: Metin
Maksimum Genişlik: 50
Aktif: İşaretleyin.


Ekteki dosyaları Themes/$Sizintemaniz/images klasörü içersine atın.

kaynak http://www.simplemachines.org/community/index.php?topic=493718.0
3080

Modifikasyon Adı:Add Facebook Like, Tweet, and Google +1
Yazar: PokémonS
Tür:Socialization
Mod linki = http://custom.simplemachines.org/mods/index.php?mod=3559
3081
Konu / smf konu içi basit player
18 Mayıs 2014 14:33
index.templatede uygun biyere koyabilirsiniz

    <script>
(function(doc){var addEvent=\'addEventListener\',type=\'gesturestart\',qsa=\'querySelectorAll\',scales=[1,1],meta=qsa in doc?doc[qsa](\'meta[name=viewport]\'):[];function fix(){meta.content=\'width=device-width,minimum-scale=\' scales[0] \',maximum-scale=\' scales[1];doc.removeEventListener(type,fix,true);}if((meta=meta[meta.length-1])&&addEvent in doc){fix();scales=[.25,1.6];doc[addEvent](type,fix,true);}}(document));
    </script>
<audio preload="auto" controls>
<source src="http://cdn.net84.net/1.mp3">
</audio>
<script>$( function() { $( \'audio\' ).audioPlayer(); } );</script>

bu kısımı kendinize göre düzeltin
<source src="http://cdn.net84.net/1.mp3">

konu içinde kullanmak isteyenler için bir ipucu
[html]
    <script>
(function(doc){var addEvent=\'addEventListener\',type=\'gesturestart\',qsa=\'querySelectorAll\',scales=[1,1],meta=qsa in doc?doc[qsa](\'meta[name=viewport]\'):[];function fix(){meta.content=\'width=device-width,minimum-scale=\' scales[0] \',maximum-scale=\' scales[1];doc.removeEventListener(type,fix,true);}if((meta=meta[meta.length-1])&&addEvent in doc){fix();scales=[.25,1.6];doc[addEvent](type,fix,true);}}(document));
    </script>
<audio preload="auto" controls>
<source src="http://cdn.net84.net/1.mp3">
</audio>
<script>$( function() { $( \'audio\' ).audioPlayer(); } );</script>
[/html]
3082
smf nin giriş panelinden sıkılan arkadaşlar için bu konuda smf ye uyarladığımız login panellerini paylaşacaz zamanla daha fazla ekliyecez anlatımlar defaulta göredir

index.template.php bul
echo '
 <script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sha1.js"></script>
 <form id="guest_form" action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
 <div class="info">', sprintf($txt['welcome_guest'], $txt['guest_title']), '</div>
 <input type="text" name="user" size="10" class="input_text" />
 <input type="password" name="passwrd" size="10" class="input_password" />
 <select name="cookielength">
 <option value="60">', $txt['one_hour'], '</option>
 <option value="1440">', $txt['one_day'], '</option>
 <option value="10080">', $txt['one_week'], '</option>
 <option value="43200">', $txt['one_month'], '</option>
 <option value="-1" selected="selected">', $txt['forever'], '</option>
 </select>
 <input type="submit" value="', $txt['login'], '" class="button_submit" /><br />
 <div class="info">', $txt['quick_login_dec'], '</div>';

 if (!empty($modSettings['enableOpenID']))
 echo '
 <br /><input type="text" name="openid_identifier" id="openid_url" size="25" class="input_text openid_login" />';

 echo '
 <input type="hidden" name="hash_passwrd" value="" />
 </form>';

değiştir
echo '
 <script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sha1.js"></script>
 
 <div id="box-login">
 <div id="box-login-top">
 <form id="guest_form" action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
 <div class="info">', sprintf($txt['welcome_guest'], $txt['guest_title']), '</div>
 <fieldset>
 <input id="username" name="user" placeholder="username" class="form-text" type="text">
 </fieldset>
 <fieldset>
 <input id="password" name="passwrd" placeholder="password" class="form-text" type="password">
 </fieldset>
 <select name="cookielength">
 <option value="60">', $txt['one_hour'], '</option>
 <option value="1440">', $txt['one_day'], '</option>
 <option value="10080">', $txt['one_week'], '</option>
 <option value="43200">', $txt['one_month'], '</option>
 <option value="-1" selected="selected">', $txt['forever'], '</option>
 </select>
 <input type="submit" value="', $txt['login'], '" class="button_submit" /><br />
 <div class="info">', $txt['quick_login_dec'], '</div>';

 if (!empty($modSettings['enableOpenID']))
 echo '
 <br /><input type="text" name="openid_identifier" id="openid_url" size="25" class="input_text openid_login" />';

 echo '
 <input type="hidden" name="hash_passwrd" value="" />
 </form></div>
 </div>
 <div class="clear"></div>';

index.css en alta ekle
#box-login {
 font-size: 9px;
 display: table;
 background-color: #FFF;
 /*border: 1px solid #d9d9d9;*/

 -moz-box-shadow: 0 0 16px -4px rgba(0, 0, 0, 0.5);
 -webkit-box-shadow: 0 0 16px -4px rgba(0, 0, 0, 0.5);
 box-shadow: 0 0 16px -4px rgba(0, 0, 0, 0.5);

 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 
 width: 290px;
}
#box-login-top {
 background: transparent;
 padding: 5px;
}
#box-login-top form fieldset input.form-text {
 display: block;
 width: 240px;
 padding: 8px 7px;
 font-size: 14px;
 border: 1px solid #ddd;
 background: #f5f5f5;
 -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
 -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
 -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
}
#box-login-top form fieldset input.form-text:focus {
 border: 1px solid #ccc;
 background: #fff;
}
#box-login-top form input[type="submit"] {
 margin: 0px;
font-size: 10px;
font-weight: bold;
border: 0px none;
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.6);
background: -moz-linear-gradient(19% 75% 90deg, #FF4D01, #FF8924) repeat scroll 0% 0% transparent;
color: #FFF;
float: right;
font-family: arial,helvetica,sans-serif;
padding: 10px 2px;
width: 120px;
text-align: center;
}
#box-login-top form input[type="submit"]:hover,
#box-login-top form input[type="submit"]:focus,
#box-login-top form input[type="submit"]:active {
background: -moz-linear-gradient(19% 75% 90deg, #EB4701, #F58423);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F58423), to(#EB4701));
cursor: pointer;
}



bu resimide temanızın images klasörüne atın = http://snrj.eu5.org/uploads/2014/03/arrow.png
index.template.php bul
echo '
 <script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sha1.js"></script>
 <form id="guest_form" action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
 <div class="info">', sprintf($txt['welcome_guest'], $txt['guest_title']), '</div>
 <input type="text" name="user" size="10" class="input_text" />
 <input type="password" name="passwrd" size="10" class="input_password" />
 <select name="cookielength">
 <option value="60">', $txt['one_hour'], '</option>
 <option value="1440">', $txt['one_day'], '</option>
 <option value="10080">', $txt['one_week'], '</option>
 <option value="43200">', $txt['one_month'], '</option>
 <option value="-1" selected="selected">', $txt['forever'], '</option>
 </select>
 <input type="submit" value="', $txt['login'], '" class="button_submit" /><br />
 <div class="info">', $txt['quick_login_dec'], '</div>';

 if (!empty($modSettings['enableOpenID']))
 echo '
 <br /><input type="text" name="openid_identifier" id="openid_url" size="25" class="input_text openid_login" />';

 echo '
 <input type="hidden" name="hash_passwrd" value="" />
 </form>';

değiştir
echo '
 <script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sha1.js"></script>
 <form class="login" id="guest_form" action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
 <div class="info">', sprintf($txt['welcome_guest'], $txt['guest_title']), '</div>
 <p><input type="text" name="user" id="login" ></p>
 <p><input type="password" name="passwrd" id="password" ></p>
 <p class="login-submit">
 <button type="submit" value="', $txt['login'], '" class="login-button">Login</button>
 </p>';

 if (!empty($modSettings['enableOpenID']))
 echo '
 <br /><input type="text" name="openid_identifier" id="openid_url" size="25" class="input_text openid_login" />';

 echo '
 <input type="hidden" name="hash_passwrd" value="" />
 </form>';

index.css en alta ekle

.login {
  position: relative;
margin: 0px;
}
.login p {
  margin: 0 0 10px;
}

input, button, label {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 300;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

input[type=text], input[type=password] {
  padding: 0 10px;
  width: 260px;
  height: 40px;
  color: #bbb;
  text-shadow: 1px 1px 1px black;
 
  border: 0;
  border-radius: 5px;
  -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.06);
}
input[type=text]:focus, input[type=password]:focus {
  color: white;
  background: rgba(0, 0, 0, 0.1);
  outline: 0;
}

label {
  float: left;
  width: 100px;
  line-height: 40px;
  padding-right: 10px;
  font-weight: 100;
  text-align: right;
  letter-spacing: 1px;
}

.forgot-password {
  padding-left: 100px;
  font-size: 13px;
  font-weight: 100;
  letter-spacing: 1px;
}

.login-submit {
  position: absolute;
top: 44px;
left: 235px;
  width: 48px;
  height: 48px;
  padding: 8px;
  border-radius: 32px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
}
.login-submit:before, .login-submit:after {
  content: '';
  z-index: 1;
  position: absolute;
}
.login-submit:before {
  top: 28px;
  left: -4px;
  width: 4px;
  height: 10px;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
}
.login-submit:after {
  top: -4px;
  bottom: -4px;
  right: -4px;
  width: 36px;
}

.login-button {
  position: relative;
  z-index: 2;
  width: 48px;
  height: 48px;
  padding: 0 0 48px;
  /* Fix wrong positioning in Firefox 9 & older (bug 450418) */
  text-indent: 120%;
  white-space: nowrap;
  overflow: hidden;
  background: none;
  border: 0;
  border-radius: 24px;
  cursor: pointer;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.1);
  /* Must use another pseudo element for the gradient background because Webkit */
  /* clips the background incorrectly inside elements with a border-radius.     */
}
.login-button:before {
  content: '';
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;
  background: #00a2d3;
  border-radius: 24px;
  background-image: -webkit-linear-gradient(top, #00a2d3, #0d7796);
  background-image: -moz-linear-gradient(top, #00a2d3, #0d7796);
  background-image: -o-linear-gradient(top, #00a2d3, #0d7796);
  background-image: linear-gradient(to bottom, #00a2d3, #0d7796);
  -webkit-box-shadow: inset 0 0 0 1px #00a2d3, 0 0 0 5px rgba(0, 0, 0, 0.16);
  box-shadow: inset 0 0 0 1px #00a2d3, 0 0 0 5px rgba(0, 0, 0, 0.16);
}
.login-button:active:before {
  background: #0591ba;
  background-image: -webkit-linear-gradient(top, #0591ba, #00a2d3);
  background-image: -moz-linear-gradient(top, #0591ba, #00a2d3);
  background-image: -o-linear-gradient(top, #0591ba, #00a2d3);
  background-image: linear-gradient(to bottom, #0591ba, #00a2d3);
}
.login-button:after {
  content: '';
  position: absolute;
  top: 15px;
  left: 12px;
  width: 25px;
  height: 19px;
  background: url("../images/arrow.png") 0 0 no-repeat;
}



geçitli ajaxlı giriş alanı
linkteki dosyayi themes defult dizinine atin = http://yadi.sk/d/7PHY99GRLY42c

index.template.php bul
echo $context['html_headers'];üstüne ekle
// esto llamara a todos los archivos necesarios para q funcione nuestro codigo
   if ($context['user']['is_guest'])
      echo '
      <link rel="stylesheet" type="text/css" href="./Themes/default/login_cd/style.css" />
      <script type="text/javascript" src="./Themes/default/login_cd/jquery.min.js"></script>
      <script type="text/javascript" src="./Themes/default/login_cd/jquery.leanModal.min.js"></script>
      <script type="text/javascript">
         $(function() {
             $("a[rel*=leanModal]").leanModal({ top : 200, closeButton: ".modal_close" });      
         });
      </script>';
bul
<form id="guest_form" action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
               <div class="info">', sprintf($txt['welcome_guest'], $txt['guest_title']), '</div>
               <input type="text" name="user" size="10" class="input_text" />
               <input type="password" name="passwrd" size="10" class="input_password" />
               <select name="cookielength">
                  <option value="60">', $txt['one_hour'], '</option>
                  <option value="1440">', $txt['one_day'], '</option>
                  <option value="10080">', $txt['one_week'], '</option>
                  <option value="43200">', $txt['one_month'], '</option>
                  <option value="-1" selected="selected">', $txt['forever'], '</option>
               </select>
               <input type="submit" value="', $txt['login'], '" class="button_submit" /><br />
               <div class="info">', $txt['quick_login_dec'], '</div>';

      if (!empty($modSettings['enableOpenID']))
         echo '
               <br /><input type="text" name="openid_identifier" id="openid_url" size="25" class="input_text openid_login" />';

      echo '
               <input type="hidden" name="hash_passwrd" value="" />
            </form>
değiştir
<a id="go" rel="leanModal" name="signup" href="#signup">Giriş Yap</a>
<div id="signup">
  <div id="signup-ct">
    <div id="signup-header">
      <h2>', $txt['login'], '</h2>
      <p>',$context['forum_name'], ' </p>
      <a class="modal_close" href="#"></a> </div>
<form id="guest_form2" action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
  <div class="info">', sprintf($txt['welcome_guest'], $txt['guest_title']), '</div>
  <div class="txt-fld">
  <label for="">', $txt['username'], ':</label>
  <input type="text" name="user" size="10" class="input_text" />
  </div>
  <div class="txt-fld">
        <label for="">', $txt['password'], ':</label>
  <input type="password" name="passwrd" size="10" class="input_password" />
   </div>
   <div class="one_cookielength">
  <select class="modal_cookielength" name="cookielength">
    <option value="60">', $txt['one_hour'], '</option>
    <option value="1440">', $txt['one_day'], '</option>
    <option value="10080">', $txt['one_week'], '</option>
    <option value="43200">', $txt['one_month'], '</option>
    <option value="-1" selected="selected">', $txt['forever'], '</option>
  </select> </div>
  <br />
   <div class="btn-fld">
        <button type="submit" class="button_submit" />', $txt['login'], '</button>
      </div>
</form>
</div>
</div>


3083
Çeşitli / Smf otomatik resim slayt
18 Mayıs 2014 14:29
belirlediğiniz bölümlerdeki ilk resimi alır slider ekler

sitenizde uygun yere alttaki kodu ekleyin index.template.php veya portal kulananlar php blok olarak ekleyebilir
$boards=array(1,2,3,4,5); bölümlerinizi burdan ayarlayabilirsiniz
echo '
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$.fn.infiniteCarousel = function () {
    function repeat(str, num) {
        return new Array( num   1 ).join( str );
    }
    return this.each(function () {
        var $wrapper = $(\'> div\', this).css(\'overflow\', \'hidden\'),
            $slider = $wrapper.find(\'> ul\'),
            $items = $slider.find(\'> li\'),
            $single = $items.filter(\':first\'),
            singleWidth = $single.outerWidth(),
            visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn\'t include padding or border
            currentPage = 1,
            pages = Math.ceil($items.length / visible);           
            if (($items.length % visible) != 0) {
            $slider.append(repeat(\'<li class="empty" />\', visible - ($items.length % visible)));
            $items = $slider.find(\'> li\');
        }
        $items.filter(\':first\').before($items.slice(- visible).clone().addClass(\'cloned\'));
        $items.filter(\':last\').after($items.slice(0, visible).clone().addClass(\'cloned\'));
        $items = $slider.find(\'> li\');
        $wrapper.scrollLeft(singleWidth * visible);
            function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;
            $wrapper.filter(\':not(:animated)\').animate({
                scrollLeft : \' =\'   left
            }, 500, function () {
                if (page == 0) {
$wrapper.scrollLeft(singleWidth * visible * pages);
page = pages;
  } else if (page > pages) {
$wrapper.scrollLeft(singleWidth * visible);
// reset back to start position
page = 1;
}
  currentPage = page;
   });                         
  return false;
}
$wrapper.after(\'<a class="icon-angle-left"></a><a class="icon-angle-right"></a>\');
$(\'a.icon-angle-left\', this).click(function () {
return gotoPage(currentPage - 1);               
  });
$(\'a.icon-angle-right\', this).click(function () {
return gotoPage(currentPage   1);
});
  $(this).bind(\'goto\', function (event, page) {
gotoPage(page);
});
}); 
};
$(document).ready(function () {
  $(\'.infiniteCarousel\').infiniteCarousel();
});
//]]>
</script>';
global $smcFunc, $scripturl, $settings, $options, $txt ,$context, $modSettings;
$boards=array(1,2,3,4,5);
$request = $smcFunc['db_query']('', '
  SELECT t.id_topic, m.subject, m.body
  FROM {db_prefix}topics AS t
   INNER JOIN {db_prefix}messages AS m ON (m.id_msg = t.id_first_msg)
  WHERE t.id_board IN ({array_int:boards})
  ORDER BY t.id_topic DESC
       LIMIT {int:limit}',
  array(
    'boards' => $boards,
               'limit' => 50,
  )
);

$topics = array();
while ($row = $smcFunc['db_fetch_assoc']($request))
  $topics[] = array(
     'id_topic' => $row['id_topic'],
     'subject' => $row['subject'],
     'first_image'  => preg_match_all('~\[img.*?\]([^\]] )\[\/img\]~i', $row['body'],  $images) ? '<img src="' . $images[1][0] . '" alt="' .  $row['subject'] . '" height="145" width="102"/>      ' : '',
  );
$smcFunc['db_free_result']($request);
     echo '
    <div id="caja-carrusel">
<div class="infiniteCarousel">
<div class="wrapper" style="overflow-x: hidden; overflow-y: hidden; ">
<ul>';
foreach ($topics as $topic)
  echo '
<li><a  href="', $scripturl, '?topic=', $topic['id_topic'], '.0">',  $topic['first_image'], ' </a></li>  ';
echo ' </ul>
</div>
</div></div>';

index.css de en alta ekleyin

.infiniteCarousel{width:1015px;position:relative;height:170px;margin:0px;}

.infiniteCarousel .wrapper{width:985px;overflow:auto;height:160px;margin:0 0px 0 0px;position:absolute;top:3px;background:#202020;border-radius:6px;}

.infiniteCarousel ul a img{border:1px solid #CCC;padding:0;-webkit-box-shadow:1px 1px 8px #777;-moz-box-shadow:1px 1px 8px #777;box-shadow:1px 1px 8px #777;width:100px;height:140px;}

.infiniteCarousel .wrapper ul{width:9999px;list-style:none;margin:0;padding:0;position:absolute;top:0;}

.infiniteCarousel ul li{display:block;float:left;padding:9px 5px;height:142px;width:99px;}

.infiniteCarousel ul li a img{display:block;color:#000;}

.infiniteCarousel .icon-angle-right{right:-11px;font-size:60px;top:67px;position:absolute;cursor:pointer;}

.infiniteCarousel .icon-angle-left{left:-41px;font-size:60px;top:67px;position:absolute;cursor:pointer;}
.icon-angle-left:before {

    content: "<";

}

.icon-angle-right:before {

    content: ">";

}
.pager-home{display:inline;}
3084
fırsat buldukça burdan smf için uyarladığımız menüleri yayınlıcaz kopyala yapıştır yaparak kolayca kendi sitenize uygulayabileceksiniz yeni menüler ekledikçe konuyu güncellicem hemen ilk menümüzü ekleyelim

1- lavamp menü

alttaki iki resim temanızın images/theme klasörüne atın
http://theme.teknoromi.com/Themes/Teknoromi/images/theme/menu_bg.png
http://theme.teknoromi.com/Themes/Teknoromi/images/theme/lavalamp.png
index.template.php de bul
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <div id="main_menu">
 <ul class="dropmenu" id="menu_nav">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>
 </div>';
}
değiştir
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '     <div id="demowrapper">

       <div class="container">
 <ul class="nav">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li>
 <a  href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span >', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul class="subs">';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a  href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' ' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul class="subs">';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? '"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '

 <div id="lavalamp"></div></ul>

 </div> </div>';
}
index.css de en alta ekle
#demowrapper{position:relative;height:60px;margin:0 auto;}
.container{font:14px/1.3 Arial,sans-serif}
.nav,.nav ul{list-style:none outside none;margin:0;padding:0;}
.nav{background:url('../images/theme/menu_bg.png') no-repeat scroll 0 0 transparent;clear:both;font-size:12px;height:58px;padding:0 0 0 9px;position:relative;width:957px;}
.nav ul{background-color:#222;border:1px solid #222;border-radius:0 5px 5px 5px;border-width:0 1px 1px;box-shadow:0 5px 5px rgba(0, 0, 0, 0.5);left:-9999px;overflow:hidden;position:absolute;top:-9999px;z-index:2;-moz-transform:scaleY(0);-ms-transform:scaleY(0);-o-transform:scaleY(0);-webkit-transform:scaleY(0);transform:scaleY(0);}
.nav li{background:url('../images/theme/menu_line.png') no-repeat scroll right 5px transparent;width:95px;float:left;position:relative;}
.nav li a{color:#FFFFFF;display:block;font-weight:normal;height:30px;padding:23px 20px 0;position:relative;text-align:center;text-decoration:none;text-shadow:1px 1px 1px #000000;}
.nav li:hover > a{color:#00B4FF;}
.nav li:hover, .nav a:focus, .nav a:hover, .nav a:active{background:none repeat scroll 0 0 #121212;outline:0 none;}
.nav li:hover ul.subs{left:0;top:53px;width:180px;-moz-transform:scaleY(1);-ms-transform:scaleY(1);-o-transform:scaleY(1);-webkit-transform:scaleY(1);transform:scaleY(1);}
.nav ul li{background:none;width:100%;}
.nav ul li a{float:left;}
.nav ul li:hover > a{background-color:#121212;color:#00B4FF;}
#lavalamp{background:url('../images/theme/lavalamp.png') no-repeat scroll 0 0 transparent;height:16px;left:19px;position:absolute;top:0px;width:64px;-moz-transition:all 300ms ease;-ms-transition:all 300ms ease;-o-transition:all 300ms ease;-webkit-transition:all 300ms ease;transition:all 300ms ease;}
#lavalamp:hover{-moz-transition-duration:3000s;-ms-transition-duration:3000s;-o-transition-duration:3000s;-webkit-transition-duration:3000s;transition-duration:3000s;}
.nav li:nth-of-type(1):hover ~ #lavalamp{left:20px;}
.nav li:nth-of-type(2):hover ~ #lavalamp{left:115px;}
.nav li:nth-of-type(3):hover ~ #lavalamp{left:210px;}
.nav li:nth-of-type(4):hover ~ #lavalamp{left:305px;}
.nav li:nth-of-type(5):hover ~ #lavalamp{left:400px;}
.nav li:nth-of-type(6):hover ~ #lavalamp{left:495px;}
.nav li:nth-of-type(7):hover ~ #lavalamp{left:590px;}
.nav li:nth-of-type(8):hover ~ #lavalamp{left:685px;}
.nav li:nth-of-type(9):hover ~ #lavalamp{left:780px;}



2- dropdown menü

index.template.php de bul
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt, $modSettings;

 echo '
 <div id="main_menu">
 <ul class="dropmenu" id="menu_nav">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>
 </div>';
}

değiştir
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt, $modSettings;

 echo '
 <ul id="menu">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>';
}

index.css de en alta ekle
#menu
{
 width: 100%;
 margin: 0;
 padding: 10px 0 0 0;
 list-style: none; 
 background: #111;
 background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
 background: -webkit-linear-gradient(#444, #111);
 background: -o-linear-gradient(#444, #111);
 background: -ms-linear-gradient(#444, #111);
 background: linear-gradient(#444, #111);
 -moz-border-radius: 50px;
 border-radius: 50px;
 -moz-box-shadow: 0 2px 1px #9c9c9c;
 -webkit-box-shadow: 0 2px 1px #9c9c9c;
 box-shadow: 0 2px 1px #9c9c9c;
}

#menu li
{
 float: left;
 padding: 0 0 10px 0;
 position: relative;
 line-height: 0;
}

#menu a
{
 float: left;
 height: 25px;
 padding: 0 25px;
 color: #999;
 text-transform: uppercase;
 font: bold 12px/25px Arial, Helvetica;
 text-decoration: none;
 text-shadow: 0 1px 0 #000;
}

#menu li:hover > a
{
 color: #fafafa;
}

*html #menu li a:hover /* IE6 */
{
 color: #fafafa;
}

#menu li:hover > ul
{
 display: block;
}

/* Sub-menu */

#menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;   
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;   
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);   
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
    box-shadow: 0 0 2px rgba(255,255,255,.5);
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul ul
{
  top: 0;
  left: 150px;
}

#menu ul li
{
    float: none;
    margin: 0;
    padding: 0;
    display: block; 
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child
{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;   
}

#menu ul a
{   
    padding: 10px;
 height: 10px;
 width: 130px;
 height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
 text-transform: none;
}

*html #menu ul a /* IE6 */
{   
 height: 10px;
}

*:first-child html #menu ul a /* IE7 */
{   
 height: 10px;
}

#menu ul a:hover
{
    background: #0186ba;
 background: -moz-linear-gradient(#04acec,  #0186ba);
 background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
 background: -webkit-linear-gradient(#04acec,  #0186ba);
 background: -o-linear-gradient(#04acec,  #0186ba);
 background: -ms-linear-gradient(#04acec,  #0186ba);
 background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child > a
{
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child > a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul ul li:first-child a:after
{
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #444;
}

#menu ul li:first-child a:hover:after
{
    border-bottom-color: #04acec;
}

#menu ul ul li:first-child a:hover:after
{
    border-right-color: #04acec;
    border-bottom-color: transparent;
}


#menu ul li:last-child > a
{
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after
{
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child html #menu { zoom: 1; } /* IE7 */


3- açlılır kapanır menü
iconlar biraz aceleye geldi ama siz kendinize göre düzeltin artık
benim kullandığım iconları şurdan indirebilirsiniz = http://yadi.sk/d/kh_qAL0vKHLL8
images klasörüne atınız
örnek resim

index.template.php de bul
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <div id="main_menu">
 <ul class="dropmenu" id="menu_nav">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>
 </div>';
}
değiştir
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '<div class="menu">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '<div class="item" id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <div class="item_content"><h2 class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</h2>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 ';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <p', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</p>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <div class="item_content">';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <p', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</p>
 </a>
 ';

 echo '
 </div>';
 }

 echo '
 ';
 }
 echo '
 ';
 }
 echo '
 </div></div>';
 }

 echo '
 
 </div><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

        <script>
            $(\'.item\').hover(
                function(){
                    var $this = $(this);
                    expand($this);
                },
                function(){
                    var $this = $(this);
                    collapse($this);
                }
            );
            function expand($elem){
                var angle = 0;
                var t = setInterval(function () {
                    if(angle == 1440){
                        clearInterval(t);
                        return;
                    }
                    angle  = 40;
                    $(\'.link\',$elem).stop().animate({rotate: \' =-40deg\'}, 0);
                },10);
                $elem.stop().animate({width:\'268px\'}, 1000)
                .find(\'.item_content\').fadeIn(400,function(){
                    $(this).find(\'p\').stop(true,true).fadeIn(600);
                });
            }
            function collapse($elem){
                var angle = 1440;
                var t = setInterval(function () {
                    if(angle == 0){
                        clearInterval(t);
                        return;
                    }
                    angle -= 40;
                    $(\'.link\',$elem).stop().animate({rotate: \' =40deg\'}, 0);
                },10);
                $elem.stop().animate({width:\'48px\'}, 1000)
                .find(\'.item_content\').stop(true,true).fadeOut().find(\'p\').stop(true,true).fadeOut();
            }
        </script>';
}
index.css de en alta ekle
.item {
    position:relative;
    background-color:#f0f0f0;
    float:left;
    width:48px;
    margin:0px 5px;
    height:48px;
    border:2px solid #ddd;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    -moz-box-shadow:1px 1px 3px #555;
    -webkit-box-shadow:1px 1px 3px #555;
    box-shadow:1px 1px 3px #555;
    cursor:pointer;
    overflow:hidden;
}

.link{
    left:2px;
    top:2px;
    position:absolute;
    width:48px;
    height:48px;
}
#button_home{
    background:transparent url(../images/home.png) no-repeat top left;
}
#button_pm{
    background:transparent url(../images/mail.png) no-repeat top left;
}
#button_help{
    background:transparent url(../images/help.png) no-repeat top left;
}
#button_search{
    background:transparent url(../images/find.png) no-repeat top left;
}
#button_profile{
    background:transparent url(../images/photos.png) no-repeat top left;
}
#button_mlist{
    background:transparent url(../images/users.png) no-repeat top left;
}
#button_logout{
    background:transparent url(../images/shotdown.png) no-repeat top left;
}
#button_admin{
    background:transparent url(../images/star.png) no-repeat top left;
}
#button_moderate{
    background:transparent url(../images/star.png) no-repeat top left;
}
#button_login{
    background:transparent url(../images/login.png) no-repeat top left;
}
#button_register{
    background:transparent url(../images/save.png) no-repeat top left;
}

.item_content {
    position:absolute;
    height:52px;
    width:220px;
    overflow:hidden;
    left:56px;
    top:7px;
    background:transparent;
    display:none;
}
.item_content h2{
    color:#aaa;
    text-shadow: 1px 1px 1px #fff;
    background-color:transparent;
    font-size:14px;
}
.item_content a{
    background-color:transparent;
    float:left;
    margin-right:7px;
    margin-top:3px;
    color:#bbb;
    text-shadow: 1px 1px 1px #fff;
    text-decoration:none;
    font-size:12px;
}
.item_content a:hover{
    color:#0b965b;
}
.item_content p {
    background-color:transparent;
    display:none;
 font-size: 9px;
margin-top: -3px;
}
.item_content p input{
    border:1px solid #ccc;
    padding:1px;
    width:155px;
    float:left;
    margin-right:5px;
}



4- efectif menü

index.template.php de bul
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <div id="main_menu">
 <ul class="dropmenu" id="menu_nav">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>
 </div>';
}
değiştir
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <div id="main" role="main">
            <ul class="menu">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul class="submenu">';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul class="submenu">';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>
 </div>';
}

index.css de en alta ekle
/* general styles */
.menu, .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    height: 40px;
}
.menu li {
    background: -moz-linear-gradient(#292929, #252525);
    background: -ms-linear-gradient(#292929, #252525);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
    background: -webkit-linear-gradient(#292929, #252525);
    background: -o-linear-gradient(#292929, #252525);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
    background: linear-gradient(#292929, #252525);

    border-bottom: 2px solid #181818;
    border-top: 2px solid #303030;
 
}
.menu > li {
    display: block;
    float: left;
    position: relative;
}
.menu > li:first-child {
    border-radius: 5px 0 0;
}
.menu a {
    border-left: 3px solid rgba(0, 0, 0, 0);
    color: #808080;
    display: block;
    font-family: 'Lucida Console';
    font-size: 14px;
    line-height: 40px;
    padding: 0 25px;
    text-decoration: none;
    text-transform: uppercase;
}

/* onhover styles */
.menu li:hover {
    background-color: #1c1c1c;
    background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
    background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
    background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
    background: -o-linear-gradient(#1c1c1c, #1b1b1b);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
    background: linear-gradient(#1c1c1c, #1b1b1b);

    border-bottom: 2px solid #222222;
    border-top: 2px solid #1B1B1B;
}
.menu li:hover > a {
    border-radius: 5px 0 0 0;
    border-left: 3px solid #C4302B;
    color: #C4302B;
}

/* submenu styles ------------------------------------*/
.submenu {
    left: 0;
    max-height: 0;
    position: absolute;
    top: 100%;
    z-index: 0;

    -webkit-perspective: 400px;
    -moz-perspective: 400px;
    -ms-perspective: 400px;
    -o-perspective: 400px;
    perspective: 400px;
}
.submenu li {
    opacity: 0;

    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);

    -webkit-transition: opacity .4s, -webkit-transform .5s;
    -moz-transition: opacity .4s, -moz-transform .5s;
    -ms-transition: opacity .4s, -ms-transform .5s;
    -o-transition: opacity .4s, -o-transform .5s;
    transition: opacity .4s, transform .5s;
}
.menu .submenu li:hover a {
    border-left: 3px solid #454545;
    border-radius: 0;
    color: #ffffff;
}
.menu > li:hover .submenu, .menu > li:focus .submenu {
    max-height: 2000px;
    z-index: 10;
}
.menu > li:hover .submenu li, .menu > li:focus .submenu li {
    opacity: 1;

    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}

/* CSS3 delays for transition effects---------------------------------------- */
.menu li:hover .submenu li:nth-child(1) {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.menu li:hover .submenu li:nth-child(2) {
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
}
.menu li:hover .submenu li:nth-child(3) {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.menu li:hover .submenu li:nth-child(4) {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
}
.menu li:hover .submenu li:nth-child(5) {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.menu li:hover .submenu li:nth-child(6) {
    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
}
.menu li:hover .submenu li:nth-child(7) {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.menu li:hover .submenu li:nth-child(8) {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
}

.submenu li:nth-child(1) {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
}
.submenu li:nth-child(2) {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.submenu li:nth-child(3) {
    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
}
.submenu li:nth-child(4) {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.submenu li:nth-child(5) {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
}
.submenu li:nth-child(6) {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.submenu li:nth-child(7) {
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
}
.submenu li:nth-child(8) {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}


5- smf menü

index.template.php de bul
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <div id="main_menu">
 <ul class="dropmenu" id="menu_nav">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>
 </div>';
}
değiştir
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <nav class="Dark Green">
  <ul>';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul style="display: none;">';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>
</nav> ';
}
index.css de en alta ekle
/*Main Menu*/
nav { text-align: center;  height: 45px; }
nav ul {list-style-type: none; padding: 0 5px; margin: 0;}
nav ul li {margin: 0; display: block;}
nav ul li a{ font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 15px; text-decoration: none;
 border-radius: 6px 6px 0px 0px; height: 25px; padding: 10px 20px; margin-right: 5px; float: left;
 transform: translateY(0px);
 transition: All 0.4s ease; -moz-transform: translateY(0px);-webkit-transform: translateY(0px);
    -moz-box-shadow:inset 0px -3px 8px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow:inset 0px -3px 8px rgba(0, 0, 0, 0.2);
    box-shadow:inset 0px -3px 8px rgba(0, 0, 0, 0.2);
}
nav ul li a:hover{
 height: 35px;
 transform: translateY(-10px); -moz-transform: translateY(-10px); -webkit-transform: translateY(-10px);
 -moz-box-shadow:inset 0px -3px 8px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow:inset 0px -3px 8px rgba(0, 0, 0, 0.2);
    box-shadow:inset 0px -3px 8px rgba(0, 0, 0, 0.2);
}

/*Dark - Light*/
.Dark {border-bottom: 1px solid #333;}
.Dark ul li a {background-color: #333; color: #FFF; border-bottom: 1px solid rgba(255, 255, 255, 0)}
.Dark ul li a:hover {background-color: #333; color: #FFF; border-bottom: 1px solid rgba(255, 255, 255, 2)}
.Light {border-bottom: 1px solid #FFF;}
.Light ul li a {background-color: #FFF; color: #333; border-bottom: 1px solid rgba(50, 50, 50, 0)}
.Light ul li a:hover {background-color: #FFF; color: #333; border-bottom: 1px solid rgba(50, 50, 50, 2)}


/*Colors*/
.Red ul li a:hover{
 background-color: Red;
}
.Blue ul li a:hover{
 background-color: DeepSkyBlue;
}
.Green ul li a:hover{
 background-color: Green;
}
.Orange ul li a:hover{
 background-color: Orange;
}
.YellowGreen ul li a:hover{
 background-color: YellowGreen;
}
.Crimson ul li a:hover{
 background-color: Crimson;
}
.LightSeaGreen ul li a:hover{
 background-color: LightSeaGreen;
}
.SlateBlue  ul li a:hover{
 background-color: SlateBlue;
}

menümüz kullanıma hazır renk değşimi için
index.template.php içinde şu kısımı bulun
<nav class="Dark Green">Dark Green yazan yeri alttakilerden biri ile değiştirin hangi renk hoşunuza giderse artık
Dark Red
Dark Blue
Dark Orange
Dark YellowGreen
Dark Crimson
Dark LightSeaGreen
Dark SlateBlue



6- basit menü

index.template.php de bul
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <div id="main_menu">
 <ul class="dropmenu" id="menu_nav">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>
 </div>';
}
değiştir
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <ul id="nav" class="dropdown dropdown-linear">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>';
}
index.css de en alta ekle
ul.dropdown {
 padding-bottom: 1px;
 font: bold 13px/normal Arial, Helvetica, sans-serif;
}

 ul.dropdown li {
 padding: 4px 6px;
 color: #0063dc;
 }

 ul.dropdown li.divider {
 border-top: solid 1px #e5e5e5;
 }

 ul.dropdown li.hover,
 ul.dropdown li:hover {
 color: #0063dc;
 }

 ul.dropdown a:link,
 ul.dropdown a:visited { color: #0063dc; text-decoration: none; }
 ul.dropdown a:hover { color: #0063dc; text-decoration: underline; }
 ul.dropdown a:active { color: #ff0084; }

 /* -- level mark -- */

 ul.dropdown ul {
 width: 150px;
 padding: 3px 6px;
 border-style: solid;
 border-width: 1px;
 border-color: #f0f0f0 #666 #666 #f0f0f0;
 background-color: #fff;
 font-weight: normal;
 font-size: 11px;
 }


/* -- Supporting class `dir` -- */

ul.dropdown *.dir {
 padding-right: 25px;
 background-position: 95% 50%;
 background-repeat: no-repeat;
}


/* -- Components override -- */

ul.dropdown-vertical ul {
 top: 0;
 left: 100%;
}

ul.dropdown-vertical-rtl ul {
 right: 100%;
}

ul.dropdown-horizontal,
ul.dropdown-linear,
ul.dropdown-upward {
 width: 100%;
}


ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}

ul.dropdown li {
 float: left;
 min-height: 1px;
 line-height: 1.3em;
 vertical-align: middle;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}

ul.dropdown-linear {
 width: 100%;
}

ul.dropdown-linear ul li {
 float: left;
}

ul.dropdown-linear li.hover,
ul.dropdown-linear li:hover {
 position: static;
}

ul.dropdown-linear ul ul {
 display: none !important;
}

ul.dropdown a,
ul.dropdown span {
 display: block;
 padding: 4px 6px;
}

ul.dropdown ul a,
ul.dropdown ul span {
 padding: 4px 0;
 margin-left: 5px;
}


/* -- Base style override -- */

ul.dropdown li {
 padding: 0;
 border: none;
}


/* -- Custom styles -- */

ul.dropdown li a,
ul.dropdown *.dir {
 border-style: solid;
 border-width: 1px 1px 0;
 border-color: #fff;
}

ul.dropdown ul li a,
ul.dropdown ul *.dir {
 border: none;
}

ul.dropdown-vertical li a,
ul.dropdown-vertical *.dir {
 border-width: 1px 0 1px 1px;
}

ul.dropdown-vertical-rtl li a,
ul.dropdown-vertical-rtl *.dir {
 border-width: 1px 1px 1px 0;
}


/* -- Drop-down open -- */

ul.dropdown li:hover > *.dir {
 position: relative;
 z-index: 600;
 margin: -1px 0;
 padding-top: 5px;
 padding-bottom: 5px;
 border-color: #f0f0f0 #666 #666 #f0f0f0;
 background-color: #fff;

 color: #0063dc;
}

ul.dropdown-horizontal li:hover > *.dir,
ul.dropdown-upward li:hover > *.dir,
ul.dropdown-linear li:hover > *.dir {
 float: left;
}

ul.dropdown-vertical li:hover > *.dir {
 margin: 0 -1px 0 0;
 padding-top: 4px;
 padding-bottom: 4px;
 padding-right: 7px;
 *position: static;
}

ul.dropdown-vertical-rtl li:hover > *.dir {
 margin: 0 0 0 -1px;
 padding-right: 6px;
 padding-left: 7px;
}

ul.dropdown-vertical-rtl > li:hover > *.dir {
 background-position: 6px 50%;
}

ul.dropdown-vertical ul li:hover > *.dir {
 padding-right: 0;
 padding-left: 0;
}

ul.dropdown ul li:hover > *.dir {
 position: static;
 z-index: 0;
 float: none;
 margin: 0;
 padding-top: 4px;
 padding-bottom: 4px;
 border: none;
}





7- Nvidia menü

index.template.php de bul
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <div id="main_menu">
 <ul class="dropmenu" id="menu_nav">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>
 </div>';
}
değiştir
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <ul class="dropdown dropdown-horizontal">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>';
}
index.css de en alta ekle
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}

ul.dropdown li {
 float: left;
 min-height: 1px;
 line-height: 1.3em;
 vertical-align: middle;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}

ul.dropdown {
 font: normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
 text-transform: uppercase;
}

 ul.dropdown li {
 padding: 7px 0;
 background-color: #000;
 color: #fff;
 line-height: normal;
 }

 ul.dropdown a:link,
 ul.dropdown a:visited { color: #fff; text-decoration: none; }
 ul.dropdown a:hover { color: #76b900; text-decoration: none; }
 ul.dropdown a:active { color: #fff; }

 /* -- level mark -- */

 ul.dropdown ul {
 width: 170px;
 background-color: #333;
 color: #fff;
 font-size: 11px;
 text-transform: none;
 filter: alpha(opacity=90);
 -moz-opacity: .9;
 KhtmlOpacity: .9;
 opacity: .9;
 }

 ul.dropdown ul li {
 background-color: transparent;
 color: #000;
 filter: none;
 }

 ul.dropdown ul li.hover,
 ul.dropdown ul li:hover {
 background-color: transparent;
 }

 ul.dropdown ul a:link,
 ul.dropdown ul a:visited { color: #fff; }
 ul.dropdown ul a:hover { color: #fff; text-decoration: none; }
 ul.dropdown ul a:active { color: #fff; }


/* -- Supporting class `dir` -- */

ul.dropdown *.dir {
 padding-right: 12px;
 background-image: none;
 background-position: 100% 50%;
 background-repeat: no-repeat;
}

ul.dropdown li a {
 display: block;
 padding: 7px 14px;
}


/* -- Base style override -- */

ul.dropdown li {
 padding: 0;
}


/* -- Base style reinitiate: post-override activities -- */

ul.dropdown li.dir {
 padding: 7px 20px 7px 14px;
}

ul.dropdown ul li.dir {
 padding-right: 15px;
}


/* -- Custom -- */

ul.dropdown ul a {
 padding: 4px 5px 4px 14px;
 width: 151px; /* Especially for IE */
}

ul.dropdown ul a:hover {
 background-color: #76b900;
}


/* -- Drop-down open -- */

ul.dropdown li:hover > a.dir {
 background-color: #2e2e2e;
 color: #76b900;
}

ul.dropdown ul li:hover > a.dir {
 background-color: #76b900;
 color: #fff;
}




8- vimeo menü

http://yadi.sk/d/ssLuCz6nKMMp5
burdan indirdiğiniz resimleri temanızın images klasörüne atın
index.template.php de bul
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <div id="main_menu">
 <ul class="dropmenu" id="menu_nav">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>
 </div>';
}
değiştir
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <ul id="nav" class="dropdown dropdown-horizontal"><li class="first"></li>';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 <li class="dir last"></li></ul>';
}
index.css de en alta ekle
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}

ul.dropdown li {
 float: left;
 min-height: 1px;
 line-height: 1.3em;
 vertical-align: middle;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}

ul.dropdown {
 background: transparent url(../images/box1-bottom-left.png) 0 100% no-repeat;
 font: normal 14px/normal Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

 ul.dropdown li {
 padding: 5px 10px;
 background-color: #172322;
 color: #fff;
 line-height: 22px;
 white-space: nowrap;
 }

 ul.dropdown li.first {
 padding-left: 15px;
 background: transparent url(../images/box1-bottom2.png) 0 100% no-repeat;
 height: 32px;
 }

 ul.dropdown li.last {
 padding-right: 15px;
 background: transparent url(../images/box1-bottom2.png) 100% 100% no-repeat;
 height: 22px;
 }

 ul.dropdown li.hover,
 ul.dropdown li:hover {
 color: #b0d730;
 }

 ul.dropdown a:link,
 ul.dropdown a:visited { color: #fff; text-decoration: none; }
 ul.dropdown a:hover { color: #b0d730; }
 ul.dropdown a:active { color: #0395cc; }

 /* -- level mark -- */

 ul.dropdown ul {
 left: -21px;
 width: 150px;
 padding: 0 16px;
 background: url(../images/box1-top.png) 50% 0 no-repeat;
 }

 ul.dropdown li.last ul {
 left: auto;
 right: 16px;
 }

 ul.dropdown ul li {
 height: auto;
 padding: 5px 15px;
 line-height: 1.3em;
 white-space: normal;
 }

 ul.dropdown ul li.first {
 padding-left: 0;
 background: #172322;
 }

 ul.dropdown ul li.last {
 padding-bottom: 10px;
 background: transparent url(../images/box1-bottom.png) 50% 100% no-repeat;
 }

 ul.dropdown ul li.first ul {
 top: 0;
 padding: 0 16px 0 0;
 background-image: url(../images/box1-outwards-top-right.png);
 }

 ul.dropdown ul li.first li.first {
 background-image: none;
 }

 ul.dropdown ul li.last {
 padding-right: 0;
 }

 ul.dropdown ul li.last ul {
 left: 100%;
 right: auto;
 top: -16px;
 }

 /* -- level mark -- */

 ul.dropdown ul ul {
 top: -12px;
 left: 100%;
 padding: 16px 0 0;
 background: transparent url(../images/box1-top-left.png) 0 0 no-repeat;
 }

 ul.dropdown ul ul li.first {
 padding-top: 10px;
 background: #172322 url(../images/box1-top-right.png) 100% 0 no-repeat;
 }



/* -- Supporting class `dir` -- */

ul.dropdown *.dir {
 padding-right: 20px;
 background-image: url(../images/nav-arrow-down.png);
 background-position: 100% 50%;
 background-repeat: no-repeat;
}


/* -- Components override -- */

ul.dropdown-horizontal ul *.dir {
 padding-right: 15px;
 background-image: url(../images/nav-arrow-right.png);
 background-position: 95% 50%;
 background-repeat: no-repeat;
}

ul.dropdown li a {
 display: block;
 padding: 5px 10px;
}


/* -- Base style override -- */

ul.dropdown li, ul.dropdown ul li {
 padding: 0;
}


/* -- Base style reinitiate: post-override activities -- */

ul.dropdown li.dir {
 padding: 5px 20px 5px 10px;
}

ul.dropdown ul li.dir {
 padding: 5px 15px;
}


/* -- Custom -- */

ul.dropdown ul a {
 padding-left: 15px;
}


/* -- Drop-down open -- */

ul.dropdown li:hover > *.dir {
 color: #b0d730;
}



9- retro menü

index.template.php de bul
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

echo '
<div id="main_menu">
<ul class="dropmenu" id="menu_nav">';

foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li id="button_', $act, '">
<a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
<span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
</a>';
if (!empty($button['sub_buttons']))
{
echo '
<ul>';

foreach ($button['sub_buttons'] as $childbutton)
{
echo '
<li>
<a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
<span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
</a>';
// 3rd level menus :)
if (!empty($childbutton['sub_buttons']))
{
echo '
<ul>';

foreach ($childbutton['sub_buttons'] as $grandchildbutton)
echo '
<li>
<a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
<span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
</a>
</li>';

echo '
</ul>';
}

echo '
</li>';
}
echo '
</ul>';
}
echo '
</li>';
}

echo '
</ul>
</div>';
}
değiştir
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

echo '
<ul class="nav">';

foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li id="button_', $act, '">
<a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
<span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
</a>';
if (!empty($button['sub_buttons']))
{
echo '
<ul>';

foreach ($button['sub_buttons'] as $childbutton)
{
echo '
<li>
<a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
<span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
</a>';
// 3rd level menus :)
if (!empty($childbutton['sub_buttons']))
{
echo '
<ul>';

foreach ($childbutton['sub_buttons'] as $grandchildbutton)
echo '
<li>
<a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
<span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
</a>
</li>';

echo '
</ul>';
}

echo '
</li>';
}
echo '
</ul>';
}
echo '
</li>';
}

echo '
</ul>
';
}
index.css de en alta ekle
.nav, .nav ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 1;
}

.nav {
/* Layout & positioning */
position: relative;
margin: auto; /* Centering the menu */
height: 46px;
width: 95%;
text-align: center;
border-radius: 5px;
/* Background & effects */
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
background: #557EA0;

}


.nav>li {
margin: 0;
line-height: 1;
padding: 0;
display: inline;
position: relative;

}

.nav::after, .nav::before {
content: "";
display: block;
position: absolute;
top: 6px;
height: 0px;
width: 0px;
border: 23px solid #557EA0;
z-index: -1;
}

/* The left ribbon */
.nav::before {
border-left-color: transparent;
left: -30px;z-index: 1;
}

/* The right ribbon */
.nav::after {
border-right-color: transparent;
right: -30px;z-index: 1;
}

.nav>li>a {
display: inline-block;
padding: 15px 20px;
position: relative;

font-family: 'Oswald', sans-serif;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
text-shadow: 1px 2px rgba(0, 0, 0, .2);

-webkit-transition: color .3s linear;
   -moz-transition: color .3s linear;
     -o-transition: color .3s linear;
    -ms-transition: color .3s linear;
        transition: color .3s linear;
}

.nav>li>a:hover, .nav>li:hover>a {
color: #eae8a5;
}

.nav>li>a::after {
content: "";
height: 15px;
width: 15px;

position: absolute;
right: -20px;
top: 16px;
display: block;
}

.nav>li:last-child>a::after {
display: none;
}

.nav ul {
position: absolute;
left: -9999px;
padding-top: 10px;
border-bottom: 1px solid #ccc;
opacity: 0;
-webkit-transition: opacity .3s linear;
-moz-transition: opacity .3s linear;
-o-transition: opacity .3s linear;
-ms-transition: opacity .3s linear;
}

.nav>li:hover>ul {
left: 0;
opacity: 1;
top: 30px;
}


.nav ul li:hover>ul {
left: 150px;
opacity: 1;
top: -11px;
padding-left: 12px;
border-bottom: 0;
box-shadow: none;
}

.nav ul li {
display: block;
position: relative;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
width: 150px;
text-align: justify;
z-index: 9;
background: #eee;
box-shadow: 3px 4px 0 rgba(0, 0, 0, .1);
-webkit-transition: background .3s linear;
-moz-transition: background .3s linear;
-ms-transition: background .3s linear;
-o-transition: background .3s linear;
}

.nav ul li a {
font-family: "Oswald", sans-serif;
font-size: 14px;
text-decoration: none;
display: block;
padding: 7px 12px 7px 20px;
color: #65c0bb;
-webkit-transition: color .3s linear;
-moz-transition: color .3s linear;
-ms-transition: color .3s linear;
-o-transition: color .3s linear;
}

.nav ul li:hover>a, .nav ul li a:hover {
color: #4db6b0;
}

.nav ul li:hover {
background: #f7f7f7;
}

.nav ul ul li:last-child {
border-bottom: 1px solid #ccc;
}

.nav ul ul li {
box-shadow: 3px 3px 0 rgba(0, 0, 0, .1);
}

.nav ul::after, .nav ul::before {
content: "";
display: block;
z-index: 1;
position: absolute;
height: 9px;
width: 9px;
}

.nav>li>ul::after {
border: 1px solid #ccc;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 5px;
left: 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}

.nav>li>ul::before {
height: 1px;
width: 12px;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 10px;
left: 24px;
z-index: 99;
}

.nav ul ul::after {
border: 1px solid #ccc;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 20px;
left: 8px;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
}

.nav ul ul::before {
height: 10px;
width: 1px;
background: #eee;
z-index: 99;
top: 20px;
left: 12px;
}



10- css menü

resim dosyaları indirin images klasörüne atın = http://yadi.sk/d/NnDgHzEKKqKD2
index.template.php de bul
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <div id="main_menu">
 <ul class="dropmenu" id="menu_nav">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 </ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>
 </div>';
}
değiştir
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <div id="menu">
    <ul class="menu">';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
 </a>';
 if (!empty($button['sub_buttons']))
 {
 echo '
 <div><ul>';

 foreach ($button['sub_buttons'] as $childbutton)
 {
 echo '
 <li>
 <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
 <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
 </a>';
 // 3rd level menus :)
 if (!empty($childbutton['sub_buttons']))
 {
 echo '
 <ul>';

 foreach ($childbutton['sub_buttons'] as $grandchildbutton)
 echo '
 <li>
 <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
 <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
 </a>
 </li>';

 echo '
 </ul>';
 }

 echo '
 </li>';
 }
 echo '
 <div></ul>';
 }
 echo '
 </li>';
 }

 echo '
 </ul>
 </div>';
}


index.css de en alta ekle
div#menu {
    height: 46px;
    padding-left: 24px;
    background: url(../images/menu/left.png) no-repeat;
    _background: url(../images/menu/left.gif) no-repeat;
    width:auto;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
div#menu ul.menu {
    padding-right: 24px;
    background: url(../images/menu/right.png) no-repeat right 0;
    _background: url(../images/menu/right.gif) no-repeat right 0;   
}

div#menu li {
    position: relative;
    margin: 0;
    padding: 0;
    display: block;
    float: left;
    z-index: 9;
    width: auto;
}
div#menu ul ul li {
    z-index: 9;
}
div#menu li div {
    list-style: none;
    float: left;
    position: absolute;
    z-index: 11;
    top: 39px;
    left: -18px;
    -left: 4px;
    visibility: hidden;
    width: 180px;
  margin: 0px 0 0 -4px;
    padding: 0;
    background: url(../images/menu/submenu-top.png) no-repeat 0px 0;
    -background: url(../images/menu/submenu-top.gif) no-repeat 0px 0;
}
div#menu ul ul {
  z-index: 12;
  width: 180px;
    padding: 0px 0px 12px 0px;
    -padding: 0px 0px 3px 0px;   
    background: url(../images/menu/submenu-bottom.png) no-repeat 0px bottom;
    -background: #E4E4E2 none;       
    margin: 14px 0 0 0;   
    -margin: 5px 0 0 0;     
}
div#menu li:hover>div {
    visibility: visible;
}

div#menu a {
    position: relative;
    z-index: 10;
    height: 38px;
    display: block;
    float: left;
    line-height: 38px;
    text-decoration: none;
    margin-top: 1px;
    white-space: nowrap;
    width: auto;
    padding-right:5px;
    text-align:center;
}
div#menu span {
    margin-top: 2px;
    padding-left: 15px;
    color: #fff;
    font: normal 13px Tahoma;
    background: none;
    line-height: 38px;
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 95% 0;
    text-align: center;
}

/* menu::level1 */
div#menu a {
    padding: 0 15px 0 0;
    line-height: 38px;
    height: 46px;
    _margin-right: 1px;
    background: none;
    font-weight:bold;   

}
div#menu span {
    font-weight:bold;
}
div#menu a:hover{
    background-image: url(../images/menu/selected-sub.png);
    background-repeat: repeat-x;
    background-position: right -1px;   
    -background: url(../images/menu/selected-sub.gif) repeat-x right -1px;
}
div#menu li.current a,
div#menu ul.menu>li:hover>a {
    background-image: url(../images/menu/selected-sub.png);
    background-repeat: repeat-x;
    background-position: right -1px; 
    -background: url(../images/menu/selected-sub.gif)  repeat-x right -1px;
}
div#menu a:hover span{
  color: #000000;
}
div#menu ul.menu>li:hover>a span {
  color: #000000;
}
div#menu li {}
div#menu li.last { background: none; }


/* menu::level2 */
div#menu ul ul li {
    background-image: url(../images/menu/sep-sub.png);
    background-repeat: repeat-x;
    background-position: left bottom;
    margin: 0;
    padding: 0;
}
div#menu ul ul li:hover {
    background-image: url(../images/menu/sub-item-hover.gif);
    background-color: #717171;
    background-repeat: repeat-x;
    background-position: left top;
}
div#menu ul ul a {
  color: #000000;
    height: auto;
    float: none;
    display: block;
    line-height: 25px;
    font-size: 13px;
    z-index: -1;
    padding: 6px 0 6px 0px;
    white-space: normal;
    width: 166px;
    margin: 0 0px 0 13px;
    background: none;
}
   
div#menu ul ul a span {
    color: #000000;
  padding: 0 3px;
    line-height: 25px;
    font-size: 13px;
    font-weight: normal;
    margin:0;   
}
div#menu li.current ul a,
div#menu li.current ul a span {
    background: none;
}
div#menu ul ul a:hover {
background: none;
  color: #fff;
}
div#menu ul ul a:hover span {
  background: none;
  color: #fff;
}
div#menu ul ul a.parent {
  background: url(../images/menu/submenu-pointer.png) no-repeat right top;
  -background: url(../images/menu/submenu-pointer.gif) no-repeat right top; 
  margin-right: -1px;
}
div#menu ul ul a.parent span {
  padding-right: 26px;
}
div#menu ul ul a.parent:hover {
  background: url(../images/menu/submenu-pointer-hover.gif) no-repeat right top;
  -background: url(../images/menu/submenu-pointer.gif) no-repeat right top; 
}
div#menu ul ul a.parent:hover span {
}
div#menu ul ul span {

    margin-top: 0;
    text-align: left;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
    width: 100%;
}

/* menu::level3 */

div#menu ul ul div {
  width: 180px;
  padding: 0;
    background: url(../images/menu/subsubmenu-top.png) no-repeat 0px 0;
    -background: url(../images/menu/subsubmenu-top.gif) no-repeat 0px 0;  
    margin: -32px 0 0 198px !important;
    margin: -32px 0 0 176px;
}
div#menu ul ul ul {
    padding: 11px 0px 9px 0px;
    margin: 20px 0 0 0;
}
div#menu ul ul div li {
    position:relative;
    top:-10px;
}

/* lava lamp */
div#menu li.back {
    background: url(../images/menu/selected-sub.png) no-repeat 0 0;
    -background: url(../images/menu/selected-sub.gif) no-repeat 0 0;   
    width: 5px;
    height: 46px;
    z-index: 8;
    position: absolute;
    padding: 0;
    margin: 0px 0 0 0;
}


div#menu li.back .left {
    padding:0;
    width:auto;
    background: url(../images/menu/selected-sub.png) repeat-x right 0;
    -background: url(../images/menu/selected-sub.gif) repeat-x right 0;     
    height: 46px;
    margin: 0 0 0 5px;
    float: none;
    position: relative;
    top: 0;
    left: 0;
    visibility: visible;
}


11- düz menü

resim dosyaları indirin images klasörüne atın = http://yadi.sk/d/luAJ1c0SLQymv
index.template.php de bul
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

echo '
<div id="main_menu">
<ul class="dropmenu" id="menu_nav">';

foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li id="button_', $act, '">
<a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
<span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
</a>';
if (!empty($button['sub_buttons']))
{
echo '
<ul>';

foreach ($button['sub_buttons'] as $childbutton)
{
echo '
<li>
<a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
<span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
</a>';
// 3rd level menus :)
if (!empty($childbutton['sub_buttons']))
{
echo '
<ul>';

foreach ($childbutton['sub_buttons'] as $grandchildbutton)
echo '
<li>
<a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
<span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
</a>
</li>';

echo '
</ul>';
}

echo '
</li>';
}
echo '
</ul>';
}
echo '
</li>';
}

echo '
</ul>
</div>';
}
değiştir
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
 global $context, $settings, $options, $scripturl, $txt;

 echo '
 <div class="topnav" id="topnav">
 <ul >';

 foreach ($context['menu_buttons'] as $act => $button)
 {
 echo '
 <li id="button_', $act, '">
 <a class="', $button['active_button'] ? ' ' : '', '" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
 <span class="', isset($button['is_last']) ? 'last ' : '', '">', $button['title'], '</span>
 </a>';
 
 echo '
 </li>';
 }

 echo '
 </ul>
 </div> ';
}
index.css de en alta ekle
.topnav {
background:url(../images/bg.jpg)  left top;
height: 53px;
overflow: hidden;
width: 100%;
}
.topnav ul {

margin:0 20px;

padding:0;

list-style:none;

}

.topnav ul li {

float:left;

font:11px Arial, Helvetica, sans-serif;

color:#fff;

text-transform:uppercase;

}

.topnav ul li a {

display:block;

color:#fff;

text-decoration:none;

background:url(../images/navli.png) no-repeat left top;

padding:18px 10px 17px 65px;

}

.topnav ul li a:hover {

color:#4cc8f3;

background:url(../images/navlih.png) no-repeat left top;

}
3085
bir istek üzerine biraz uğraştım bu şekle getirebildim daha fazlasını yapmak elinizde





hemen işlemlerimizi anlatmaya başlayım default temaya göre anlatım başka temalarda farklılık arz edebilir
burdan elimden geldikçe yardımcı olmaya çalışırım
index.template.php bul
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?fin20"></script>üstüne ekle
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/jquery.min.js"></script>
 <script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/jquery.leanModal.min.js"></script>
 <script type="text/javascript">
 $(function() {
     $("a[rel*=leanModal]").leanModal({ top : 200, closeButton: ".modal_close" });
 });
 </script>
index.template.php bul
<div id="header">değiştir
<div class="user">';
 // If the user is logged in, display stuff like their name, new messages, etc.
 if ($context['user']['is_logged'])
 {
 if (!empty($context['user']['avatar']))
 echo '<div id="signup">
                   <div id="signup-ct">
 <p class="avatar">', $context['user']['avatar']['image'], '</p>';
 echo '
 <ul class="reset">
 <li class="greeting">', $txt['hello_member_ndt'], ' <span>', $context['user']['name'], '</span></li>
 <li><a href="', $scripturl, '?action=unread">', $txt['unread_since_visit'], '</a></li>
 <li><a href="', $scripturl, '?action=unreadreplies">', $txt['show_unread_replies'], '</a></li>';

 // Is the forum in maintenance mode?
 if ($context['in_maintenance'] && $context['user']['is_admin'])
 echo '
 <li class="notice">', $txt['maintain_mode_on'], '</li>';

 // Are there any members waiting for approval?
 if (!empty($context['unapproved_members']))
 echo '
 <li>', $context['unapproved_members'] == 1 ? $txt['approve_thereis'] : $txt['approve_thereare'], ' <a href="', $scripturl, '?action=admin;area=viewmembers;sa=browse;type=approve">', $context['unapproved_members'] == 1 ? $txt['approve_member'] : $context['unapproved_members'] . ' ' . $txt['approve_members'], '</a> ', $txt['approve_members_waiting'], '</li>';

 if (!empty($context['open_mod_reports']) && $context['show_open_reports'])
 echo '
 <li><a href="', $scripturl, '?action=moderate;area=reports">', sprintf($txt['mod_reports_waiting'], $context['open_mod_reports']), '</a></li>';

 echo '
 <li>', $context['current_time'], '</li>
 </ul></div></div>';
 }
 // Otherwise they're a guest - this time ask them to either register or login - lazy bums...
 elseif (!empty($context['show_login_bar']))
 {
 echo '
 <script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sha1.js"></script>
 
<div id="signup">
  <div id="signup-ct">
   <p style="text-align: center;">',$context['forum_name'], ' </p>
    
    
      
<form id="guest_form2" action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
  <div class="info">', sprintf($txt['welcome_guest'], $txt['guest_title']), '</div>
  <div class="txt-fld">
  <label for="">', $txt['username'], ':</label>
  <input type="text" name="user" size="10" class="input_text" />
  </div>
  <div class="txt-fld">
        <label for="">', $txt['password'], ':</label>
  <input type="password" name="passwrd" size="10" class="input_password" />
   </div>
   <div class="one_cookielength">
  <select class="modal_cookielength" name="cookielength">
    <option value="60">', $txt['one_hour'], '</option>
    <option value="1440">', $txt['one_day'], '</option>
    <option value="10080">', $txt['one_week'], '</option>
    <option value="43200">', $txt['one_month'], '</option>
    <option value="-1" selected="selected">', $txt['forever'], '</option>
  </select> </div>
  <br />
   <div class="btn-fld">
        <button type="submit" class="button_submit" />', $txt['login'], '</button>
      </div>
</form>
</div>
</div>';
 }

 echo '
 </div><div id="header">';
if ($context['user']['is_logged'])
 {echo'<a id="go" rel="leanModal" name="signup" href="#signup">', $txt['profile'], '</a>';}
 elseif (!empty($context['show_login_bar']))
 {echo'<a id="go" rel="leanModal" name="signup" href="#signup">', $txt['login'], '</a>';}
 echo '
index.css de en alta ekle
#guest_form2 .info {text-align: center;width: 460px;margin-left: auto;margin-right: auto;}
#guest_form2 .info a{color: #fff;}
#lean_overlay {position: fixed;z-index: 10000;top: 0px;left: 0px;height:100%;width:100%;background: #fff;display: none;}
#signup {padding-bottom: 2px;display:none;background: #032a46;color: #A5CAE4;font-family: litios;font-size: 12px;margin-bottom: 0px;margin-top: -28px;}
#signup  .avatar{text-align: center;}
#signup  .reset{text-align: center;}
#signup-header {background: url(../login_cd/botton.png);padding: 18px 18px 0 18px;border-bottom: 1px solid #CCC;border-top-left-radius: 5px;-moz-border-radius-topleft: 5px;-webkit-border-top-left-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;-webkit-border-top-right-radius: 5px;}
#signup-header h2 {color: #444;font-size: 2em;font-weight: 700;margin-bottom: 10px;text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);}
#signup-header p {color: #444;font-size: 1.3em;margin: 0;text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);text-shadow: none;float: none !important;  margin: 0 1em 1em 0;  padding: 0;}
#signup .txt-fld {position: relative;width: 364px;padding: 14px 20px;text-align: right;margin-left: auto;margin-right: auto;}
#signup .btn-fld {width: 364px;overflow: hidden;text-align: center;margin-left: auto;margin-right: auto;}
#signup .btn-fld .button_submit{font-style: normal;font-size: 12px;font-family: Calibri,'Trebuchet MS',Verdana,Geneva,Arial,Helvetica,sans-serif;color: #000;padding: 0px 6px;border-width: 1px;border-style: solid;border-right: 1px solid #DDDDEB;border-left: 1px solid #DDDDEB;-moz-border-top-colors: none;-moz-border-right-colors: none;-moz-border-bottom-colors: none;-moz-border-left-colors: none;border-image: none;border-color: #FFF #DDDDEB #B3B3BD;border-radius: 7px;text-align: center;box-shadow: 0px 1px 4px 0px #C8C8D2;
text-shadow: 0px 0px 0px transparent, 0px -1px 2px #FFF;outline: medium none;line-height: 21px;display: inline-block;cursor: pointer;-moz-box-sizing: border-box;height: 23px;}
#signup .txt-fld label {display: block;float: left;width: 100px;padding-top: 8px;color: #A5CAE4;font-size: 1.3em;text-align: left;}
#signup .txt-fld input {background: #021f33;-moz-border-radius: 5px;-webkit-border-radius: 5px;color: #65a5d1;box-shadow: inset 3px 3px 6px #01121f, 1px 1px 1px #04395e;border: none;
height: 28px;width: 230px; padding-left: 8px;font-size:8pt;outline: none;}
#signup .txt-fld input.good_input {background: #DEF5E1;}
#signup .txt-fld input.error_input {background: #FDE0E0;}
p.error {position: absolute;bottom: 48px;right: 20px;width: 262px;color: #FFF;font-size: 1.1em;padding-bottom: 5px;background: url(../img/error-arw.png) 20px bottom no-repeat;text-align: left;margin: 0;text-shadow: none;}
p.error span {display: inline-block;background: #D43636;padding: 6px;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;}
.txt-fld input:focus, .txt-fld textarea:focus {background-color: #FAF9DC;}
.modal_close {position: absolute;top: 12px;right: 12px;display: block;width: 14px;height: 14px;background: url(../login_cd/CloseIcon.gif);z-index: 2;}
.one_cookielength .modal_cookielength { background: lavenderblush;}
.one_cookielength {text-align: center;}
.modal_cookielength {background: rgb(102, 191, 241);border: 1px solid #454545;border-radius: 5px;}
*:focus  {outline: none;}  
input:hover, textarea:hover, button:hover, select:hover {border: solid px rgb(23, 102, 175);}
.modal_cookielength option { background: lemonchiffon;border-radius: 5px;}
#go {font-size: 16px;font-family: litios;color: #65a5d1;background-color: #032A46;text-decoration: none;padding: 0 5px; margin-right: 20px;border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; -khtmlborder-bottom-right-radius: 10px; border-bottom-left-radius: 10px; -webkit-border-bottom-left-radius: 10px;  -moz-border-radius-bottomleft: 10px;   -khtml-border-bottom-left-radius: 10px;float: right; right: 0px; bottom: -20px; text-align: center;  z-index: 1;line-height: 20px; box-shadow: 0px 2px 5px #032A46;  -webkit-box-shadow: 0px 2px 5px #032A46; -moz-box-shadow: 0px 2px 5px #032A46;  -khtml-box-shadow: 0px 2px 5px #032A46;}
ekte verdiğim js dosylarını default scripts klasörüne atın

Son olarak diğer giriş panelini silmek isteyenler olacaktır
index.template.php burayı bulun
<div id="upper_section" class="middletext"', empty($options['collapse_header']) ? '' : ' style="display: none;"', '>
 <div class="user">';
bu kısım hariç
<div id="upper_section" class="middletext"', empty($options['collapse_header']) ? '' : ' style="display: none;"', '> burdan başlayarak silin
<div class="user">';

 // If the user is logged in, display stuff like their name, new messages, etc.
 if ($context['user']['is_logged'])
 {
 if (!empty($context['user']['avatar']))
 echo '
 <p class="avatar">', $context['user']['avatar']['image'], '</p>';
 echo '
 <ul class="reset">
 <li class="greeting">', $txt['hello_member_ndt'], ' <span>', $context['user']['name'], '</span></li>
 <li><a href="', $scripturl, '?action=unread">', $txt['unread_since_visit'], '</a></li>
 <li><a href="', $scripturl, '?action=unreadreplies">', $txt['show_unread_replies'], '</a></li>';

 // Is the forum in maintenance mode?
 if ($context['in_maintenance'] && $context['user']['is_admin'])
 echo '
 <li class="notice">', $txt['maintain_mode_on'], '</li>';

 // Are there any members waiting for approval?
 if (!empty($context['unapproved_members']))
 echo '
 <li>', $context['unapproved_members'] == 1 ? $txt['approve_thereis'] : $txt['approve_thereare'], ' <a href="', $scripturl, '?action=admin;area=viewmembers;sa=browse;type=approve">', $context['unapproved_members'] == 1 ? $txt['approve_member'] : $context['unapproved_members'] . ' ' . $txt['approve_members'], '</a> ', $txt['approve_members_waiting'], '</li>';

 if (!empty($context['open_mod_reports']) && $context['show_open_reports'])
 echo '
 <li><a href="', $scripturl, '?action=moderate;area=reports">', sprintf($txt['mod_reports_waiting'], $context['open_mod_reports']), '</a></li>';

 echo '
 <li>', $context['current_time'], '</li>
 </ul>';
 }
 // Otherwise they're a guest - this time ask them to either register or login - lazy bums...
 elseif (!empty($context['show_login_bar']))
 {
 echo '
 <script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sha1.js"></script>
 <form id="guest_form" action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
 <div class="info">', sprintf($txt['welcome_guest'], $txt['guest_title']), '</div>
 <input type="text" name="user" size="10" class="input_text" />
 <input type="password" name="passwrd" size="10" class="input_password" />
 <select name="cookielength">
 <option value="60">', $txt['one_hour'], '</option>
 <option value="1440">', $txt['one_day'], '</option>
 <option value="10080">', $txt['one_week'], '</option>
 <option value="43200">', $txt['one_month'], '</option>
 <option value="-1" selected="selected">', $txt['forever'], '</option>
 </select>
 <input type="submit" value="', $txt['login'], '" class="button_submit" /><br />
 <div class="info">', $txt['quick_login_dec'], '</div>';

 if (!empty($modSettings['enableOpenID']))
 echo '
 <br /><input type="text" name="openid_identifier" id="openid_url" size="25" class="input_text openid_login" />';

 echo '
 <input type="hidden" name="hash_passwrd" value="" />
 </form>';
 }

 echo '
 </div>


takıldığınız yerleri sorun elimizden geldikçe yardımcı oluruz
3086
smf nin arama kutusundan sıkılan arkadaşlar için alternatifler sunalım istedik zamanla daha fazla smf için css3 search box ekleyecez

bu resimide temanızın images klasörüne yükleyin = http://teknoromi.com/resim/uploads/2014/03/search.png
index.template.php de bul
<div class="news normaltext">
<form id="search_form" action="', $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '">
<input type="text" name="search" value="" class="input_text" />&nbsp;
<input type="submit" name="submit" value="', $txt['search'], '" class="button_submit" />
<input type="hidden" name="advanced" value="0" />';

// Search within current topic?
if (!empty($context['current_topic']))
echo '
<input type="hidden" name="topic" value="', $context['current_topic'], '" />';
// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))
echo '
<input type="hidden" name="brd[', $context['current_board'], ']" value="', $context['current_board'], '" />';

echo '</form>';
değiştir
<div class="news normaltext"><div class="searchdiv">
<form class="searchbox" action="', $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '">
<input type="search" placeholder="Search" name="search" value="" class="input_text"/>
                   <button type="submit" value="search" name="submit" value="', $txt['search'], '" >&nbsp;</button>

<input type="hidden" name="advanced" value="0" />';


// Search within current topic?
if (!empty($context['current_topic']))
echo '
<input type="hidden" name="topic" value="', $context['current_topic'], '" />';
// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))
echo '
<input type="hidden" name="brd[', $context['current_board'], ']" value="', $context['current_board'], '" />';

echo '</form></div>';
index.css de en alta ekle
.searchdiv{
float: right;
width: 100%;
}
.searchbox{
    background-color:#fffbf8;
    padding:13px;
    width:335px;
float: right;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    border-radius:6px;
    -webkit-box-shadow:
        0 2px 4px 0 rgba(72, 72, 72, 0.83),
        0 10px 15px 0 rgba(126, 126, 126, 0.12),
        0 -2px 6px 1px rgba(199, 199, 199, 0.55) inset,
        0 2px 4px 2px rgba(255, 255, 255, 0.83) inset;
    -moz-box-shadow:
        0 2px 4px 0 rgba(72, 72, 72, 0.83),
        0 10px 15px 0 rgba(126, 126, 126, 0.12),
        0 -2px 6px 1px rgba(199, 199, 199, 0.55) inset,
        0 2px 4px 2px rgba(255, 255, 255, 0.83) inset;
    box-shadow:
        0 2px 4px 0 rgba(72, 72, 72, 0.83),
        0 10px 15px 0 rgba(126, 126, 126, 0.12),
        0 -2px 6px 1px rgba(199, 199, 199, 0.55) inset,
        0 2px 4px 2px rgba(255, 255, 255, 0.83) inset;
}
input[type="search"]{
    width:250px;
    height:30px;
    padding-left:15px;
    border-radius:6px;
    border:none;
    color:#939393;
    font-weight:500;
    background-color:#fffbf8;
    -webkit-box-shadow:
        0 -2px 2px 0 rgba(199, 199, 199, 0.55),
        0 1px 1px 0 #fff,
        0 2px 2px 1px #fafafa,
        0 2px 4px 0 #b2b2b2 inset,
        0 -1px 1px 0 #f2f2f2 inset,
        0 15px 15px 0 rgba(41, 41, 41, 0.09) inset;
    -moz-box-shadow:
        0 -2px 2px 0 rgba(199, 199, 199, 0.55),
        0 1px 1px 0 #fff,
        0 2px 2px 1px #fafafa,
        0 2px 4px 0 #b2b2b2 inset,
        0 -1px 1px 0 #f2f2f2 inset,
        0 15px 15px 0 rgba(41, 41, 41, 0.09) inset;
    box-shadow:
        0 -2px 2px 0 rgba(199, 199, 199, 0.55),
        0 1px 1px 0 #fff,
        0 2px 2px 1px #fafafa,
        0 2px 4px 0 #b2b2b2 inset,
        0 -1px 1px 0 #f2f2f2 inset,
        0 15px 15px 0 rgba(41, 41, 41, 0.09) inset;
}
button[type="submit"]{
    width:35px;
    height:30px;
   background-image: url('../images/search.png');
    background-repeat: no-repeat;
    background-position: 10px 5px;
    background-color:transparent;
    -webkit-background-size:20px 20px;
    background-size:20px 20px;
    border:none;
    cursor:pointer;
}
input[type="search"]:focus{
    outline:0;
}




bu resimide temanızın images klasörüne yükleyin =http://teknoromi.com/resim/uploads/2014/03/search%281%29.png
index.template.php de bul
<div class="news normaltext">
<form id="search_form" action="', $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '">
<input type="text" name="search" value="" class="input_text" />&nbsp;
<input type="submit" name="submit" value="', $txt['search'], '" class="button_submit" />
<input type="hidden" name="advanced" value="0" />';

// Search within current topic?
if (!empty($context['current_topic']))
echo '
<input type="hidden" name="topic" value="', $context['current_topic'], '" />';
// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))
echo '
<input type="hidden" name="brd[', $context['current_board'], ']" value="', $context['current_board'], '" />';

echo '</form>';
değiştir
<div class="news normaltext">
<form id="search" action="', $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '">
<input type="text" name="search" value="" class="input_text" />&nbsp;
<input type="hidden" name="advanced" value="0" />';

// Search within current topic?
if (!empty($context['current_topic']))
echo '
<input type="hidden" name="topic" value="', $context['current_topic'], '" />';
// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))
echo '
<input type="hidden" name="brd[', $context['current_board'], ']" value="', $context['current_board'], '" />';

echo '</form>';
index.css de en alta ekle
#search {

}

#search input[type="text"] {
    background: url(../images/search.png) no-repeat 10px 6px #fcfcfc;
    border: 1px solid #d1d1d1;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 200px;
    }




index.template.php de bul
<div class="news normaltext">
<form id="search_form" action="', $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '">
<input type="text" name="search" value="" class="input_text" />&nbsp;
<input type="submit" name="submit" value="', $txt['search'], '" class="button_submit" />
<input type="hidden" name="advanced" value="0" />';

// Search within current topic?
if (!empty($context['current_topic']))
echo '
<input type="hidden" name="topic" value="', $context['current_topic'], '" />';
// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))
echo '
<input type="hidden" name="brd[', $context['current_board'], ']" value="', $context['current_board'], '" />';

echo '</form>';
değiştir
<div class="news normaltext"><div class="searchdiv">
<form id="search_form" action="', $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '">
<input type="text" name="search" value="" class="input_text" />&nbsp;
<input type="submit" name="submit" value="', $txt['search'], '" class="button_submit" />
<input type="hidden" name="advanced" value="0" />';

// Search within current topic?
if (!empty($context['current_topic']))
echo '
<input type="hidden" name="topic" value="', $context['current_topic'], '" />';
// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))
echo '
<input type="hidden" name="brd[', $context['current_board'], ']" value="', $context['current_board'], '" />';

echo '</form></div>';
index.css de en alta ekle
.searchdiv{
float: right;
width: 100%;
}
#search_form {
background: #e1e1e1;
width: 216px;
height:20px;
background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225)));
background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%);
border-radius: 17px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
float: right;
}
#search_form input[type="text"]{
background: #fafafa;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));
background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%);

border: 0;
border-bottom: 1px solid #fff;
border-right: 1px solid rgba(255,255,255,.8);
font-size: 12px;
margin: 4px;
padding: 5px;
width: 125px;
height:11px;
border-radius: 17px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
}

#search_form  input[type="text"]:focus{
outline: none;
background: #fff;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235)));
background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%);
}

#search_form  input[type="submit"]{
background: #44921f;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21)));
background: -moz-linear-gradient( center top, #06BCF9 0%, #058AB6 15%, #035773 88%, #033E52 100%);
border: 0;
color: #eee;
cursor: pointer;
float: right;
font: 14px Arial, Helvetica, sans-serif;
font-weight: bold;
height: 21px;
margin: 4px 4px 0;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
width: 55px;
outline: none;
padding: 0px;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
-moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
}
#search_form  input[type="submit"]:hover {
background: #058AB6;
background: gradient( center top, #033E52 0%, #035773 15%, #058AB6  80%, #06BCF9 100%);
}
#search_form  input[type="submit"]:active {
background: #058AB6;
background: gradient( center top, #033E52 0%, #035773 15%, #058AB6  80%, #06BCF9 100%);
}


3087
Çeşitli / Smf ruh halim modu
18 Mayıs 2014 04:34

ekteki teknoromi klasörünü default temanızın images klasörüne atın
Display.template.php bul
// Done with the information about the poster... on to the post itself.üstüne ekle
if (empty($message['member']['options']['teknoromi'])) {
                  $message['member']['options']['teknoromi']='Utangac';
              }
              echo '
                
  <b>Ruh Halim:</b>
  <img src="', $settings['default_images_url'], '/teknoromi/', $message['member']['options']['teknoromi'], '.gif" /> ';

Profile.template.php bul
</dl>';

 // Are there any custom profile fields - if so print them!
değiştir
</dl><dl><b>Ruh Halim: </b>
                              <dd><select name="default_options[teknoromi]">                          
                              <option', @$context['member']['options']['teknoromi'] == 'Agresif' ? ' selected="selected"' : '', '>Agresif</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Asayis' ? ' selected="selected"' : '', '>Asayis</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Arsiz' ? ' selected="selected"' : '', '>Arsiz</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Bezgin' ? ' selected="selected"' : '', '>Bezgin</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Cadaloz' ? ' selected="selected"' : '', '>Cadaloz</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Caliskan' ? ' selected="selected"' : '', '>Caliskan</option>
  <option', @$context['member']['options']['teknoromi'] == 'Catlak' ? ' selected="selected"' : '', '>Catlak</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Coskulu' ? ' selected="selected"' : '', '>Coskulu</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Cilgin' ? ' selected="selected"' : '', '>Cilgin</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Dahi' ? ' selected="selected"' : '', '>Dahi</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Dalgin' ? ' selected="selected"' : '', '>Dalgin</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Dengeli' ? ' selected="selected"' : '', '>Dengeli</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Dertli' ? ' selected="selected"' : '', '>Dertli</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Evhamli' ? ' selected="selected"' : '', '>Evhamli</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Geveze' ? ' selected="selected"' : '', '>Geveze</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Hasta' ? ' selected="selected"' : '', '>Hasta</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Havali' ? ' selected="selected"' : '', '>Havali</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Hevesli' ? ' selected="selected"' : '', '>Hevesli</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Heyecanli' ? ' selected="selected"' : '', '>Heyecanli</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Huysuz' ? ' selected="selected"' : '', '>Huysuz</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Kacik' ? ' selected="selected"' : '', '>Kacik</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Kararsiz' ? ' selected="selected"' : '', '>Kararsiz</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Keyifsiz' ? ' selected="selected"' : '', '>Keyifsiz</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Kopmus' ? ' selected="selected"' : '', '>Kopmus</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Korsan' ? ' selected="selected"' : '', '>Korsan</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Masum' ? ' selected="selected"' : '', '>Masum</option>
  <option', @$context['member']['options']['teknoromi'] == 'Maymun' ? ' selected="selected"' : '', '>Maymun</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Melek' ? ' selected="selected"' : '', '>Melek</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Merakli' ? ' selected="selected"' : '', '>Merakli</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Mesgul' ? ' selected="selected"' : '', '>Mesgul</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Mutlu' ? ' selected="selected"' : '', '>Mutlu</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Neseli' ? ' selected="selected"' : '', '>Neseli</option>
  <option', @$context['member']['options']['teknoromi'] == 'Olgun' ? ' selected="selected"' : '', '>Olgun</option>
                              <option', @$context['member']['options']['teknoromi'] == 'Rahat' ? ' selected="selected"' : '', '>Rahat</option>  
                              <option', @$context['member']['options']['teknoromi'] == 'Rahmetli' ? ' selected="selected"' : '', '>Rahmetli</option>  
                              <option', @$context['member']['options']['teknoromi'] == 'Sakaci' ? ' selected="selected"' : '', '>Sakaci</option>  
                              <option', @$context['member']['options']['teknoromi'] == 'Sanatci' ? ' selected="selected"' : '', '>Sanatci</option>  
                              <option', @$context['member']['options']['teknoromi'] == 'Sancili' ? ' selected="selected"' : '', '>Sancili</option>  
                              <option', @$context['member']['options']['teknoromi'] == 'Saskin' ? ' selected="selected"' : '', '>Saskin</option>  
                              <option', @$context['member']['options']['teknoromi'] == 'Seytani' ? ' selected="selected"' : '', '>Seytani</option>  
                              <option', @$context['member']['options']['teknoromi'] == 'Simarik' ? ' selected="selected"' : '', '>Simarik</option>  
                              <option', @$context['member']['options']['teknoromi'] == 'Soguk' ? ' selected="selected"' : '', '>Soguk</option>  
                              <option', @$context['member']['options']['teknoromi'] == 'Soytari' ? ' selected="selected"' : '', '>Soytari</option>  
                              <option', @$context['member']['options']['teknoromi'] == 'Sporcu' ? ' selected="selected"' : '', '>Sporcu</option>  
                              <option', @$context['member']['options']['teknoromi'] == 'Supheci' ? ' selected="selected"' : '', '>Supheci</option>  
                              <option', @$context['member']['options']['teknoromi'] == 'Tuhaf' ? ' selected="selected"' : '', '>Tuhaf</option>  
                              <option', @$context['member']['options']['teknoromi'] == 'Ucube' ? ' selected="selected"' : '', '>Ucube</option>  
                              <option', @$context['member']['options']['teknoromi'] == 'Utangac' ? ' selected="selected"' : '', '>Utangac</option>  
                              <option', @$context['member']['options']['teknoromi'] == 'Uykulu' ? ' selected="selected"' : '', '>Uykulu</option>  
                              <option', @$context['member']['options']['teknoromi'] == 'Uykusuz' ? ' selected="selected"' : '', '>Uykusuz</option>  
                              <option', @$context['member']['options']['teknoromi'] == 'Uyuz' ? ' selected="selected"' : '', '>Uyuz</option>  
                              <option', @$context['member']['options']['teknoromi'] == 'Yalniz' ? ' selected="selected"' : '', '>Yalniz</option>  
                              <option', @$context['member']['options']['teknoromi'] == 'Yasakli' ? ' selected="selected"' : '', '>Yasakli</option>  
                              <option', @$context['member']['options']['teknoromi'] == 'Yorgun' ? ' selected="selected"' : '', '>Yorgun</option>  
                              </select></dd>
  ', !empty($context['member']['options']['teknoromi']) ? '' . $context['member']['options']['teknoromi'] . '' : '', '</dl>';
// Are there any custom profile fields - if so print them!
3088
Anlatım default temaya göredir başka temalarda farklılık arz edebilir
örnek resim

admin panelden ayarlamak için yapılandırma>kullanılan tema
bölümüne gelip kutuları aktif ediniz



html kısıma linklerinizi ekleyin örnek:
<li><a href="#">örnek</a></li><li><a href="#">örnek2</a></li>li tagları arasına yazdıklarınız otomatik sıralanır

index.template.php bul
<div id="footer_section"><div class="frame">
 <ul class="reset">

değiştir
<div id="fottmenu">
 <div class="fottcontainer p1">
 <div class="card">
 <div class="obverse">
 <h1>SMF</h1>
 <img src="' . $settings['images_url'] . '/195.png" alt="Teknoromi" />
 </div>
 <div class="reverse">
 <h2>Smf Linkleri</h2>
 <ol>

index.template.php bul
</ul>';

 // Show the load time?

değiştir
<li><a href="http://teknoromi.com" title="teknoloji">Footer Menu</a></li></ol>';
 echo ' </div>
 </div>
 </div>
 <div class="fottcontainer p2">
 <div class="card">';
        if (!empty($settings['active_teknobox1'])) {
        echo '<div class="obverse"><h1>',$settings['url_teknobox1b'],'</h1><img src="',$settings['url_teknobox1i'],'" alt="" /></div>
 <div class="reverse"><h2>',$settings['url_teknobox1t'],'</h2><ol>',$settings['url_teknobox1'],'</ol></div>';
        }
 echo '
 </div>
 </div>
 <div class="fottcontainer p3">
 <div class="card">
 ';
  if (!empty($settings['active_teknobox2'])) {
        echo '<div class="obverse"><h1>',$settings['url_teknobox2b'],'</h1><img src="',$settings['url_teknobox2i'],'" alt="" /></div>
 <div class="reverse"><h2>',$settings['url_teknobox2t'],'</h2><ol>',$settings['url_teknobox2'],'</ol></div>';
        }
 echo '
 </div>
 </div>
 <div class="fottcontainer p4">
 <div class="card">';
  if (!empty($settings['active_teknobox3'])) {
        echo '<div class="obverse"><h1>',$settings['url_teknobox3b'],'</h1><img src="',$settings['url_teknobox3i'],'" alt="" /></div>
 <div class="reverse"><h2>',$settings['url_teknobox3t'],'</h2><ol>',$settings['url_teknobox3'],'</ol></div>';
        }
 echo '
 </div>
 </div>
</div>';
 // Show the load time?


settings.template.php bul
array(
 'id' => 'forum_width',
 'label' => $txt['forum_width'],
 'description' => $txt['forum_width_desc'],
 'type' => 'text',
 'size' => 8,
 ),

değiştir
array(
 'id' => 'forum_width',
 'label' => $txt['forum_width'],
 'description' => $txt['forum_width_desc'],
 'type' => 'text',
 'size' => 8,
 ),
        '',
    array(
    'id' => 'active_teknobox1',
    'label' => $txt['teknobox1'],
 'description' => $txt['site_link_desc'],
 ),
    array(
    'id' => 'url_teknobox1b',
    'label' => $txt['teknobox1b'],
 'description' => $txt['site_link_desc'],
 'type' => 'text',
        ),
        array(
    'id' => 'url_teknobox1i',
    'label' => $txt['teknobox1i'],
 'description' => $txt['site_link_desc'],
 'type' => 'text',
        ),
        array(
    'id' => 'url_teknobox1t',
    'label' => $txt['teknobox1t'],
 'description' => $txt['site_link_desc'],
 'type' => 'text',
        ),
        array(
    'id' => 'url_teknobox1',
    'label' => $txt['teknobox1d'],
    'type' => 'text',
         ),
 '',
    array(
    'id' => 'active_teknobox2',
    'label' => $txt['teknobox2'],
 'description' => $txt['site_link_desc'],
 ),
    array(
    'id' => 'url_teknobox2b',
    'label' => $txt['teknobox2b'],
 'description' => $txt['site_link_desc'],
 'type' => 'text',
        ),
        array(
    'id' => 'url_teknobox2i',
    'label' => $txt['teknobox2i'],
 'description' => $txt['site_link_desc'],
 'type' => 'text',
        ),
        array(
    'id' => 'url_teknobox2t',
    'label' => $txt['teknobox2t'],
 'description' => $txt['site_link_desc'],
 'type' => 'text',
        ),
        array(
    'id' => 'url_teknobox2',
    'label' => $txt['teknobox2d'],
    'type' => 'text',
         ),
 '', 
    array(
    'id' => 'active_teknobox3',
    'label' => $txt['teknobox3'],
 'description' => $txt['site_link_desc'],
 ),
    array(
    'id' => 'url_teknobox3b',
    'label' => $txt['teknobox3b'],
 'description' => $txt['site_link_desc'],
 'type' => 'text',
        ),
        array(
    'id' => 'url_teknobox3i',
    'label' => $txt['teknobox3i'],
 'description' => $txt['site_link_desc'],
 'type' => 'text',
        ),
        array(
    'id' => 'url_teknobox3t',
    'label' => $txt['teknobox3t'],
 'description' => $txt['site_link_desc'],
 'type' => 'text',
        ),
        array(
    'id' => 'url_teknobox3',
    'label' => $txt['teknobox3d'],
    'type' => 'text',
         ),

settings.turkish.php bul
?>üstüne ekle
$txt['teknobox1'] = '1.Alt Kutu Aktif Et';
$txt['teknobox1b'] = 'Başlık Yazın';
$txt['teknobox1i'] = 'Resim Url Girin';
$txt['teknobox1t'] = '2.Başlık';
$txt['teknobox1d'] = 'html li taglarını kullanın 1-2-3 diye sıralar veya html kullanabiliriniz';
$txt['teknobox2'] = '2.Alt Kutu Aktif Et';
$txt['teknobox2b'] = 'Başlık Yazın';
$txt['teknobox2i'] = 'Resim Url Girin';
$txt['teknobox2t'] = '2.Başlık';
$txt['teknobox2d'] = 'html li taglarını kullanın 1-2-3 diye sıralar veya html kullanabiliriniz';
$txt['teknobox3'] = '3.Alt Kutu Aktif Et';
$txt['teknobox3b'] = 'Başlık Yazın';
$txt['teknobox3i'] = 'Resim Url Girin';
$txt['teknobox3t'] = '2.Başlık';
$txt['teknobox3d'] = 'html li taglarını kullanın 1-2-3 diye sıralar veya html kullanabiliriniz';
index.css en alta ekle
#fottmenu {position:relative; height:40px; font-family: arial, sans-serif; width:750px; margin:0 auto;  clear: both;}
.fottcontainer {height:50px; width:180px; overflow:hidden; position:absolute; top:-30px; padding-top:20px; z-index:1;
-webkit-transition: 0.5s 1s;
-moz-transition: 0.5s 1s;
-o-transition: 0.5s 1s;
transition: 0.5s 1s;
}
#fottmenu .p1 {left:8px;z-index: 99;
}
#fottmenu .p2 {left:193px;z-index: 99;
}
#fottmenu .p3 {left:378px;z-index: 99;
}
#fottmenu .p4 {left:563px;z-index: 99;
}

.fottcontainer:hover {height:452px; top:-432px;
transition-delay: 0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
#fottmenu .fottcontainer div h1 {padding:0; margin:0; line-height:40px; color:#710505; font-size:18px; text-align:center; font-style:italic;}
#fottmenu .fottcontainer div h2 {padding:50px 15px 25px 15px; margin:0; line-height:18px; color:#fc6; font-size:14px; text-align:center; font-style:italic;}
#fottmenu .fottcontainer div ol li {font-size:12px; color:#000; line-height:20px; text-align:left;}
#fottmenu .fottcontainer div ol li a {margin:0; line-height:18px; color:#000; font-size:12px; text-align:left; text-decoration:none;}
#fottmenu .fottcontainer div ol li a:hover {color:#fff;}
#fottmenu .fottcontainer div img {display:block; border:0; margin:30px auto;}

.card {
width:180px; height: 380px;
-webkit-transform-style: preserve-3d;
}
.obverse {
position: absolute;
width:180px; height: 362px;
background:#aaa; 
background-image: -moz-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: -webkit-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: -ms-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: -o-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
-ms-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-o-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-o-transform: perspective(1500px) rotateY(0deg);
-moz-transform: perspective(1500px) rotateY(0deg);
-webkit-transform: perspective(1500px) rotateY(0deg);
transform: perspective(1500px) rotateY(0deg);
-webkit-transition: 1s 0s;
-moz-transition: 1s 0s;
-o-transition: 1s 0s;
transition: 1s 0s;

}
.reverse {
position: absolute;
width:180px; height: 362px;
background:#0466F9;
background-image: -moz-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: -webkit-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: -ms-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: -o-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
-ms-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-o-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-o-transform: perspective(1500px) rotateY(180deg);
-moz-transform: perspective(1500px) rotateY(180deg);
-webkit-transform: perspective(1500px) rotateY(180deg);
transform: perspective(1500px) rotateY(180deg);
-webkit-transition: 1s 0s;
-moz-transition: 1s 0s;
-o-transition: 1s 0s;
transition: 1s 0s;

}

.fottcontainer:hover .reverse {
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
-o-transform: perspective(1500px) rotateY(0);
-moz-transform: perspective(1500px) rotateY(0);
-webkit-transform: perspective(1500px) rotateY(0);
transform: perspective(1500px) rotateY(0);
}
.fottcontainer:hover .obverse {
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
-o-transform: perspective(1500px) rotateY(-179.9deg);
-moz-transform: perspective(1500px) rotateY(-179.9deg);
-webkit-transform: perspective(1500px) rotateY(-179.9deg);
transform: perspective(1500px) rotateY(-179.9deg);
}

son olarak ekteki 195.png temanızın images klasörüne kopyalayın
3089
İstatistik / Smf tablı Bilgi merkezi
18 Mayıs 2014 04:27

Alıntı yapanlar lütfen bu konuyu kaynak gösterin tşk
ekte vermiş olduğum js dosyarını default temanızın script klasörüne (not:Smf Teknoromi Ultimate Profile kurduysanız gerek yok)
ekteki resim dosyalarını temanızın images klasörüne
index.css de en alta ekle (not:Smf Teknoromi Ultimate Profile kurduysanız gerek yok )
.profile_left{text-align: left;font-size: 100%;color: rgb(66, 66, 66);width: 28%;margin-bottom: 10px; padding: 0px 5px;height: auto;}
.profile_right{text-align: left;color: rgb(66, 66, 66);margin: 0px 0px 0px 0px;width: 100%;display: block;}
#teknosnrj{text-align:left;font-size:100%;color:#424242;width:100%;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:-2px 2px 2px #c8c8c8;-webkit-box-shadow:-2px 2px 2px #c8c8c8;box-shadow:-2px 2px 2px #c8c8c8;background-color:#E4E4E4;border:1px solid #c1c1c1;margin-bottom:10px;padding:0 5px 10px 5px;height:auto;}
#teknosnrjavatar img{border:3px solid #FFF;outline:1px solid #dadada;max-width:110px;height:auto;}
#teknosnrjad{text-align:center;font-size:120%;font-weight:700;padding:10px;}
#teknosnrjtable{padding:0 5px;color:#333;background-color:#fafafa;border:1px solid #A6A6A6;border-radius:5px;}




#vtab {
  margin: auto;
  height: 100%;
}
#vtab > ul > li {
  width: 65px;
  height: 65px;
  list-style-type: none;
  display: block;
  text-align: center;
  margin: auto;
  padding-bottom: 10px;
  position: relative;
  opacity: .3;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
  margin-left: 10px;
}

#vtab > ul > li.selected {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  z-index: 10;
  position: relative;
  list-style-type: none;
  
}
#vtab > ul {
  float: left;
  width: 65px;
  text-align: left;
  display: block;
  margin: auto 0;
  padding: 0;
  position: relative;
}
#vtab > div {
  margin-left: 65px;
  height: auto;
  padding: 12px;
  overflow: auto;
  position: relative;
  z-index: 9;
  width:auto;
}
#vtab > div > h4 {
  color: #800;
  font-size: 1.2em;
  border-bottom: 1px dotted #800;
  padding-top: 5px;
  margin-top: 0;
}
.innerframe {
  clear: both;
  display: block;
}

BoardIndex.template.php  burdan
function template_info_center()buraya kadar
// ]]></script>';
}
olan kısmı sil muhtemelen sayfa sonu
bunu ekle
function template_info_center()
{
 global $context, $settings, $options, $txt, $scripturl, $modSettings;

 // Here's where the "Info Center" starts...
 echo '
 <span class="clear upperframe"><span></span></span>
 <script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/skm_2.js"></script>
 <script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/skm.js"></script>
 <div class="roundframe"><div class="innerframe">
 <div class="cat_bar">
 <h3 class="catbg">
 <img class="icon" id="upshrink_ic" src="', $settings['images_url'], '/collapse.gif" alt="*" title="', $txt['upshrink_description'], '" style="display: none;" />
 ', sprintf($txt['info_center_title'], $context['forum_name_html_safe']), '
 </h3>
 </div>
 <div id="upshrinkHeaderIC"', empty($options['collapse_header_ic']) ? '' : ' style="display: none;"', '>';

 // This is the "Recent Posts" bar.
 if (!empty($settings['number_recent_posts']) && (!empty($context['latest_posts']) || !empty($context['latest_post'])))
 {
 echo '
 <div id="vtab">
   <ul>
 <li class="messages"><img class="icon"  src="', $settings['images_url'], '/message.png" alt="" /></li>
 <li class="stats"><img class="icon"  src="', $settings['images_url'], '/Stat.png" alt="" /></li>
 <li class="online_users selected"><img class="icon"  src="', $settings['images_url'], '/Usr.png" alt="" /></li>
   </ul><div style="display: none;"><div class="title_barIC">
 <h4 class="titlebg">
 <span class="ie6_header floatleft">
 <a href="', $scripturl, '?action=recent"><img class="icon" src="', $settings['images_url'], '/post/xx.gif" alt="', $txt['recent_posts'], '" /></a>
 ', $txt['recent_posts'], '
 </span>
 </h4>
 </div>
 <div class="hslice" id="recent_posts_content">
 <div class="entry-title" style="display: none;">', $context['forum_name_html_safe'], ' - ', $txt['recent_posts'], '</div>
 <div class="entry-content" style="display: none;">
 <a rel="feedurl" href="', $scripturl, '?action=.xml;type=webslice">', $txt['subscribe_webslice'], '</a>
 </div>';

 // Only show one post.
 if ($settings['number_recent_posts'] == 1)
 {
 // latest_post has link, href, time, subject, short_subject (shortened with...), and topic. (its id.)
 echo '
 <strong><a href="', $scripturl, '?action=recent">', $txt['recent_posts'], '</a></strong>
 <p id="infocenter_onepost" class="middletext">
 ', $txt['recent_view'], ' &quot;', $context['latest_post']['link'], '&quot; ', $txt['recent_updated'], ' (', $context['latest_post']['time'], ')
 </p>';
 }
 // Show lots of posts.
 elseif (!empty($context['latest_posts']))
 {
 echo '
 <dl id="ic_recentposts" class="middletext"><table width="100%" ><tbody>';

 /* Each post in latest_posts has:
 board (with an id, name, and link.), topic (the topic's id.), poster (with id, name, and link.),
 subject, short_subject (shortened with...), time, link, and href. */
 foreach ($context['latest_posts'] as $post)
 echo '
 <tr><td width="40%"><strong>', $post['link'], '</strong></td><td width="20%"> ', $txt['by'], ' ', $post['poster']['link'], ' </td><td width="25%">(', $post['board']['link'], ')</td><td width="15%">
 ', $post['time'], '</td></tr>';
 echo '
 </tbody></table></dl>';
 }
 echo '
 </div></div>';
 }

 // Show information about events, birthdays, and holidays on the calendar.
 if ($context['show_calendar'])
 {
 echo '
 <div style="display: none;"><div class="title_barIC">
 <h4 class="titlebg">
 <span class="ie6_header floatleft">
 <a href="', $scripturl, '?action=calendar' . '"><img class="icon" src="', $settings['images_url'], '/icons/calendar.gif', '" alt="', $context['calendar_only_today'] ? $txt['calendar_today'] : $txt['calendar_upcoming'], '" /></a>
 ', $context['calendar_only_today'] ? $txt['calendar_today'] : $txt['calendar_upcoming'], '
 </span>
 </h4>
 </div>
 <p class="smalltext">';

 // Holidays like "Christmas", "Chanukah", and "We Love [Unknown] Day" :P.
 if (!empty($context['calendar_holidays']))
 echo '
 <span class="holiday">', $txt['calendar_prompt'], ' ', implode(', ', $context['calendar_holidays']), '</span>';

 // People's birthdays. Like mine. And yours, I guess. Kidding.
 if (!empty($context['calendar_birthdays']))
 {
 echo '
 <span class="birthday">', $context['calendar_only_today'] ? $txt['birthdays'] : $txt['birthdays_upcoming'], '</span> ';
 /* Each member in calendar_birthdays has:
 id, name (person), age (if they have one set?), is_last. (last in list?), and is_today (birthday is today?) */
 foreach ($context['calendar_birthdays'] as $member)
 echo '
 <a href="', $scripturl, '?action=profile;u=', $member['id'], '">', $member['is_today'] ? '<strong>' : '', $member['name'], $member['is_today'] ? '</strong>' : '', isset($member['age']) ? ' (' . $member['age'] . ')' : '', '</a>', $member['is_last'] ? '' : ', ';
 }
 // Events like community get-togethers.
 if (!empty($context['calendar_events']))
 {
 echo '
 <span class="event">', $context['calendar_only_today'] ? $txt['events'] : $txt['events_upcoming'], '</span> ';
 /* Each event in calendar_events should have:
 title, href, is_last, can_edit (are they allowed?), modify_href, and is_today. */
 foreach ($context['calendar_events'] as $event)
 echo '
 ', $event['can_edit'] ? '<a href="' . $event['modify_href'] . '" title="' . $txt['calendar_edit'] . '"><img src="' . $settings['images_url'] . '/icons/modify_small.gif" alt="*" /></a> ' : '', $event['href'] == '' ? '' : '<a href="' . $event['href'] . '">', $event['is_today'] ? '<strong>' . $event['title'] . '</strong>' : $event['title'], $event['href'] == '' ? '' : '</a>', $event['is_last'] ? '' : ', ';
 }
 echo '
 </p>';
 }

 // Show statistical style information...
 if ($settings['show_stats_index'])
 {
 echo '
 <div style="display: none;"><div class="title_barIC">
 <h4 class="titlebg">
 <span class="ie6_header floatleft">
 <a href="', $scripturl, '?action=stats"><img class="icon" src="', $settings['images_url'], '/icons/info.gif" alt="', $txt['forum_stats'], '" /></a>
 ', $txt['forum_stats'], '
 </span>
 </h4>
 </div>
 <p>
 ', $context['common_stats']['total_posts'], ' ', $txt['posts_made'], ' ', $txt['in'], ' ', $context['common_stats']['total_topics'], ' ', $txt['topics'], ' ', $txt['by'], ' ', $context['common_stats']['total_members'], ' ', $txt['members'], '. ', !empty($settings['show_latest_member']) ? $txt['latest_member'] . ': <strong> ' . $context['common_stats']['latest_member']['link'] . '</strong>' : '', '
 ', (!empty($context['latest_post']) ? $txt['latest_post'] . ': <strong>&quot;' . $context['latest_post']['link'] . '&quot;</strong>  ( ' . $context['latest_post']['time'] . ' )' : ''), '
 <a href="', $scripturl, '?action=recent">', $txt['recent_view'], '</a>', $context['show_stats'] ? '
 <a href="' . $scripturl . '?action=stats">' . $txt['more_stats'] . '</a>' : '', '
 </p>';
 }

 // "Users online" - in order of activity.
 echo '</div><div style="display: none;">
 <div class="title_barIC">
 <h4 class="titlebg">
 <span class="ie6_header floatleft">
 ', $context['show_who'] ? '<a href="' . $scripturl . '?action=who' . '">' : '', '<img class="icon" src="', $settings['images_url'], '/icons/online.gif', '" alt="', $txt['online_users'], '" />', $context['show_who'] ? '</a>' : '', '
 ', $txt['online_users'], '
 </span>
 </h4>
 </div>
 <p class="inline stats">
 ', $context['show_who'] ? '<a href="' . $scripturl . '?action=who">' : '', comma_format($context['num_guests']), ' ', $context['num_guests'] == 1 ? $txt['guest'] : $txt['guests'], ', ' . comma_format($context['num_users_online']), ' ', $context['num_users_online'] == 1 ? $txt['user'] : $txt['users'];

 // Handle hidden users and buddies.
 $bracketList = array();
 if ($context['show_buddies'])
 $bracketList[] = comma_format($context['num_buddies']) . ' ' . ($context['num_buddies'] == 1 ? $txt['buddy'] : $txt['buddies']);
 if (!empty($context['num_spiders']))
 $bracketList[] = comma_format($context['num_spiders']) . ' ' . ($context['num_spiders'] == 1 ? $txt['spider'] : $txt['spiders']);
 if (!empty($context['num_users_hidden']))
 $bracketList[] = comma_format($context['num_users_hidden']) . ' ' . $txt['hidden'];

 if (!empty($bracketList))
 echo ' (' . implode(', ', $bracketList) . ')';

 echo $context['show_who'] ? '</a>' : '', '
 </p>
 <p class="inline smalltext">';

 // Assuming there ARE users online... each user in users_online has an id, username, name, group, href, and link.
 if (!empty($context['users_online']))
 {
 echo '
 ', sprintf($txt['users_active'], $modSettings['lastActive']), ':', implode(', ', $context['list_users_online']);

 // Showing membergroups?
 if (!empty($settings['show_group_key']) && !empty($context['membergroups']))
 echo '
 [' . implode(']&nbsp;&nbsp;[', $context['membergroups']) . ']';
 }

 echo '
 </p>
 <p class="last smalltext">
 ', $txt['most_online_today'], ': <strong>', comma_format($modSettings['mostOnlineToday']), '</strong>.
 ', $txt['most_online_ever'], ': ', comma_format($modSettings['mostOnline']), ' (', timeformat($modSettings['mostDate']), ')
 </p>';

 // If they are logged in, but statistical information is off... show a personal message bar.
 if ($context['user']['is_logged'] && !$settings['show_stats_index'])
 {
 echo '
 <div class="title_barIC">
 <h4 class="titlebg">
 <span class="ie6_header floatleft">
 ', $context['allow_pm'] ? '<a href="' . $scripturl . '?action=pm">' : '', '<img class="icon" src="', $settings['images_url'], '/message_sm.gif" alt="', $txt['personal_message'], '" />', $context['allow_pm'] ? '</a>' : '', '
 <span>', $txt['personal_message'], '</span>
 </span>
 </h4>
 </div>
 <p class="pminfo">
 <strong><a href="', $scripturl, '?action=pm">', $txt['personal_message'], '</a></strong>
 <span class="smalltext">
 ', $txt['you_have'], ' ', comma_format($context['user']['messages']), ' ', $context['user']['messages'] == 1 ? $txt['message_lowercase'] : $txt['msg_alert_messages'], '.... ', $txt['click'], ' <a href="', $scripturl, '?action=pm">', $txt['here'], '</a> ', $txt['to_view'], '
 </span>
 </p>';
 }

 echo '
 </div></div></div>
 </div></div>
 <span class="lowerframe"><span></span></span>';

 // Info center collapse object.
 echo '
 <script type="text/javascript"><!-- // --><![CDATA[
 var oInfoCenterToggle = new smc_Toggle({
 bToggleEnabled: true,
 bCurrentlyCollapsed: ', empty($options['collapse_header_ic']) ? 'false' : 'true', ',
 aSwappableContainers: [
 \'upshrinkHeaderIC\'
 ],
 aSwapImages: [
 {
 sId: \'upshrink_ic\',
 srcExpanded: smf_images_url   \'/collapse.gif\',
 altExpanded: ', JavaScriptEscape($txt['upshrink_description']), ',
 srcCollapsed: smf_images_url   \'/expand.gif\',
 altCollapsed: ', JavaScriptEscape($txt['upshrink_description']), '
 }
 ],
 oThemeOptions: {
 bUseThemeSettings: ', $context['user']['is_guest'] ? 'false' : 'true', ',
 sOptionName: \'collapse_header_ic\',
 sSessionVar: ', JavaScriptEscape($context['session_var']), ',
 sSessionId: ', JavaScriptEscape($context['session_id']), '
 },
 oCookieOptions: {
 bUseCookie: ', $context['user']['is_guest'] ? 'true' : 'false', ',
 sCookieName: \'upshrinkIC\'
 }
 });
 // ]]></script>';
}
3090

şuan sitemizde kullandığımız tablı istatistik modudur ilerde değişebilir
demo kaldırıldı
11 farklı animasyon şekli vardır altta nasıl değiştirmeniz gerektiğini söylecem

boardindex.template.php de
bul
template_info_center();
}
değiştir
echo'<br class="clear" /><div class="sky-tabs sky-tabs-pos-top-left sky-tabs-anim-flip sky-tabs-response-to-icons">
 <input checked="checked" name="sky-tabs" id="sky-tab1" class="sky-tab-content-1" type="radio">
 <label for="sky-tab1"><span><span>', $txt['online_users'], '</span></span></label>
 
 <input  name="sky-tabs" id="sky-tab2" class="sky-tab-content-2" type="radio">
 <label for="sky-tab2"><span><span>', $txt['forum_stats'], '</span></span></label>
 <input name="sky-tabs" id="sky-tab3" class="sky-tab-content-3" type="radio">
 <label for="sky-tab3"><span><span>Son Üyeler</span></span></label>
 
 <input name="sky-tabs" id="sky-tab4" class="sky-tab-content-4" type="radio">
 <label for="sky-tab4"><span><span>Popüler Üyeler</span></span></label>
 
     <ul>
 <li class="sky-tab-content-1">
 <div class="typography">';
     online();
 echo '
      </div>
 </li>
 
 <li class="sky-tab-content-2">
 <div class="typography">';
  bilgi();
 echo '
      </div>
 </li>
<li class="sky-tab-content-3">
 <div class="typography">';
  sonuye($parameters, $id, $return_parameters = false);
 echo '
      </div>
 </li>

<li class="sky-tab-content-4">
 <div class="typography">';
 populeruyeler($parameters, $id, $return_parameters = false);
 echo '
      </div>
 </li>

 
 </ul>
 </div>';
 template_info_center();
}
function online(){
    global $context, $settings, $options, $txt, $scripturl, $modSettings;
 // "Users online" - in order of activity.
 echo '
 <p class="inline stats">
 ', $context['show_who'] ? '<a href="' . $scripturl . '?action=who">' : '', comma_format($context['num_guests']), ' ', $context['num_guests'] == 1 ? $txt['guest'] : $txt['guests'], ', ' . comma_format($context['num_users_online']), ' ', $context['num_users_online'] == 1 ? $txt['user'] : $txt['users'];

 // Handle hidden users and buddies.
 $bracketList = array();
 if ($context['show_buddies'])
 $bracketList[] = comma_format($context['num_buddies']) . ' ' . ($context['num_buddies'] == 1 ? $txt['buddy'] : $txt['buddies']);
 if (!empty($context['num_spiders']))
 $bracketList[] = comma_format($context['num_spiders']) . ' ' . ($context['num_spiders'] == 1 ? $txt['spider'] : $txt['spiders']);
 if (!empty($context['num_users_hidden']))
 $bracketList[] = comma_format($context['num_users_hidden']) . ' ' . $txt['hidden'];

 if (!empty($bracketList))
 echo ' (' . implode(', ', $bracketList) . ')';

 echo $context['show_who'] ? '</a>' : '', '
 </p>
 <p class="inline smalltext">';

 // Assuming there ARE users online... each user in users_online has an id, username, name, group, href, and link.
 if (!empty($context['users_online']))
 {
 echo '
 ', sprintf($txt['users_active'], $modSettings['lastActive']), ':', implode(', ', $context['list_users_online']);

 // Showing membergroups?
 if (!empty($settings['show_group_key']) && !empty($context['membergroups']))
 echo '
 [' . implode(']&nbsp;&nbsp;[', $context['membergroups']) . ']';
 }
 echo '
 </p>
 <p class="last smalltext">
 ', $txt['most_online_today'], ': <strong>', comma_format($modSettings['mostOnlineToday']), '</strong>.
 ', $txt['most_online_ever'], ': ', comma_format($modSettings['mostOnline']), ' (', timeformat($modSettings['mostDate']), ')
 </p>';

 // If they are logged in, but statistical information is off... show a personal message bar.
 if ($context['user']['is_logged'] && !$settings['show_stats_index'])
 {
 echo '
 <div class="title_barIC">
 <h4 class="titlebg">
 <span class="ie6_header floatleft">
 ', $context['allow_pm'] ? '<a href="' . $scripturl . '?action=pm">' : '', '<img class="icon" src="', $settings['images_url'], '/message_sm.gif" alt="', $txt['personal_message'], '" />', $context['allow_pm'] ? '</a>' : '', '
 <span>', $txt['personal_message'], '</span>
 </span>
 </h4>
 </div>
 <p class="pminfo">
 <strong><a href="', $scripturl, '?action=pm">', $txt['personal_message'], '</a></strong>
 <span class="smalltext">
 ', $txt['you_have'], ' ', comma_format($context['user']['messages']), ' ', $context['user']['messages'] == 1 ? $txt['message_lowercase'] : $txt['msg_alert_messages'], '.... ', $txt['click'], ' <a href="', $scripturl, '?action=pm">', $txt['here'], '</a> ', $txt['to_view'], '
 </span>
 </p>';
 }
}
function sonuye($parameters, $id, $return_parameters = false)
{
 global $smcFunc, $context, $scripturl, $txt, $color_profile;

 $block_parameters = array(
 'limit' => 'int',
 );

 if ($return_parameters)
 return $block_parameters;

 $limit = !empty($parameters['limit']) ? (int) $parameters['limit'] : 5;

 $request = $smcFunc['db_query']('','
 SELECT id_member, real_name, date_registered
 FROM {db_prefix}members
 WHERE is_activated = {int:is_activated}
 ORDER BY id_member DESC
 LIMIT {int:limit}',
 array(
 'is_activated' => 1,
 'limit' => $limit,
 )
 );
 $members = array();
 $colorids = array();
 while ($row = $smcFunc['db_fetch_assoc']($request))
 {
 if (!empty($row['id_member']))
 $colorids[$row['id_member']] = $row['id_member'];

 $members[] = array(
 'id' => $row['id_member'],
 'name' => $row['real_name'],
 'href' => $scripturl . '?action=profile;u=' . $row['id_member'],
 'link' => '<a href="' . $scripturl . '?action=profile;u=' . $row['id_member'] . '">' . $row['real_name'] . '</a>',
 'date' => timeformat($row['date_registered'], '%d %b'),
 );
 }
 $smcFunc['db_free_result']($request);

 

 echo '
 <ul class="portalsonuye">';

 foreach ($members as $member)
 echo '
 <li> ', $member['link'], ' - ', $member['date'], '</li>';

 echo '
 </ul>';
}
function populeruyeler($parameters, $id, $return_parameters = false)
{
 global $smcFunc, $context, $scripturl, $modSettings, $txt, $color_profile;

 $block_parameters = array(
 'limit' => 'int',
 'type' => 'select',
 );

 if ($return_parameters)
 return $block_parameters;

 $limit = !empty($parameters['limit']) ? (int) $parameters['limit'] : 5;
 $type = !empty($parameters['type']) ? (int) $parameters['type'] : 0;

 if (!empty($type))
 {
 if ($type == 1)
 {
 list($year, $month, $day) = explode('-', date('Y-m-d'));
 $start_time = mktime(0, 0, 0, $month, $day, $year);
 }
 elseif ($type == 2)
 $start_time = mktime(0, 0, 0, date("n"), date("j"), date("Y")) - (date("N") * 3600 * 24);
 elseif ($type == 3)
 {
 $months = array( 1 => 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
 $start_time = mktime(0, 0, 0, date("n"), date("j"), date("Y")) - (3600 * 24 * $months[(int) date("m", time())]);
 }

 $start_time = forum_time(false, $start_time);

 $request = $smcFunc['db_query']('', '
 SELECT
 mem.id_member, mem.real_name, COUNT(*) as posts,
 mem.avatar, a.id_attach, a.attachment_type, a.filename
 FROM {db_prefix}messages AS m
 LEFT JOIN {db_prefix}members AS mem ON (mem.id_member = m.id_member)
 LEFT JOIN {db_prefix}attachments AS a ON (a.id_member = mem.id_member)
 WHERE m.poster_time > {int:start_time}
 AND m.id_member != 0
 GROUP BY mem.id_member
 ORDER BY posts DESC
 LIMIT {int:limit}',
 array(
 'start_time' => $start_time,
 'limit' => $limit,
 )
 );
 }
 else
 {
 $request = $smcFunc['db_query']('','
 SELECT
 m.id_member, m.real_name, m.posts, m.avatar,
 a.id_attach, a.attachment_type, a.filename
 FROM {db_prefix}members AS m
 LEFT JOIN {db_prefix}attachments AS a ON (a.id_member = m.id_member)
 ORDER BY posts DESC
 LIMIT {int:limit}',
 array(
 'limit' => $limit,
 )
 );
 }
 $members = array();
 $colorids = array();
 while ($row = $smcFunc['db_fetch_assoc']($request))
 {
 if (!empty($row['id_member']))
 $colorids[$row['id_member']] = $row['id_member'];

 if ($modSettings['avatar_action_too_large'] == 'option_html_resize' || $modSettings['avatar_action_too_large'] == 'option_js_resize')
 {
 $avatar_width = !empty($modSettings['avatar_max_width_external']) ? ' width="' . $modSettings['avatar_max_width_external'] . '"' : '';
 $avatar_height = !empty($modSettings['avatar_max_height_external']) ? ' height="' . $modSettings['avatar_max_height_external'] . '"' : '';
 }
 else
 {
 $avatar_width = '';
 $avatar_height = '';
 }

 $members[] = array(
 'id' => $row['id_member'],
 'name' => $row['real_name'],
 'href' => $scripturl . '?action=profile;u=' . $row['id_member'],
 'link' => '<a href="' . $scripturl . '?action=profile;u=' . $row['id_member'] . '">' . $row['real_name'] . '</a>',
 'posts' => comma_format($row['posts']),
 'avatar' => array(
 'name' => $row['avatar'],
 'image' => $row['avatar'] == '' ? ($row['id_attach'] > 0 ? '<img src="' . (empty($row['attachment_type']) ? $scripturl . '?action=dlattach;attach=' . $row['id_attach'] . ';type=avatar' : $modSettings['custom_avatar_url'] . '/' . $row['filename']) . '" alt="" class="avatar" border="0" />' : '') : (stristr($row['avatar'], 'http://') ? '<img src="' . $row['avatar'] . '"' . $avatar_width . $avatar_height . ' alt="" class="avatar" border="0" />' : '<img src="' . $modSettings['avatar_url'] . '/' . htmlspecialchars($row['avatar']) . '" alt="" class="avatar" border="0" />'),
 'href' => $row['avatar'] == '' ? ($row['id_attach'] > 0 ? (empty($row['attachment_type']) ? $scripturl . '?action=dlattach;attach=' . $row['id_attach'] . ';type=avatar' : $modSettings['custom_avatar_url'] . '/' . $row['filename']) : '') : (stristr($row['avatar'], 'http://') ? $row['avatar'] : $modSettings['avatar_url'] . '/' . $row['avatar']),
 'url' => $row['avatar'] == '' ? '' : (stristr($row['avatar'], 'http://') ? $row['avatar'] : $modSettings['avatar_url'] . '/' . $row['avatar'])
 ),
 );
 }
 $smcFunc['db_free_result']($request);

 

 echo '
 <table class="populeruyeler"><tr>';

 foreach ($members as $member)
 echo '
 
 <td>', !empty($member['avatar']['href']) ? '
 <a href="' . $scripturl . '?action=profile;u=' . $member['id'] . '"><img src="' . $member['avatar']['href'] . '" alt="' . $member['name'] . '" width="40" /></a>' : '', '
 </td>
 <td>
 ', $member['link'], '
 ', $member['posts'], ' ', $txt['posts'], '
 </td>';

 echo '
 </tr></table>';
}
function bilgi(){
 global $context, $settings, $options, $txt, $scripturl, $modSettings;
 // Show statistical style information...
 if ($settings['show_stats_index'])
 {
 echo '
 ', $context['common_stats']['total_posts'], ' ', $txt['posts_made'], ' ', $txt['in'], ' ', $context['common_stats']['total_topics'], ' ', $txt['topics'], ' ', $txt['by'], ' ', $context['common_stats']['total_members'], ' ', $txt['members'], '.<br> ', !empty($settings['show_latest_member']) ? $txt['latest_member'] . ': <strong> ' . $context['common_stats']['latest_member']['link'] . '</strong>' : '', '
 ', (!empty($context['latest_post']) ? $txt['latest_post'] . ': <strong>&quot;' . $context['latest_post']['link'] . '&quot;</strong> ' : ''), '
 <a href="', $scripturl, '?action=recent">', $txt['recent_view'], '</a>', $context['show_stats'] ? '
 <a href="' . $scripturl . '?action=stats">' . $txt['more_stats'] . '</a>' : '', '';
 }


}

index.css en alta ekle
.sky-tabs,
.sky-tabs * {
 margin: 0;
 padding: 0;
 outline: none;
 border: 0;
 background: none;
}
.sky-tabs {
 position: relative;
 font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 font-size: 0;
 text-align: left;
 color: #666;
}
.sky-tabs > input {
 position: absolute;
 display: none;
}
.sky-tabs > label {
 position: relative;
 z-index: 1;
 display: inline-block;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 padding: 1px;
 padding-top: 0;
 padding-left: 0;
 font-size: 13px;
 line-height: 45px;
 cursor: pointer;
}
.sky-tabs > label.inverse {
 float: right;
 padding-right: 0;
 padding-left: 1px;
}
.sky-tabs > label.disabled {
 cursor: default;
}
.sky-tabs > label span {
 display: block;
 padding: 5px;
 background: rgba(255,255,255,0.9);
}
.sky-tabs > label span span {
 padding: 0 20px;
 background: transparent;
 transition: background 0.4s, color 0.4s;
 -o-transition: background 0.4s, color 0.4s;
 -ms-transition: background 0.4s, color 0.4s;
 -moz-transition: background 0.4s, color 0.4s;
 -webkit-transition: background 0.4s, color 0.4s;
}
.sky-tabs > label:hover span span {
 background: #2da5da;
 color: #fff;
}
.sky-tabs > label.disabled span span {
 background: transparent;
 color: inherit;
}
.sky-tabs > input:checked + label {
 cursor: default;
}
.sky-tabs > input:checked + label span span {
 background: #2da5da;
 color: #fff;
}
.sky-tabs > .switcher {
 display: none;
}
.sky-tabs > .switcher a {
 display: block;
 margin: 0 -20px;
 padding: 0 20px;
 text-decoration: none;
 color: inherit;
}
.sky-tabs > ul {
 list-style: none;
 position: relative;
 display: block;
 font-size: 13px;border: 1px solid #CCC;
}
.sky-tabs > ul > li {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 overflow: auto;
 padding: 20px 25px 25px;
 background: rgba(255,255,255,0.9);
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 opacity: 0;
 -o-transform-origin: 0% 0%;
 -ms-transform-origin: 0% 0%;
 -moz-transform-origin: 0% 0%;
 -webkit-transform-origin: 0% 0%;
 -o-transition: opacity 0.8s, -o-transform 0.8s;
 -ms-transition: opacity 0.8s, -ms-transform 0.8s;
 -moz-transition: opacity 0.8s, -moz-transform 0.8s;
 -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
}
.sky-tabs > .sky-tab-content-1:checked ~ ul > .sky-tab-content-1,
.sky-tabs > .sky-tab-content-2:checked ~ ul > .sky-tab-content-2,
.sky-tabs > .sky-tab-content-3:checked ~ ul > .sky-tab-content-3,
.sky-tabs > .sky-tab-content-4:checked ~ ul > .sky-tab-content-4,
.sky-tabs > .sky-tab-content-5:checked ~ ul > .sky-tab-content-5,
.sky-tabs > .sky-tab-content-6:checked ~ ul > .sky-tab-content-6,
.sky-tabs > .sky-tab-content-7:checked ~ ul > .sky-tab-content-7,
.sky-tabs > .sky-tab-content-8:checked ~ ul > .sky-tab-content-8,
.sky-tabs > .sky-tab-content-9:checked ~ ul > .sky-tab-content-9 {
 position: relative;
 z-index: 1;
 opacity: 1;
}


/**/
/* positions */
/**/
.sky-tabs-pos-top-center {
 text-align: center;
}
.sky-tabs-pos-top-right {
 text-align: right;
}
.sky-tabs-pos-top-right > label {
 padding-right: 0;
 padding-left: 1px;
}
.sky-tabs-pos-top-justify > label {
 padding-right: 0;
 padding-left: 1px;
}
.sky-tabs-pos-top-justify.sky-tabs-amount-2 > label {
 width: 50%;
}
.sky-tabs-pos-top-justify.sky-tabs-amount-3 > label {
 width: 33.33%;
}
.sky-tabs-pos-top-justify.sky-tabs-amount-4 > label {
 width: 25%;
}
.sky-tabs-pos-top-justify.sky-tabs-amount-5 > label {
 width: 20%;
}
.sky-tabs-pos-top-justify.sky-tabs-amount-6 > label {
 width: 16.66%;
}
.sky-tabs-pos-top-justify.sky-tabs-amount-7 > label {
 width: 14.28%;
}
.sky-tabs-pos-top-justify.sky-tabs-amount-8 > label {
 width: 12.5%;
}
.sky-tabs-pos-top-justify.sky-tabs-amount-9 > label {
 width: 11.11%;
}
.sky-tabs-pos-top-justify > input:first-child + label {
 padding-left: 0;
}
.sky-tabs-pos-left > label,
.sky-tabs-pos-right > label {
 display: block;
 width: 25%;
 float: left;
 clear: left;
 margin-right: 0;
}
.sky-tabs-pos-right > label {
 float: right;
 clear: right;
}
.sky-tabs-pos-left > ul {
 margin-left: 25%;
}
.sky-tabs-pos-right > ul {
 margin-right: 25%;
}
.sky-tabs-pos-right > label {
 padding-right: 0;
 padding-left: 1px;
}
.sky-tabs-pos-top-center > ul > li,
.sky-tabs-pos-top-justify > ul > li {
 -o-transform-origin: 50% 0%;
 -ms-transform-origin: 50% 0%;
 -moz-transform-origin: 50% 0%;
 -webkit-transform-origin: 50% 0%;
}
.sky-tabs-pos-right > ul > li,
.sky-tabs-pos-top-right > ul > li {
 -o-transform-origin: 100% 0%;
 -ms-transform-origin: 100% 0%;
 -moz-transform-origin: 100% 0%;
 -webkit-transform-origin: 100% 0%;
}


/**/
/* animations */
/**/
.sky-tabs-anim-slide-up > ul > li {
 -o-transform: translateY(-15%);
 -ms-transform: translateY(-15%);
 -moz-transform: translateY(-15%);
 -webkit-transform: translateY(-15%);
}
.sky-tabs-anim-slide-right > ul > li {
 -o-transform: translateX(15%);
 -ms-transform: translateX(15%);
 -moz-transform: translateX(15%);
 -webkit-transform: translateX(15%);
}
.sky-tabs-anim-slide-down > ul > li {
 -o-transform: translateY(15%);
 -ms-transform: translateY(15%);
 -moz-transform: translateY(15%);
 -webkit-transform: translateY(15%);
}
.sky-tabs-anim-slide-left > ul > li {
 -o-transform: translateX(-15%);
 -ms-transform: translateX(-15%);
 -moz-transform: translateX(-15%);
 -webkit-transform: translateX(-15%);
}
.sky-tabs-anim-slide-up-left > ul > li {
 -o-transform: translate(-15%,-15%);
 -ms-transform: translate(-15%,-15%);
 -moz-transform: translate(-15%,-15%);
 -webkit-transform: translate(-15%,-15%);
}
.sky-tabs-anim-slide-up-right > ul > li {
 -o-transform: translate(15%,-15%);
 -ms-transform: translate(15%,-15%);
 -moz-transform: translate(15%,-15%);
 -webkit-transform: translate(15%,-15%);
}
.sky-tabs-anim-slide-down-right > ul > li {
 -o-transform: translate(15%,15%);
 -ms-transform: translate(15%,15%);
 -moz-transform: translate(15%,15%);
 -webkit-transform: translate(15%,15%);
}
.sky-tabs-anim-slide-down-left > ul > li {
 -o-transform: translate(-15%,15%);
 -ms-transform: translate(-15%,15%);
 -moz-transform: translate(-15%,15%);
 -webkit-transform: translate(-15%,15%);
}
.sky-tabs > .sky-tab-content-1:checked ~ ul > .sky-tab-content-1,
.sky-tabs > .sky-tab-content-2:checked ~ ul > .sky-tab-content-2,
.sky-tabs > .sky-tab-content-3:checked ~ ul > .sky-tab-content-3,
.sky-tabs > .sky-tab-content-4:checked ~ ul > .sky-tab-content-4,
.sky-tabs > .sky-tab-content-5:checked ~ ul > .sky-tab-content-5,
.sky-tabs > .sky-tab-content-6:checked ~ ul > .sky-tab-content-6,
.sky-tabs > .sky-tab-content-7:checked ~ ul > .sky-tab-content-7,
.sky-tabs > .sky-tab-content-8:checked ~ ul > .sky-tab-content-8,
.sky-tabs > .sky-tab-content-9:checked ~ ul > .sky-tab-content-9 {
 -o-transform: translate(0,0);
 -ms-transform: translate(0,0);
 -moz-transform: translate(0,0);
 -webkit-transform: translate(0,0);
}

.sky-tabs-anim-scale > ul > li {
 -o-transform: scale(0.1,0.1);
 -ms-transform: scale(0.1,0.1);
 -moz-transform: scale(0.1,0.1);
 -webkit-transform: scale(0.1,0.1);
}
.sky-tabs-anim-scale > .sky-tab-content-1:checked ~ ul > .sky-tab-content-1,
.sky-tabs-anim-scale > .sky-tab-content-2:checked ~ ul > .sky-tab-content-2,
.sky-tabs-anim-scale > .sky-tab-content-3:checked ~ ul > .sky-tab-content-3,
.sky-tabs-anim-scale > .sky-tab-content-4:checked ~ ul > .sky-tab-content-4,
.sky-tabs-anim-scale > .sky-tab-content-5:checked ~ ul > .sky-tab-content-5,
.sky-tabs-anim-scale > .sky-tab-content-6:checked ~ ul > .sky-tab-content-6,
.sky-tabs-anim-scale > .sky-tab-content-7:checked ~ ul > .sky-tab-content-7,
.sky-tabs-anim-scale > .sky-tab-content-8:checked ~ ul > .sky-tab-content-8,
.sky-tabs-anim-scale > .sky-tab-content-9:checked ~ ul > .sky-tab-content-9 {
 -o-transform: scale(1,1);
 -ms-transform: scale(1,1);
 -moz-transform: scale(1,1);
 -webkit-transform: scale(1,1);
}

.sky-tabs-anim-rotate > ul > li {
 -o-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 -webkit-transform: rotate(90deg);
}
.sky-tabs-anim-rotate.sky-tabs-pos-right > ul > li,
.sky-tabs-anim-rotate.sky-tabs-pos-top-right > ul > li {
 -o-transform: rotate(-90deg);
 -ms-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg);
 -webkit-transform: rotate(-90deg);
}
.sky-tabs-anim-rotate > .sky-tab-content-1:checked ~ ul > .sky-tab-content-1,
.sky-tabs-anim-rotate > .sky-tab-content-2:checked ~ ul > .sky-tab-content-2,
.sky-tabs-anim-rotate > .sky-tab-content-3:checked ~ ul > .sky-tab-content-3,
.sky-tabs-anim-rotate > .sky-tab-content-4:checked ~ ul > .sky-tab-content-4,
.sky-tabs-anim-rotate > .sky-tab-content-5:checked ~ ul > .sky-tab-content-5,
.sky-tabs-anim-rotate > .sky-tab-content-6:checked ~ ul > .sky-tab-content-6,
.sky-tabs-anim-rotate > .sky-tab-content-7:checked ~ ul > .sky-tab-content-7,
.sky-tabs-anim-rotate > .sky-tab-content-8:checked ~ ul > .sky-tab-content-8,
.sky-tabs-anim-rotate > .sky-tab-content-9:checked ~ ul > .sky-tab-content-9 {
 -o-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
}

.sky-tabs-anim-flip > ul {
 perspective: 2000px;
 -o-perspective: 2000px;
 -ms-perspective: 2000px;
 -moz-perspective: 2000px;
 -webkit-perspective: 2000px;
 perspective-origin: 50% 50%;
 -o-perspective-origin: 50% 50%;
 -ms-perspective-origin: 50% 50%;
 -moz-perspective-origin: 50% 50%;
 -webkit-perspective-origin: 50% 50%;
}
.sky-tabs-anim-flip > ul > li {
 -o-transform: rotateX(-90deg);
 -ms-transform: rotateX(-90deg);
 -moz-transform: rotateX(-90deg);
 -webkit-transform: rotateX(-90deg);
}
.sky-tabs-anim-flip.sky-tabs-pos-left > ul > li {
 -o-transform: rotateY(90deg);
 -ms-transform: rotateY(90deg);
 -moz-transform: rotateY(90deg);
 -webkit-transform: rotateY(90deg);
}
.sky-tabs-anim-flip.sky-tabs-pos-right > ul > li {
 -o-transform: rotateY(-90deg);
 -ms-transform: rotateY(-90deg);
 -moz-transform: rotateY(-90deg);
 -webkit-transform: rotateY(-90deg);
}
.sky-tabs-anim-flip > .sky-tab-content-1:checked ~ ul > .sky-tab-content-1,
.sky-tabs-anim-flip > .sky-tab-content-2:checked ~ ul > .sky-tab-content-2,
.sky-tabs-anim-flip > .sky-tab-content-3:checked ~ ul > .sky-tab-content-3,
.sky-tabs-anim-flip > .sky-tab-content-4:checked ~ ul > .sky-tab-content-4,
.sky-tabs-anim-flip > .sky-tab-content-5:checked ~ ul > .sky-tab-content-5,
.sky-tabs-anim-flip > .sky-tab-content-6:checked ~ ul > .sky-tab-content-6,
.sky-tabs-anim-flip > .sky-tab-content-7:checked ~ ul > .sky-tab-content-7,
.sky-tabs-anim-flip > .sky-tab-content-8:checked ~ ul > .sky-tab-content-8,
.sky-tabs-anim-flip > .sky-tab-content-9:checked ~ ul > .sky-tab-content-9 {
 -o-transform: rotateX(0deg);
 -ms-transform: rotateX(0deg);
 -moz-transform: rotateX(0deg);
 -webkit-transform: rotateX(0deg);
 -o-transition-delay: 0.2s;
 -ms-transition-delay: 0.2s;
 -moz-transition-delay: 0.2s;
 -webkit-transition-delay: 0.2s;
}


/**/
/* grid system */
/**/
.sky-tabs .grid-row {
 margin-top: 20px;
}
.sky-tabs .grid-row:after {
 content: '';
 display: table;
 clear: both;
}
.sky-tabs .grid-row:first-child {
 margin-top: 0;
}
.sky-tabs .grid-col {
 display: block;
 float: left;
 width: 100%;
 margin-left: 2%;
}
.sky-tabs .grid-col:first-child {
 margin-left: 0;
}
.sky-tabs .grid-col .inner {
 padding: 10px 0;
 border-radius: 5px;
 background: rgba(0,0,0,0.1);
 text-align: center;
}
.sky-tabs .grid-col-1 {
 width: 6.5%;
}
.sky-tabs .grid-col-2 {
 width: 15%;
}
.sky-tabs .grid-col-3 {
 width: 23.5%;
}
.sky-tabs .grid-col-4 {
 width: 32%;
}
.sky-tabs .grid-col-5 {
 width: 40.5%;
}
.sky-tabs .grid-col-6 {
 width: 49%;
}
.sky-tabs .grid-col-7 {
 width: 57.5%;
}
.sky-tabs .grid-col-8 {
 width: 66%;
}
.sky-tabs .grid-col-9 {
 width: 74.5%;
}
.sky-tabs .grid-col-10 {
 width: 83%;
}
.sky-tabs .grid-col-11 {
 width: 91.5%;
}
.sky-tabs .grid-col-offset-1,
.sky-tabs .grid-col-offset-1:first-child {
 margin-left: 8.5%;
}
.sky-tabs .grid-col-offset-2,
.sky-tabs .grid-col-offset-2:first-child {
 margin-left: 17%;
}
.sky-tabs .grid-col-offset-3,
.sky-tabs .grid-col-offset-3:first-child {
 margin-left: 25.5%;
}
.sky-tabs .grid-col-offset-4,
.sky-tabs .grid-col-offset-4:first-child {
 margin-left: 34%;
}
.sky-tabs .grid-col-offset-5,
.sky-tabs .grid-col-offset-5:first-child {
 margin-left: 42.5%;
}
.sky-tabs .grid-col-offset-6,
.sky-tabs .grid-col-offset-6:first-child {
 margin-left: 51%;
}
.sky-tabs .grid-col-offset-7,
.sky-tabs .grid-col-offset-7:first-child {
 margin-left: 59.5%;
}
.sky-tabs .grid-col-offset-8,
.sky-tabs .grid-col-offset-8:first-child {
 margin-left: 68%;
}
.sky-tabs .grid-col-offset-9,
.sky-tabs .grid-col-offset-9:first-child {
 margin-left: 76.5%;
}
.sky-tabs .grid-col-offset-10,
.sky-tabs .grid-col-offset-10:first-child {
 margin-left: 85%;
}
.sky-tabs .grid-col-offset-11,
.sky-tabs .grid-col-offset-11:first-child {
 margin-left: 93.5%;
}


/**/
/* typography */
/**/
.sky-tabs .typography h1,
.sky-tabs .typography h2,
.sky-tabs .typography h3,
.sky-tabs .typography h4,
.sky-tabs .typography h5,
.sky-tabs .typography h6 {
 margin: 40px 0 0 0;
 padding: 0;
 text-align: left;
 color: #333;
}
.sky-tabs .typography h1 {
 font-size: 40px;
 line-height: 50px;
 font-weight: 300;
}
.sky-tabs .typography h2 {
 font-size: 34px;
 line-height: 44px;
 font-weight: 300;
}
.sky-tabs .typography h3 {
 font-size: 28px;
 line-height: 36px;
 font-weight: 300;
}
.sky-tabs .typography h4 {
 font-size: 22px;
 line-height: 30px;
 font-weight: 400;
}
.sky-tabs .typography h5 {
 font-size: 16px;
 line-height: 23px;
 font-weight: 400;
 text-transform: uppercase;
}
.sky-tabs .typography h6 {
 font-size: 14px;
 line-height: 20px;
 font-weight: 400;
 text-transform: uppercase;
}
.sky-tabs .typography p {
 margin: 20px 0 0 0;
 padding: 0;
 line-height: 20px;
 text-align: left;
}
.sky-tabs .typography ul,
.sky-tabs .typography ol {
 list-style: none;
 margin: 20px 0 0 0;
 padding: 0;
 line-height: 20px;
}
.sky-tabs .typography li {
 position: relative;
 margin-top: 5px;
 padding-left: 20px;
}
.sky-tabs .typography li ul,
.sky-tabs .typography li ol {
 margin-top: 5px;
}
.sky-tabs .typography ul li:before {
 content: '';
 position: absolute;
 top: 8px;
 left: 0;
 width: 4px;
 height: 4px;
 background: #333;
}
.sky-tabs .typography ol {
 counter-reset: list1;
}
.sky-tabs .typography ol > li:before {
 counter-increment:list1;
 content: counter(list1)'.';
 position: absolute;
 top: 0;
 left: 0;
 color: #333;
}
.sky-tabs .typography a {
 text-decoration: underline;
 color: #2da5da;
}
.sky-tabs .typography a:hover {
 text-decoration: none;
}
.sky-tabs .typography .pic {
 padding: 4px;
 border: 1px dotted #ccc;
}
.sky-tabs .typography .pic img {
 display: block;
}
.sky-tabs .typography .pic-right {
 float: right;
 margin: 0 0 10px 20px;
}
.sky-tabs .typography .link {
 text-decoration: underline;
 color: #2da5da;
 cursor: pointer;
}
.sky-tabs .typography .link:hover {
 text-decoration: none;
}
.sky-tabs .typography h1:first-child,
.sky-tabs .typography h2:first-child,
.sky-tabs .typography h3:first-child,
.sky-tabs .typography h4:first-child,
.sky-tabs .typography h5:first-child,
.sky-tabs .typography h6:first-child,
.sky-tabs .typography p:first-child {
 margin-top: 0;
}
.sky-tabs .typography .text-center {
 text-align: center;
}
.sky-tabs .typography .text-right {
 text-align: right;
}


/**/
/* icons */
/**/
.sky-tabs > label .fa {
 display: block;
 float: left;
 width: 18px;
 margin: 0 12px 0 -6px;
  font-family: FontAwesome;
  font-style: normal;
  font-size: 16px;
  line-height: 45px;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}


/**/
/* pad */
/**/
@media screen and (max-width: 1000px) {
 .sky-tabs > label span span {
 padding: 0 15px;
 }
 .sky-tabs > label .fa {
 margin-right: 10px;
 margin-left: -5px;
 }
}


/**/
/* phone */
/**/
@media screen and (max-width: 767px) {
 
 .sky-tabs .grid-col,
 .sky-tabs .grid-col:first-child {
 float: none;
 width: 100%;
 margin: 20px 0 0 0;
 }
 
 .sky-tabs-response-to-stack > label {
 display: block;
 width: 100%;
 padding-right: 0;
 padding-left: 0;
 text-align: left;
 }
 .sky-tabs-response-to-stack > ul {
 margin-top: 0;
 margin-right: 0;
 margin-left: 0;
 }
 .sky-tabs-response-to-stack > ul > li {
 -o-transform-origin: 50% 0%;
 -ms-transform-origin: 50% 0%;
 -moz-transform-origin: 50% 0%;
 -webkit-transform-origin: 50% 0%;
 }
 .sky-tabs-response-to-stack.sky-tabs-anim-flip > ul > li {
 -webkit-transform: rotateX(-90deg);
 }
 
 .sky-tabs-response-to-icons > label {
 font-size: 0;
 }
 .sky-tabs-response-to-icons > label .fa {
 width: 45px;
 margin: 0;
 font-size: 16px;
 }
 .sky-tabs-response-to-icons > label span span {
 padding: 0;
 }
 .sky-tabs-response-to-icons.sky-tabs-pos-left > label,
 .sky-tabs-response-to-icons.sky-tabs-pos-right > label {
 width: 56px;
 }
 .sky-tabs-response-to-icons.sky-tabs-pos-left > ul {
 margin-left: 56px;
 }
 .sky-tabs-response-to-icons.sky-tabs-pos-right > ul {
 margin-right: 56px;
 }
 
 .sky-tabs-response-to-switcher > label {
 display: none;
 width: 100%;
 padding-right: 0;
 padding-left: 0;
 text-align: left;
 }
 .sky-tabs-response-to-switcher > .switcher {
 display: block;
 }
 .sky-tabs-response-to-switcher:hover > label {
 display: block;
 }
 .sky-tabs-response-to-switcher:hover > .switcher {
 display: none;
 }
 .sky-tabs-response-to-switcher > ul {
 margin-top: 0;
 margin-right: 0;
 margin-left: 0;
 }
 .sky-tabs-response-to-switcher > ul > li {
 -o-transform-origin: 50% 0%;
 -ms-transform-origin: 50% 0%;
 -moz-transform-origin: 50% 0%;
 -webkit-transform-origin: 50% 0%;
 }
 .sky-tabs-response-to-switcher.sky-tabs-anim-flip > ul > li {
 -webkit-transform: rotateX(-90deg);
 }
}
.populeruyeler{width:100%}
.portalsonuye{top: -25px;
position: relative;}

11 farklı animasyon
sky-tabs-anim-slide-up
sky-tabs-anim-slide-right
sky-tabs-anim-slide-down
sky-tabs-anim-slide-left
sky-tabs-anim-slide-up-left
sky-tabs-anim-slide-up-right
sky-tabs-anim-slide-down-right
sky-tabs-anim-slide-down-left

sky-tabs-anim-scale
sky-tabs-anim-rotate
sky-tabs-anim-flip
değiştirmek için yapmanız gereken
size verdiğim kodlar içinde kırmızı ile işaretli kısımı üstekilerden biri ile değiştimek (boardindex.template.php de)
<div class="sky-tabs sky-tabs-pos-top-left sky-tabs-anim-flip sky-tabs-response-to-icons">

eski bilgi merkezini kaldırmak isteyenler alttaki kırmızı ile işaretli resim

boardindex.template.php de
template_info_center();bulup silmeleri yeterli olacaktır

MENU ×