Konu: CSS sprites ile üye grup ranklarını birleştirmek  (Okunma sayısı 1122 defa)

0 Üye ve 1 Ziyaretçi konuyu incelemekte.

18 Nisan 2014, 18:15
  • *
    • İleti: 2018
    • Karma: 41
    • Spina Bifida
    • Profili Görüntüle

Bir çok smf kullanıcısı sitelerinin daha çabuk açılmasını sağlamak ve seo puanlarını yükseltme amacıyla resim optimizasyonu yapmak istemekte. Smfnin kod yapısından anlayan arkadaşlar internetteki mevcut kaynaklardan faydalanarak bu resim optimizasyonu işlemini yapabilmekte. Ancak şimdiye kadar smf için hazırlanmış bir kaynağa rastlamadım. Forum anasayfası için bu işin nasıl yapılacağını SMF'de Resim Optimizasyonu - Ayrıntılı Örnek Anlatım başlıklı konuda anlatmıştım. Şimdi de bu şekilde CSS sprites ile üye grup ranklarını nasıl birleştirileceğini örnek bir site üzerinden anlatacağım.  Hepimizin sitesi kodlama ve içerik bakımından birbirinden farklı olduğu için yapılacak olan resim optimizasyonu çalışması temelde her site için aynı olmasına rağmen kodlamasında farklılıklar olacaktır.

İşlem Basamakları:
1. Öncelikle admin panelde yönetim / üyeler / üye grupları tıklayıp aşağıdaki resimde görüldüğü üzere üye gruplarımızı görüntülüyoruz. Örnek sitede 15 tane üye grubumuz var.
(Üzgünüm. Galeriyi görme yetkiniz yok)

2. Üye gruplarına ait bu 15 adet resimi sırayla pcye indirip bir zip programı ile ranklar.zip adıyla zipliyoruz. Bu iş için ben 7zip programını kullanıyorum.

3. CSS Tümle?ik Resim Üreteci | Project Fondue sitesine gidip açılan sayfada bilgisayarımızdan ranklar.zip dosyasını çekip, aşağıdaki resimde görüldüğü gibi ayarlamaları yaptıktan sonra Tümleşik Resim Dosyasını && CSS Kodlarını Üret butonuna tıklıyoruz.
(Üzgünüm. Galeriyi görme yetkiniz yok)

4. Sistem bize css kodlarını ve birleştirilmiş resimi verecektir. Verilen css kodlarını bir yere not edip birleştirilmiş resimi de pcye indiriyoruz.
Alınan css kodlarımız birleştirilmiş resimimiz şu şekilde:
Kod: [Seç]
.ranklar-dj2{ background-position: 0 0; width: 150px; height: 50px; }
.ranklar-SBT0nursal{ background-position: 0 -100px; width: 150px; height: 50px; }
.ranklar-SBTadmin{ background-position: 0 -200px; width: 150px; height: 50px; }
.ranklar-SBTadmine{ background-position: 0 -300px; width: 150px; height: 50px; }
.ranklar-SBTban{ background-position: 0 -400px; width: 150px; height: 50px; }
.ranklar-SBTdr{ background-position: 0 -500px; width: 150px; height: 50px; }
.ranklar-SBTf-terapist{ background-position: 0 -600px; width: 150px; height: 50px; }
.ranklar-SBTmdr{ background-position: 0 -700px; width: 150px; height: 50px; }
.ranklar-SBTmedikal{ background-position: 0 -800px; width: 150px; height: 50px; }
.ranklar-SBTpdr{ background-position: 0 -900px; width: 150px; height: 50px; }
.ranklar-SBTrhb{ background-position: 0 -1000px; width: 150px; height: 50px; }
.ranklar-SBTtrc{ background-position: 0 -1100px; width: 150px; height: 50px; }
.ranklar-SBTuye{ background-position: 0 -1200px; width: 150px; height: 50px; }
.ranklar-SBTvip-uye{ background-position: 0 -1300px; width: 150px; height: 50px; }
.ranklar-super-uye{ background-position: 0 -1400px; width: 112px; height: 30px; }
(Üzgünüm. Galeriyi görme yetkiniz yok)

5. CSS Tümle?ik Resim Üreteci | Project Fondue sitesinden indirdiğimiz resime birlestirilmis_ranklar.png ismini verip kullandığımız temanın images klasörüne atıyoruz.

