Kod, kategoriler için arka plan resim eklemenizi sağlar. Yapmanız gereken tek şey, kategori için görüntünün bir bağlantısını belirtmek, X'i kategori kimliğiyle değiştirmek.
Önerilen görüntü genişliği en az 800 pikseldir.
kategorilerin yüksekliği, kategori başlık boyutu vb renk, yazı tipi adı, açıklama, değiştirme yeteneği
extra.less
Kodun ikinci versiyonu
Hayırlı olsun
Önerilen görüntü genişliği en az 800 pikseldir.
kategorilerin yüksekliği, kategori başlık boyutu vb renk, yazı tipi adı, açıklama, değiştirme yeteneği
extra.less
extra.less ekle:
/* 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;
}
}
/**********/
Kodun ikinci versiyonu:
/* 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;
}
}
/**********/
Kategorilerin açıklamasını yalnızca forumun listesinde gizlemek istiyorsanız, bu kodu ekleyin.:
/* Hide Categories Descriptions */
.block--categoryX .block-desc {
display: none;
}
/**********/