- Uyumlu XF 2 Sürümleri
Merhabalar, buradaki Sitede f00d gibi iconlar gözükmüyor konuda yapılan istek üzerine bu konu hazırlanmıştır. Sidebar alanında Hack Status oluşturmak isteyenler ilgili kodları kullanabilirler.
Yapılması Gerekenler.
Öncelikle aşağıdaki yolu izleyerek bir widget oluşturuyoruz.
Admicp-> Görünüm ve Diller -> Widget Yöneticisi-> Widget Ekle
Karşımıza Gelen alandan HTML türünü seçiyoruz.
Örnek Resim:
Daha sonra aşağıdaki alanları dolduruyoruz.
Widget kimliği-ID: hackstatus
Başlık: Hack Status (Dilediğiniz ismi de verebilirsiniz.)
Bu alandan göstermek istediğimiz alanı seçmemiz gerekiyor. Ben Forum listesi: Kenar çubuğu alanında gösterim yaptıracağım.
Örnek Resim:
Daha sonra yine aynı alanda şablon bölümünü göreceksiniz. Bu alana aşağıdaki kodları yerleştirelim.
Örnek Resim:
Kayıt edip diğer işlemlere geçebiliriz.
Şablonlarımızdan extra.less şablonumuzu açıyoruz ve içerisine aşağıdaki less kodlarını giriyoruz.
Kayıt edip sonuca bakabiliriz.
Sizde bu şekilde farklı işlemler yapabilirsiniz.
Kolay gelsin.
Yapılması Gerekenler.
Öncelikle aşağıdaki yolu izleyerek bir widget oluşturuyoruz.
Admicp-> Görünüm ve Diller -> Widget Yöneticisi-> Widget Ekle
Karşımıza Gelen alandan HTML türünü seçiyoruz.
Örnek Resim:
Daha sonra aşağıdaki alanları dolduruyoruz.
Widget kimliği-ID: hackstatus
Başlık: Hack Status (Dilediğiniz ismi de verebilirsiniz.)
Bu alandan göstermek istediğimiz alanı seçmemiz gerekiyor. Ben Forum listesi: Kenar çubuğu alanında gösterim yaptıracağım.
Örnek Resim:
Daha sonra yine aynı alanda şablon bölümünü göreceksiniz. Bu alana aşağıdaki kodları yerleştirelim.
HTML:
<span class="hackStatus HackLoader" dir="auto"><a href="http://linkgir"> LOADER </a></span>
<span class="hackStatus hackUpdate" dir="auto"><a href="http://linkgir"> UPDATE</a></span>
<span class="hackStatus hackRun" dir="auto"><a href="http://linkgir"> RUN </a></span>
<span class="hackStatus hackNotrun" dir="auto"><a href="http://linkgir"> NOTRUN</a></span>
Örnek Resim:
Kayıt edip diğer işlemlere geçebiliriz.
Şablonlarımızdan extra.less şablonumuzu açıyoruz ve içerisine aşağıdaki less kodlarını giriyoruz.
CSS:
.hackStatus {
color: rgba(255,255,255,0.8);
border-radius: 2px;
display: inline-block;
position: relative;
padding: 10px 6px 8px 32px;
margin-bottom: 4px;
cursor: pointer;
font-weight: normal;
list-style: none;
font-size: 12px;
width: 100%;
a {
color: #FFF;
}
&:before {
background-color: rgba(0,0,0,0.2);
position: absolute;
border-right: 2px solid rgba(0,0,0,0.1);
top: 0;
bottom: 0;
left: 0;
padding: 6px 1px 0 5px;
width: 20px;
.m-faBase();
text-align: center;
font-size: 17px;
}
}
.HackLoader {
background-color: #2196F3;
&:before {
content: "\f12a";
}
}
.hackUpdate {
background-color: #ef8216;
&:before {
content: "\f021";
}
}
.hackRun {
background-color: #259845;
&:before {
content: "\f00c";
}
}
.hackNotrun {
background-color: #e30a17;
&:before {
content: "\f00d";
}
}
Kayıt edip sonuca bakabiliriz.
Sizde bu şekilde farklı işlemler yapabilirsiniz.
Kolay gelsin.