İpuçları&öneriler Kategori Arka Plan Görüntüsü

XFdestek

Kurucu Üye
XFD Üyesi
Katılım
25 May 2014
Mesajlar
832

İtibar:

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
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
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;
}
/**********/
Hayırlı olsun
 
Üst Alt