Hello all,
the following tutorial will help you to add the letters in alphabetical order to the member list.
_______________________
the following tutorial will help you to add the letters in alphabetical order to 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;
}
------------------------------
Little trick
I hope you like it
_____________________________
كونان2000 (❁´◡`❁)