6. CSS Tümle?ik Resim Üreteci | Project Fondue sitesinden almış olduğumuz yukarıda vermiş olduğum css kodlarını da aşağıdaki örnekte görüldüğü şekilde editleyip smfye uyarlayıp kullandığımız temanın css dosyasının en altına ekliyoruz.
Kod: [Seç]
.ranklar-dj2{ background: url(../images/birlestirilmis_ranklar.png) 0 0; width: 150px; height: 50px; }
.ranklar-SBT0nursal{ background: url(../images/birlestirilmis_ranklar.png) 0 -100px; width: 150px; height: 50px; }
.ranklar-SBTadmin{ background: url(../images/birlestirilmis_ranklar.png) 0 -200px; width: 150px; height: 50px; }
.ranklar-SBTadmine{ background: url(../images/birlestirilmis_ranklar.png) 0 -300px; width: 150px; height: 50px; }
.ranklar-SBTban{ background: url(../images/birlestirilmis_ranklar.png) 0 -400px; width: 150px; height: 50px; }
.ranklar-SBTdr{ background: url(../images/birlestirilmis_ranklar.png) 0 -500px; width: 150px; height: 50px; }
.ranklar-SBTf-terapist{ background: url(../images/birlestirilmis_ranklar.png) 0 -600px; width: 150px; height: 50px; }
.ranklar-SBTmdr{ background: url(../images/birlestirilmis_ranklar.png) 0 -700px; width: 150px; height: 50px; }
.ranklar-SBTmedikal{ background: url(../images/birlestirilmis_ranklar.png) 0 -800px; width: 150px; height: 50px; }
.ranklar-SBTpdr{ background: url(../images/birlestirilmis_ranklar.png) 0 -900px; width: 150px; height: 50px; }
.ranklar-SBTrhb{ background: url(../images/birlestirilmis_ranklar.png) 0 -1000px; width: 150px; height: 50px; }
.ranklar-SBTtrc{ background: url(../images/birlestirilmis_ranklar.png) 0 -1100px; width: 150px; height: 50px; }
.ranklar-SBTuye{ background: url(../images/birlestirilmis_ranklar.png) 0 -1200px; width: 150px; height: 50px; }
.ranklar-SBTvip-uye{ background: url(../images/birlestirilmis_ranklar.png) 0 -1300px; width: 150px; height: 50px; }
.ranklar-super-uye{ background: url(../images/birlestirilmis_ranklar.png) 0 -1400px; width: 112px; height: 30px; }

Burada yaptığımız şu aslında yaparken size de kolaylık olsun:
CSS Tümle?ik Resim Üreteci | Project Fondue  sitesinden aldığımız kodları notepad++ programında boş bir txt sayfasına yapıştırıp aşağıdaki işlemi yapıyoruz:
Bul:
Kod: [Seç]
background-position:
Tümünü Değiştir:
Kod: [Seç]
background: url(../images/birlestirilmis_ranklar.png)
7. Ekteki img_trans.gif isimli resimi temamızın images klasörüne atıyoruz.

8. css dosyamıza eklediğimiz kodları sa şu şekilde değiştiriyoruz:
Kod: [Seç]
.DJ{ background: url(../images/birlestirilmis_ranklar.png) 0 0; width: 150px; height: 50px; }
.ranklar-SBT0nursal{ background: url(../images/birlestirilmis_ranklar.png) 0 -100px; width: 150px; height: 50px; }
.Admin{ background: url(../images/birlestirilmis_ranklar.png) 0 -200px; width: 150px; height: 50px; }
.Onursal{ background: url(../images/birlestirilmis_ranklar.png) 0 -300px; width: 150px; height: 50px; }
.Banned{ background: url(../images/birlestirilmis_ranklar.png) 0 -400px; width: 150px; height: 50px; }
.Doktor{ background: url(../images/birlestirilmis_ranklar.png) 0 -500px; width: 150px; height: 50px; }
.Fizyoterapist{ background: url(../images/birlestirilmis_ranklar.png) 0 -600px; width: 150px; height: 50px; }
.Moderatör{ background: url(../images/birlestirilmis_ranklar.png) 0 -700px; width: 150px; height: 50px; }
.Medikal{ background: url(../images/birlestirilmis_ranklar.png) 0 -800px; width: 150px; height: 50px; }
.PDR{ background: url(../images/birlestirilmis_ranklar.png) 0 -900px; width: 150px; height: 50px; }
.Rehabilitasyon{ background: url(../images/birlestirilmis_ranklar.png) 0 -1000px; width: 150px; height: 50px; }
.Tercüman{ background: url(../images/birlestirilmis_ranklar.png) 0 -1100px; width: 150px; height: 50px; }
.Üye{ background: url(../images/birlestirilmis_ranklar.png) 0 -1200px; width: 150px; height: 50px; }
.Vip{ background: url(../images/birlestirilmis_ranklar.png) 0 -1300px; width: 150px; height: 50px; }
.Süper{ background: url(../images/birlestirilmis_ranklar.png) 0 -1400px; width: 112px; height: 30px; }

