Herkes için aynı çevrimiçi göstergeden sıkıldınız mı?
O zaman bu size göre
Uygulama çok basit.
Her şablon için bir şablon düzenleme ve bazı CSS'den oluşur.
CSS, extra.less şablonu aracılığıyla stil başına uygulanabilir .
İlk adım message_macros şablonunu düzenlemektir .
10. satırda arayın:
Şununla değiştirin:
Değişkenin (ctaOnlineIconValue) ve CSS sınıfının (ctaOnlineIcon--) adını istediğiniz gibi değiştirmekten çekinmeyin. Eklerseniz
, extra.less şablonunda aynı adı kullandığınızdan emin olun .
Sonra tek yapmanız gereken extra.less şablonuna özel CSS'nizi eklemektir .
CtaOnlineIcon-- sınıfı için 0'dan 9'a kadar her değer için benzersiz bir girişe (toplamda 10) ihtiyacınız olacak, şöyle:
hepsi bu kadar
O zaman bu size göre
Uygulama çok basit.
Her şablon için bir şablon düzenleme ve bazı CSS'den oluşur.
CSS, extra.less şablonu aracılığıyla stil başına uygulanabilir .
İlk adım message_macros şablonunu düzenlemektir .
10. satırda arayın:
Kod:
<span class="message-avatar-online" tabindex="0" data-xf-init="tooltip" data-trigger="auto" title="{{ phrase('online_now')|for_attr }}"></span>
Kod:
<xf:set var="$ctaOnlineIconValue" value="{{ $user.user_id % 10 }}" />
<span class="message-avatar-online ctaOnlineIcon--{$ctaOnlineIconValue}" tabindex="0" data-xf-init="tooltip" data-trigger="auto" title="{{ phrase('online_now')|for_attr }}"></span>Değişkenin (ctaOnlineIconValue) ve CSS sınıfının (ctaOnlineIcon--) adını istediğiniz gibi değiştirmekten çekinmeyin. Eklerseniz
, extra.less şablonunda aynı adı kullandığınızdan emin olun .
Sonra tek yapmanız gereken extra.less şablonuna özel CSS'nizi eklemektir .
CtaOnlineIcon-- sınıfı için 0'dan 9'a kadar her değer için benzersiz bir girişe (toplamda 10) ihtiyacınız olacak, şöyle:
Kod:
message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--0
{
&:before {
.m-faContent(@fa-var-star);
color: gold;
}
}
.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--1
{
&:before {
.m-faContent(@fa-var-cube);
color: green;
}
}
.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--2
{
&:before {
.m-faContent(@fa-var-circle);
color: blue;
}
}
.message-avatar-wrapper .message-avatar-online.ctaOnlineIcon--3
{
&:before {
.m-faContent(@fa-var-triangle);
color: orange;
}
}