add letters at the top of the member list

example, when pressing the letter "m"
A list of members whose names begin with the letter "m" will appear.

Same with the rest of the letters
--------------------------------------------------


Works on all versions


   Go to Administration Panel > Display > Templates > memberlist_body
ADD :

Code:

<div class="A-B-C-D-E-F-G">
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=A">A</a></div>
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=B">B</a></div>
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=C">C</a></div>
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=D">D</a></div>
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=E">E</a></div>
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=F">F</a></div>
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=G">G</a></div>
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=H">H</a></div>
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=I">I</a></div>
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=J">J</a></div>
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=K">K</a></div>
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=L">L</a></div>
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=M">M</a></div>
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=N">N</a></div>
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=O">O</a></div>
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=P">P</a></div>
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=Q">Q</a></div>
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=R">R</a></div>
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=S">S</a></div>
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=T">T</a></div>
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=U">U</a></div>
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=V">V</a></div>
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=W">W</a></div>
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=X">X</a></div>
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=Y">Y</a></div>
<div class="A-B-C-D"><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username=Z">Z</a></div>
</div>

AFTER :

Code:

</form>

  Go to Administration Panel > Display > Colors & CSS > CSS stylesheet
paste the following rules in your stylesheet.

Code:

.A-B-C-D-E-F-G {
    display: flex;
    overflow: hidden;
    padding: 5px;
    text-align: center;
    font-size: 30px;
    background: #fff;
    justify-content: space-between;
direction: ltr;
}
.A-B-C-D a {
    display: block;
    margin-bottom: 3px !important;
    background: #2632381f;
    border: solid 1px #00000059;
    padding: 5px;
    font-size: 17px;
}
.A-B-C-D a:hover{
    background: #000;
    color: #fff;
}

  Don't forget to save
------------------------------

Little trick 
I hope you like it 
_____________________________


كونان2000 (❁´◡`❁)

Thanks for sharing i use this trick with a similar code its very useful

skouliki wrote:Thanks for sharing i use this trick with a similar code its very useful

I thought I was the first to make this trick without javascript

Ange Tuteur created a similar tutorial.

كونان2000 wrote:

skouliki wrote:Thanks for sharing i use this trick with a similar code its very useful

I thought I was the first to make this trick without javascript

yes you are !...he used Javascript

SLGray wrote:Ange Tuteur created a similar tutorial.

I really didn't know this before  
I went to Ange Tuteur forum
I already found similar code but it works in javascript
Also, when you refresh the page, the list of members you were browsing changes,


The new code works without javascript and the list of members does not change when the page is refreshed.
  And there are no errors 

skouliki wrote:
yes you are  !...he used Javascript

Thanks skouliki 

Wow great  @كونان2000

TonnyKamper wrote:Wow great  @كونان2000

Thanks TonnyKamper ^^

Sort member list alphabeticall ? Hmm, not bad :3

Thanks YoshiGM ^^