Burada yaptığımız işlem şu:
Örneğin 9. satırda şu kod vardı:
Kod: [Seç]
.ranklar-SBTmedikal{ background: url(../images/birlestirilmis_ranklar.png) 0 -800px; width: 150px; height: 50px; }

Bu kod Medikal üye grubunun rankına ait. Yönetim panelindeki üye gruplarındaki Medikal üye grubuna dahil üyelerin görünen adı da dikkat ederseniz Medikal.

Kodun başındaki .ranklar-SBTmedikal yazısını
Kod: [Seç]
.ranklar-SBTmedikal
şu şekilde değiştirince
Kod: [Seç]
.Medikaledikal
kodumuz şu hale geldi:
Kod: [Seç]
.Medikal{ background: url(../images/birlestirilmis_ranklar.png) 0 -800px; width: 150px; height: 50px; }

Diğer 14 üye grubuna da aynı işlemi uyguladım.

Son olarak da Display.template.php dosyamızda şu kodu bulup:
Kod: [Seç]
<li class="stars">', $message['member']['group_stars'], '</li>';
Şununla değiştirip işlemi tamamlıyoruz:
Kod: [Seç]
<li class="stars"><img class="' . $message['member']['group']. '" src="' . $settings['images_url'] . '/img_trans.gif" width="1" height="1" alt="trans" /></li>';
Mümkün olduğunca sade bir şekilde anlatmaya çalıştım.
Anlatımı ve kodlamayı inceleyerek sizler de yapabilirsiniz.
Bu anlatımın uygulandığı örnek siteyi (geçici demo) aşağıdaki linkten görebilirsiniz.
Spina Bifida - Anasayfa

« Son Düzenleme: 18 Nisan 2014, 18:31 Gönderen: bolubeyi »

18 Mayıs 2014, 21:18
Yanıtla #1
  • *
    • İleti: 141
    • Karma: 1
    • Forumigo8navigation
    • Profili Görüntüle

Hocam sadece aşağıda ki kodu değiştirince ileti grubu rankları görünmüyor

Kod: [Seç]
<li class="stars">', $message['member']['group_stars'], '</li>';
Bu neden ile aşağıda ki kodu da değiştirmek zorunda kaldım.

Kod: [Seç]
<li class="postgroup">', $message['member']['post_group'], '</li>';
Ama bu durumda moderatorlerin yani benim atadığım üye grublarında iki rank görünüyor.Moderator vb. üye grublarında ileti rankının çıkmamasını nasıl sağlarız.


18 Mayıs 2014, 22:43
Yanıtla #2
  • *
    • İleti: 141
    • Karma: 1
    • Forumigo8navigation
    • Profili Görüntüle

Yönetim > Yapılandırma > Kullanılan Tema > Gruplandırılmış üyelerin grup başlıklarını gizle seçeneğini aktifleştirince ileti tabanlı üye rankları görünmedi.



18 Mayıs 2014, 23:11
Yanıtla #4
  • *
    • İleti: 141
    • Karma: 1
    • Forumigo8navigation
    • Profili Görüntüle


18 Mayıs 2014, 23:12
Yanıtla #5
  • *
    • İleti: 2018
    • Karma: 41
    • Spina Bifida
    • Profili Görüntüle

Kolay gele. Bi iş aldım da onunla meşgulüm. Bitene kadar fazla ilgilenemiyorum.


18 Mayıs 2014, 23:43
Yanıtla #6
  • *
    • İleti: 141
    • Karma: 1
    • Forumigo8navigation
    • Profili Görüntüle

Kolay gele. Bi iş aldım da onunla meşgulüm. Bitene kadar fazla ilgilenemiyorum.

Sorun değil Hocam zaman bulursanız cevaplarsınız.Sorsam da araştırıyorum.Bir şekilde sorunlar hal oluyor.Teşekkürler.