Kategorilere icon koyma

  • Kullanıcı ffa3
  • Başlangıç tarihi Başlangıç tarihi
  • - XenForo'da nasıl yapılır ?
Merhaba kategorilerin sol tarafına icon nasıl koyabiliriz Örneğin;

Screenshot_5.webp

Bir de konuya resim eklediğimizde arkaplanda imza nasıl atabiliriz resimdeki gibi otomatik yüklenince eklenicek


Screenshot_5.webp
 
Aşağıdaki kodları,
extra.less şablonuna ekle,

Kod:
.block-header:before {
    background: #f2930d;
    color: #fff;
    width: 40px;
    height: 30px;
    text-align: center;
    margin-top: -5px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 50%;
    position: absolute;
    left: 0;
    content: "\f164";
    vertical-align: middle;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.block-header a {
    padding-left: 35px;
}

Renkleri ve iconu kendine göre ayarla,

1542479076436.webp
 
Aşağıdaki kodları,
extra.less şablonuna ekle,

Kod:
.block-header:before {
    background: #f2930d;
    color: #fff;
    width: 40px;
    height: 30px;
    text-align: center;
    margin-top: -5px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 50%;
    position: absolute;
    left: 0;
    content: "\f164";
    vertical-align: middle;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.block-header a {
    padding-left: 35px;
}

Renkleri ve iconu kendine göre ayarla,

Ekli dosyayı görüntüle 4832
Hocam her kategorinin farklı iconunu nasıl yaparız
 
Yukarıda verdiğim kodu her kategori için ayrı ayrı eklemen gerekir,
Örneğin; Kategori ID no su 5 se;
Kod şu şekilde olacak.

Kod:
.block--category5 .block-header:before {
    background: #f2930d;
    color: #fff;
    width: 40px;
    height: 30px;
    text-align: center;
    margin-top: -5px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 50%;
    position: absolute;
    left: 0;
    content: "\f164";
    vertical-align: middle;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
 
Yukarıda verdiğim kodu her kategori için ayrı ayrı eklemen gerekir,
Örneğin; Kategori ID no su 5 se;
Kod şu şekilde olacak.

Kod:
.block--category5 .block-header:before {
    background: #f2930d;
    color: #fff;
    width: 40px;
    height: 30px;
    text-align: center;
    margin-top: -5px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 50%;
    position: absolute;
    left: 0;
    content: "\f164";
    vertical-align: middle;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
hocam kategori yazısının üzerine geliyor ve kapatıyor siteye bakabilirsiniz.
 
Kişiselleştirme

Tema editörü

Ayarlar Renkler

  • Mobil kullanıcılar bu fonksiyonları kullanamaz.

    Alternatif header

    Farklı bir görünüm için alternatif header yapısını kolayca seçebilirsiniz.

    Görünüm Modu Seçimi

    Tam ekran ve dar ekran modları arasında geçiş yapın.

    Izgara Görünümü

    Izgara modu ile içerikleri kolayca inceleyin ve düzenli bir görünüm elde edin.

    Resimli Izgara Modu

    Arka plan görselleriyle içeriğinizi düzenli ve görsel olarak zengin bir şekilde görüntüleyin.

    Yan Paneli Kapat

    Yan paneli gizleyerek daha geniş bir çalışma alanı oluşturun.

    Sabit Yan Panel

    Yan paneli sabitleyerek sürekli erişim sağlayın ve içeriğinizi kolayca yönetin.

    Box görünüm

    Temanızın yanlarına box tarzı bir çerçeve ekleyebilir veya mevcut çerçeveyi kaldırabilirsiniz. 1300px üstü çözünürler için geçerlidir.

    Köşe Yuvarlama Kontrolü

    Köşe yuvarlama efektini açıp kapatarak görünümü dilediğiniz gibi özelleştirin.

  • Renginizi seçin

    Tarzınızı yansıtan rengi belirleyin ve estetik uyumu sağlayın.

Geri