Admin ve Profil Menü İconlarını Değiştirme

PALAUDIS · 19 Haz 2022, 12:35 ÖS

Admin ve Profil Menü İconlarını Değiştirme

Yan tarafta gördüğünüz menü iconlarını FontAwesome vb. bir tarza mı dönüştürmek istiyorsunuz? Css ile de yapılabilir fakat yoğun bir uğraş gerektirir. Bundan dolayı en basit şekli ile anlatmaya çalışacağım. En başta örnekte kullandığımız için FontAwesomu'u entegre etmemiz gerekli yada CDN hizmetinden yararlanmalıyız. FontAwesome'u SMF'ye ne şekilde ekleyebileceğimizi buradan ayrıntılı olarak okuyabilirsiniz.

Yukarıdaki işlemleri ve ayrıntılı bilgiyi okuduğunuzu varsayarak devam ediyorum.

Aşağıda gerekli dosyaları açarak belirlediğimiz işlemleri yapmış olduğunuzda sistemde bulunan iconların yerine (Bir kaçı haricinde) görülmeyeceklerdir. Bu bir hata değildir aksine font çekme işleminin gerçekleştiğini ama .class taglarını eklemeniz gerektiğine bir işarettir.

FontAwesome'u sitenize eklediyseniz kendi css dosyası üzerinden tasarlamanız daha elverişli olacaktır. CDN olarak eklediyseniz index.css dosyası üzerinden işlemlere devam edeceğiz.

Ben anlatımımda fontawesome.css dosyanız üzerinden anlatım yapmaya gayret göstereceğim. Şimdi aşağıdaki değişiklikleri yerine getiriyoruz. Ana dizinde bulunan Sources Klasörümüz içindeki Subs-Menu.php içerisindeki değişikliğimizi yaptıktan sonra mevcut icon resimleri kaybolacaktır.

Sources/Subs-Menu.php

Bul Seç

$menu_context['sections'][$section_id]['areas'][$area_id]['icon'] = '<span class="main_icons ' . $area['icon'] . '"></span>';

Değiştir Seç

$menu_context['sections'][$section_id]['areas'][$area_id]['icon'] = '<span class="fa-solid fa-' . $area['icon'] . ' fa-lg"></span>';

Şimdi sıra yeni ekleyeceğimiz iconların alanını ayarlamaya. Menü yazılarının aynı hizada olması için bu işlem önemlidir.

temanız/css/index.css

Sonuna Ekle Seç

.dropmenu li:hover li a span, .dropmenu li li a span {
    margin-right: 3px;
    width: 20px;
}

Yukarıdaki eklenen kodlar sonrasında görüntüler aşağıdaki gibi olmuştur. Css dosyasına eklenen koddan önce ve sonraki şekilleri resimlerde görebilirsiniz.

Şimdi sıra geldi boş görünen yerlere iconları css üzerinden eklemeye. En başta aynı yada benzer iconları not almamız gerekli elbette. Ve FontAwesome/Search sayfasını kullanarak işlemlere devam edeceğiz.

İcon isimlerini bulmanın 2 şekli vardır. Ben her ikisinden de burada bahsedeceğim ve siz hangisi kolayınıza geliyorsa onu uygularsınız.

İlk seçeneğimiz Sources/Admin.php dosyası olacak. Bu dosyayı açtığınızda daha 50. satıdan başlayan kodlar gözünüze zaten çarpacaktır.

'index' => array(
					'label' => $txt['admin_center'],
					'function' => 'AdminHome',
					'icon' => 'administration',
				),
				'credits' => array(
					'label' => $txt['support_credits_title'],
					'function' => 'AdminHome',
					'icon' => 'support',
				),

Yukarıda gördüğünüz gibi 'icon' => 'administration', alanında administration bizim menümüzdeki butonun class özeliği taşıyan elemanı. En başta değişiklik yaptığımız Subs-Menu.php değişikliği sonrasında (FontAwesome olarak belirlediğimiz) yerlerde durum şu şekilde olmaktadır: fa-solid fa-administration. Buraya kadar anlaşıldığını düşünüyorum.

Şimdi ikinci anlatıma geleyim. Bu manuel olarak yapacağınız bir olaydır. Sayfanızda çıkmayan yerlere gelerek sağ tıklayıp "öğeyi denetle" diyoruz.

alt resimde görüleceği üzere mavi olarak işaretlenmiş satıra dikkat ederseniz <span class="fad fa-features fa-lg"></span> orada durmaktadır. FontAwesome ile eşleştirme işleminin nasıl oalcağına geldi sıra. Ben aşağıda sizlere hazır olacak sunacağım fakat farklı bir font ailesini kullanırsanız bu işlemleri yapmak zorunda olduğunuzu unutmayın[/p]

Örneğe göre anlatıma devam ediyorum. fa-features olarak bulduğumuz class tagını Css dosyasında kullanacağız. Bu icon "Özellikler ve Seçenekler sayfasına ait olduğundan seçenek kutusu gibi bir icon kullanabilirsiniz. FontAwesome sitesinde arattığınızda "pager" olarak çıkan ikonun content:; css tagı karşılığını f815'miş.

Bizim Cssdosyamıza ise ekleyeceğimiz kod şu şekilde olacaktır:

.fa-features:before{content:"\f815"}

DetailWebDesign oalrak kullandığımız şekli ile "solid" olarak uygulayabileceğiniz kodlar şunlardır:

.fa-administration:before{content:"\f007"}
.fa-stats:before{content:"\f080"}
.fa-posts:before{content:"\f4a4"}
.fa-drafts:before{content:"\f0c7"}
.fa-alerts:before{content:"\f071"}
.fa-permissions:before{content:"\f084"}
.fa-logs:before{content:"\e542"}
.fa-maintain:before{content:"\e542"}
.fa-members:before{content:"\e542"}
.fa-features:before{content:"\f815"}
.fa-boards:before{content:"\e42e"}
.fa-frenemy:before{content:"\e594"}
.fa-packages:before{content:"\f019"}
.fa-members_delete:before{content:"\f2ed"}
.fa-personal_message:before{content:"\f0e0"}
.fa-support:before{content:"\f1cd"}
.fa-news:before{content:"\f1ea"}
.fa-news:after{content:"\f1ea\f1ea"}
.fa-security:after{content:"\f30d\f30d"}
.fa-languages:before{content:"\f1ab"}
.fa-reports:before{content:"\f08b"}
.fa-current_theme:before{content:"\e235"}
.fa-themes:before{content:"\e1c3"}
.fa-modifications:before{content:"\e443"}
.fa-smiley:before{content:"\e409"}
.fa-attachment:before{content:"\f0c6"}
.fa-engines:before{content:"\f718"}
.fa-membergroups:before{content:"\f500"}
.fa-regcenter:before{content:"\f234"}
.fa-paid:before{content:"\f53a"}
.fa-scheduled:before{content:"\f34e"}
.fa-mail:before{content:"\f674"}

Hepinize kolay gelsin. Her hangi bir aksaklık yada sormak istediğiniz bir durum olursa çekinmeden sorabilirsiniz.

Emeğe Saygı..

Detail Web Design