Nasıl yapılır ? Konu etiketleri "prefix"

caylak004 · 22 Ocak 2021

Selamun Alekyum dostlarim umarim ki heminizin sagligi yerindedir, sevgili arkadaslar ya kac zamandir su etiketleri "prefix" kenti forumum icin tasarlamak istiyorum lakin Css ve html bilmedigim icin fazla ilerleme kayt etmiyorum, bende burdaki konuya bkatim o islemleri takip edince basarili bir sekilde ayarlayabildim lakin gorsellik acisindan fazla hosuma gitmedi ve tekrardan bir arayis icine girdim sonra yabanci bir forumda cok hos birtane buldum kendimde v7 temayi kulandigim icin baya uyumlu olacak fakat ne yaptiysam olmadi bende kodlari ve gorselleri buraya atmak istiyorum acaba bunlarin sonucunda bana yardim edebilecek biri cikabilirmi diye.

On gesterim bu

Kod:

/*** Prefix Pack A ***/
.label.label--pack-a {
    background: #CD7F32;
    color: #fafafa;
    &:hover {
        background: #4A4E51;
        color: #fafafa;
    }
    &:before {
        .m-faBase();
        .m-faContent(@fa-var-cogs);
        padding-right: 5px;
    }
}
/**********/

burda da normal adimlari gostermis lakin gene de atayim ben

Ve son olarak da ikon vs degistirmek icin neler yapilmali gibi adimlari atmis

For different prefix name just change pack-a in the code.

To edit prefix when hover check class &:hover.

To edit prefix icon check class &:before. To change the Font Awesome icon edit the word cogs (in above example) with any other icon name.

Want a Pro icon of a specific style?

Edit .m-faBase(); and change it to .m-faBase('Pro', @faWeight-solid);, .m-faBase('Pro', @faWeight-regular); or .m-faBase('Pro', @faWeight-light);.

Want a Brand icon?

Edit .m-faBase(); and change it to .m-faBase('Brands');.

That's basically it. To add more custom prefixes just go through the above procedure for each prefix.

caylak004 · 22 Ocak 2021

birinci resim, neden gitti anlamadim

buda ikinci resim

netr0n · 22 Ocak 2021

Hepsini tek tek uygulayacaksınız. Aşağıdaki işlemleri uygularsanız istediğiniz öneklere ranklara uyarlayabilirsiniz. Ben rank üzerinden anlatacağım önekler de de mantık aynıdır.

Önce admin grubundan başlayacağım. Resimde gösterdiğiniz ikinci alana örnek adminRank olarak girin. Dilediğiniz css sınıf adını da verebilirsiniz. Daha sonra aşağıdaki css kodlarını extra.less şablonuna ekleyiniz.

Konu prefixlerinde (önekler) değil de benim gibi bu şekilde ranklarda kullanacaklar aşağıdaki css kodunu en üst alana eklesinler.

Less:

.userBanner {

    text-align: left !important;

}

Rank olarak değil de konu öneklerinde kullanacak kişiler yukarıdaki css kodunu eklemesinler.

Less:

.adminRank {
    background: #CD7F32;
    color: #fafafa;
    &:hover {
        background: #4A4E51;
        color: #fafafa;
    }
    &:before {
        .m-faBase();
        .m-faContent(@fa-var-cogs);
        padding-right: 5px;
    }
}

Yukarıdaki aynı işlemleri bu sefer moderatörler için uygulayalım. Bu sefer css sınıf adımı .modRank olarak ayarlıyorum. aşağıdaki css kodlarını extra.less şablonuna ekleyiniz.

Less:

.modRank {
    background: #ececfc;
    color: #909090;
    &:hover {
        background: #4A4E51;
        color: #fafafa;
    }
    &:before {
        .m-faBase();
        .m-faContent(@fa-var-cogs);
        padding-right: 5px;
    }
}

Yukarıdaki aynı işlemleri bu sefer kullanıcı grubu için uygulayalım. Bu sefer css sınıf adımı .uyeRank olarak ayarlıyorum. aşağıdaki css kodlarını extra.less şablonuna ekleyiniz.

Less:

.uyeRank {
    background: #ffd701;
    color: #909090;
    &:hover {
        background: #4A4E51;
        color: #fafafa;
    }
    &:before {
        .m-faBase();
        .m-faContent(@fa-var-cogs);
        padding-right: 5px;
    }
}

Yukarıdaki aynı işlemleri bu sefer süper moderatör grubu için uygulayalım. Bu sefer css sınıf adımı .superModRank olarak ayarlıyorum. aşağıdaki css kodlarını extra.less şablonuna ekleyiniz.

Less:

.superModRank{
    background: #7dbe38;
    color: #fafafa;
    &:hover {
        background: #4A4E51;
        color: #fafafa;
    }
    &:before {
        .m-faBase();
        .m-faContent(@fa-var-cogs);
        padding-right: 5px;
    }
}

Sonuç

caylak004 · 23 Ocak 2021

Adamlik Kavrami senden once bir içi boş bir kalip kelimeden ibaretti admin

adamsin bide font awsome 5 ikonlarini nasil kulanacagimido soyle seni rahat brakayim.

netr0n · 23 Ocak 2021

caylak004' Alıntı:
Adamlik Kavrami senden once bir içi boş bir kalip kelimeden ibaretti admin adamsin bide font awsome 5 ikonlarini nasil kulanacagimido soyle seni rahat brakayim.

Estağfurullah.

Bunun için kodların içerisindeki şu kodu .m-faContent(@fa-var-cogs); bu .m-faContent("\f521"); şekilde fontawesome kodları ile çağırmanız gerekiyor. Icon kodlarını buradan https://fontawesome.com/icons alabilirsiniz.

Ara

Ara

Foruma hoş geldin 👋, Ziyaretçi

Nasıl yapılır ? Konu etiketleri "prefix"

caylak004

Aktif kullanıcı