Kategori Kimliğine göre Kategori Şeritlerine Resim Ekleme

[Michaelgen]

Bu, extra.less şablonunuza eklenecek küçük bir koddur. Bu, Kategori Kimliğine göre resim eklemenizi sağlar. Tek yapmanız gereken kendi resimlerinizi sunucunuza yüklemek ve X'i değiştirerek resmi eklediğiniz Kategori Kimliğinizle birlikte resim yolunu veya resim URL bağlantısını koda eklemektir.

Bu yalnızca varsayılan olarak test edilmiştir. PC, iPhone 5,6,7, iPad 3,4 ve PS4'te stiller.
Test edilen tarayıcılar: Mozilla Firefox, Google Chrome, Opera, Microsoft Edge, Safari.

Önerilen resim genişliği 800 pikselden küçük olamaz.

Kategori Yüksekliği, Kategori Başlık Boyutu, Başlık ve Açıklamalar için Yazı Tipi Rengini

değiştirebilirsiniz. Renkleri vs. istediğiniz gibi değiştirmeyi unutmayın, umarım işinize yarar.

Bu ilk kod, yalnızca temel resim ekleme kodudur. Hemen çıkmak istiyorsanız aşağıdaki ikinci koda bakın.

/* Categories Images and Title */
.block--categoryX .block-header {
background: blue url("../images/cover-image.jpg") no-repeat center / cover;
color: #FFF;
overflow: hidden;
}
/**********/
/* Categories Title Hover */
.block--categoryX .block-header a:hover {
color: #FFF;
text-decoration: none;
opacity: .7;
}
/**********/
/* Categories Descriptions */
.block--categoryX .block-desc {
color: #000;
}
/**********/
/* Categories Images and Title Responsive */
@media (max-width: @xf-responsiveMedium)
{
    .block--categoryX .block-header {
        max-height: inherit;
    }
}
/**********/

Bu isteğe bağlı kod, eğlenmek ve ortalığı karıştırmak içindir. Bunu kullanıyorsanız yukarıdaki kodu kaldırın!

/* Categories Images and Title */
.block--categoryX .block-header {
background: blue url("../images/cover-image.jpg") no-repeat center / cover;
max-height: 60px;
text-transform:;
font-weight: bold;
font-size: 20px;
font-family: cursive;
color: #FFF;
text-shadow: black 0.1em 0.1em 0.2em;
overflow: hidden;
}
/**********/
/* Categories Title Hover */
.block--categoryX .block-header a:hover {
color: #FFF;
text-decoration: none;
opacity: .7;
}
/**********/
/* Categories Descriptions */
.block--categoryX .block-desc {
color: #000;
text-transform:;
font-family: monospace;
text-shadow:
   -1px -1px 0 #FFF,
    1px -1px 0 #FFF,
    -1px 1px 0 #FFF,
     1px 1px 0 #FFF;
}
/**********/
/* Categories Images and Title Responsive */
@media (max-width: @xf-responsiveMedium)
{
    .block--categoryX .block-header {
        max-height: inherit;
    }
}
/**********/

Yalnızca forum listesindeki Kategori Açıklamalarını gizlemek istiyorsanız, bu kodu extra.less'inize ekleyin.

/* Hide Categories Descriptions */
.block--categoryX .block-desc {
display: none;
}
/**********/