İnfo
Administrator
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.
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!
Yalnızca forum listesindeki Kategori Açıklamalarını gizlemek istiyorsanız, bu kodu extra.less'inize ekleyin.
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.
Kod:
/* 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!
Kod:
/* 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;
}
}
/**********/
Kod:
/* Hide Categories Descriptions */
.block--categoryX .block-desc {
display: none;
}
/**********/