Mod SMF Grafik Kullanmadan Rank Oluşturma

[Kerem]

@cakal hocam aşağıda ki rankı yeni forumda gördüm ve senden istekte bulunayım dedim. Aşağıda ki rank ı xenforo da görüyordum nasıl yapılır diye kafa yordum ama beceremedim. Şimdi f1wm.net de gördüm ki yapmışsınız, eğer mümkünse paylaşırsanız sevinirim. Ranklardan da grafik dosyalarını azaltmaya çalışıyorum.

 

[cakal]

Merhaba @Kerem hocam Bu konu biraz sorunlu burada smf nin bir hatası söz konusu burada tartışıldı lakin bir sonuç bulunamadı bende GitHub da buğ bildiriminde bulundum şöyleki profiller yönetici yazar diye iki guruba ayarlanmış lakin bunları ID bazlı yapmamışlar haliyle ayarlama yapamıyorsun bende şöyle bir çözüm geliştirdim
Display.template.php
Default kod bu (Bu kod yönetici tayfasını temsil ediyor)

// Show the member's primary group (like 'Administrator') if they have one.
    if (!empty($message['member']['group']))
        echo '
                                <li class="membergroup">', $message['member']['group'], '</li>';

Böyle değiştirdim

// Show the member's primary group (like 'Administrator') if they have one.
    if (!empty($message['member']['group']))
        echo '
                                <li id="membergroup" class="', $message['member']['group'], '">

Buradaki mantık ID Parameter ile gurup ismini alma
yazar bölümüne de ayni taktiği uyguluyoruz

Default kod

// Show the post group if and only if they have no other group or the option is on, and they are in a post group.
        if ((empty($modSettings['hide_post_group']) || empty($message['member']['group'])) && !empty($message['member']['post_group']))
            echo '
                                <li class="postgroup">', $message['member']['post_group'], '</li>';

Böyle değiştirdim

// Show the post group if and only if they have no other group or the option is on, and they are in a post group.
        if ((empty($modSettings['hide_post_group']) || empty($message['member']['group'])) && !empty($message['member']['post_group']))
            echo '           
                                <li id="postgroup" class="', $message['member']['post_group'], '">

Benim uyguladığım tasarim

1.

// Show the member's primary group (like 'Administrator') if they have one.
    if (!empty($message['member']['group']))
        echo '
                                <li id="membergroup" class="', $message['member']['group'], '">
                                <div class="btn-group user-select-none" role="group" aria-label="Kategori Moderatörü"> <span class="btn btn-success active no-pointer">
                                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<g>
    <g>
        <path style="fill:#FFFFFF;" d="M5.049,2.251h10.536L14.707,6.49H9.694l-0.708,3.647h4.588l-0.85,4.269H8.051l-1.558,7.827H1
            L5.049,2.251z"/>
        <path style="fill:#FFFFFF;" d="M13.656,22.233l2.917-14.379c-0.623-0.06-1.076-0.178-1.359-0.267l0.708-3.469
            c1.331-0.119,2.436-0.593,3.2-1.364h3.88l-3.937,19.479H13.656z"/>
    </g>
</g>
</svg>
                                 </span>
                                  <span class="btn btn-success no-pointer">', $message['member']['group'], '</span> </div>
                                </li>';

2.

// Show the post group if and only if they have no other group or the option is on, and they are in a post group.
        if ((empty($modSettings['hide_post_group']) || empty($message['member']['group'])) && !empty($message['member']['post_group']))
            echo '           
                                <li id="postgroup" class="', $message['member']['post_group'], '">
                                <div class="btn-group user-select-none" role="group" aria-label="Kategori Moderatörü"> <span class="btn btn-success active no-pointer">
                                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<g>
    <g>
        <path style="fill:#FFFFFF;" d="M5.049,2.251h10.536L14.707,6.49H9.694l-0.708,3.647h4.588l-0.85,4.269H8.051l-1.558,7.827H1
            L5.049,2.251z"/>
        <path style="fill:#FFFFFF;" d="M13.656,22.233l2.917-14.379c-0.623-0.06-1.076-0.178-1.359-0.267l0.708-3.469
            c1.331-0.119,2.436-0.593,3.2-1.364h3.88l-3.937,19.479H13.656z"/>
    </g>
</g>
</svg>
                                 </span>
                                  <span class="btn btn-success no-pointer">', $message['member']['post_group'], '</span> </div>
                                
                                </li>';

css

/* profil-renx */
.btn-group, .btn-group-vertical {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}
.btn-group {
    border-radius: var(--border-color);
}
.btn-group-vertical>.btn, .btn-group>.btn {
    position: relative;
    flex: 1 1 auto;
}
.btn.active {
    color: var(--btn-active-color);
    background-color: rgba(0, 0, 0, 0.15);
    border-color: var(--btn-active-border-color);
}
.btn-group>.btn.active, .btn-group>.btn:active, .input-group .btn:focus {
    z-index: 5;
}
.btn.active svg {
    z-index: 10;
    width: 19px;
    height: 13px;
}
.no-pointer {
    cursor: default;
}
.btn-group .btn-success {
    border-color: transparent;
    --btn-hover-bg: rgba(var(--danger-rgb), .8);
}
.btn, .btn-action {
    display: inline-flex;
    align-items: center;
}
.btn {
    font-size: 1.25rem;
    justify-content: center;
    white-space: nowrap;
}
.btn {
    --btn-padding-x: 1rem;
    --btn-padding-y: 0.4375rem;
    --btn-font-size: 0.875rem;
    --btn-line-height: 1.4285714286;
    --btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);
    --btn-disabled-opacity: 0.4;
    display: inline-block;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    font-size: var(--btn-font-size);
    line-height: var(--btn-line-height);
    text-align: center;
    vertical-align: middle;
    user-select: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.smallInfo .Yönetici {
    color: #fff;
    background: var(--yonetici);
    border-radius: var(--border-radius);
}
.smallInfo .Moderatör {
    color: #fff;
    background: var(--modarator);
    border-radius: var(--border-radius);
}
.smallInfo .Ziyaretçi, .smallInfo .Yeni, .smallInfo .Acemi {
    color: #fff;
    background: var(--ziyaretci);
    border-radius: var(--border-radius);
}

 

[Kerem]

Teşekkür ederim hocam, anladım gibi Bilgisayar başına geçince uygulayacağım. Takılırsam rahatsız ederim.