Mitgliederliste optisch anpassen

Um Im Forum Dinge optisch zu verändern, muss man sich ein wenig mit den Templates und CSS auseinander setzen.
Im Admin-Bereich gibt es unter Anzeige -> Templates die Möglichkeit, Bereiche des Forums so anzupassen wie man es gerne hätte.

Da ich (Eiki) selbst leider eine absolute Laie im Programmieren bin, habe ich mich im Support Forum nach einer Hilfe umgesucht und nach langer Suche etwas gefunden. Um euch die Suche zu ersparen dachte ich es wäre Sinnvoll das ganze hier kurz aufzuführen.

Code:

   <form action="{S_MODE_ACTION}" method="get">[size=12][/size]
    <table cellspacing="0" cellpadding="5" border="0" align="center" class="forumline" width="100%">[size=12][/size]
       <tr>[size=12][/size]
          <th class="thTop" nowrap="nowrap">{L_ORDER_OR_SELECT}</th>[size=12][/size]
       </tr>[size=12][/size]
       <tr>[size=12][/size]
          <td class="row1">[size=12][/size]
          <table cellspacing="2" cellpadding="0" border="0" align="center" class="genmed">[size=12][/size]
             <tr>[size=12][/size]
                <td width="100%">{L_USER_SELECT} <input type="text" class="post" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />      [size=12][/size]
                {L_SELECT_SORT_METHOD} {S_MODE_SELECT}      [size=12][/size]
                {L_ORDER} {S_ORDER_SELECT}       {S_HIDDEN_SID} <input class="liteoption" type="submit" name="submit" value="{L_SUBMIT}" /></td>[size=12][/size]
             </tr>[size=12][/size]
          </table>[size=12][/size]
          </td>[size=12][/size]
       </tr>[size=12][/size]
    </table>[size=12][/size]
    </form>[size=12][/size]
    <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">[size=12][/size]
       <!-- BEGIN memberrow -->[size=12][/size]
       <tr>[size=12][/size]
          <td class="{memberrow.ROW_CLASS}" align="center"><span class="gen"> {memberrow.ROW_NUMBER}&nbsp;</span></td>[size=12][/size]
          <td class="{memberrow.ROW_CLASS}" align="center"><div id="memberlist_avatar"><div align="center"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div></div></td>[size=12][/size]
              <td class="{memberrow.ROW_CLASS}" align="center"><span class="member_info"><a class="gen_member" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a><br>[size=12][/size]
[size=12][/size]
                Ist seit dem {memberrow.JOINED} in diesem Forum aktiv.<br>[size=12][/size]
                Er ist {memberrow.LASTVISIT} das letzte mal hier gewesen.<br>[size=12][/size]
                Insgesammt hat er hier {memberrow.POSTS} Beiträge verfasst.<br>[size=12][/size]
 {memberrow.PM_IMG} {memberrow.WWW_IMG}</span><br><br>[size=12][/size]
<table cellspacing="0" style="width: 400px" class="forumline">[size=12][/size]
 <tr>[size=12][/size]
 <td class="member_info_box" style="height: 70px" align="center" valign="top">[size=12][/size]
                  <div style="overflow: auto; height: 70px">{memberrow.INTERESTS}</div></td>[size=12][/size]
 </tr>[size=12][/size]
</table>[size=12][/size]
        [size=12][/size]
                </td>[size=12][/size]
          [size=12][/size]
       </tr>[size=12][/size]
       <!-- END memberrow -->[size=12][/size]
       <!-- BEGIN switch_no_user -->[size=12][/size]
       <tr>[size=12][/size]
          <td class="catBottom" colspan="{switch_no_user.COLSPAN_NUMBER}" height="28" align="center"><span class="gensmall">{switch_no_user.L_NO_USER}</span></td>[size=12][/size]
       </tr>[size=12][/size]
       <!-- END switch_no_user -->[size=12][/size]
    </table>[size=12][/size]
    <!-- BEGIN switch_pagination -->[size=12][/size]
    <table width="100%" border="0" cellspacing="0" cellpadding="0">[size=12][/size]
       <tr>[size=12][/size]
          <td><span class="nav">{PAGE_NUMBER}</span></td>[size=12][/size]
          <td align="right"><span class="nav">{PAGINATION}</span></td>[size=12][/size]
       </tr>[size=12][/size]
    </table>[size=12][/size]
[size=12][/size]
[size=12][/size]
    <!-- END switch_pagination -->

^ Diesen Code könnt ihr in das Template "Memberlist_Body" einfügen. Er ändert die Form der Tabelle in dem die verschiedenen Bausteine wie "Username" oder "Avatar" stehen. 
Wenn man etwas Ahnung von HTML hat oder ein Programm das HTML visualisiert, kann man es sich auch so anpassen, wie man es gern haben möchte. Dazu muss man die Bausteine in den runden Klammern ( z.B. {memberrow.AVATAR_IMG}) verwenden. 

Code:

/* Mitgliederliste anpassen BEGINN */[size=12][/size]
/* Bereich der Anpassung des Avatars in der Mitgliederliste*/[size=12][/size]
#memberlist_avatar img {[size=12][/size]
    max-height: 100px;[size=12][/size]
    max-width: 100px;[size=12][/size]
    -webkit-border-radius: 10px;[size=12][/size]
    -moz-border-radius: 10px;[size=12][/size]
    border-radius: 10px;[size=12][/size]
}[size=12][/size]
/* Bereich der anpassung des Usernamens in der Mitgliederliste*/[size=12][/size]
.gen_member , a.gen_member{[size=12][/size]
    font-family: "Amatic SC",cursive;[size=12][/size]
    font-size: 39px;[size=12][/size]
    font-weight: lighter;[size=12][/size]
    letter-spacing: -2px;[size=12][/size]
    text-align: center;[size=12][/size]
    text-shadow: 4px 3px 4px #1f1f29;[size=12][/size]
    text-decoration: none;[size=12][/size]
}[size=12][/size]
/* Bereich der Mitglieder Information in der Mitgliederliste*/[size=12][/size]
.member_info {[size=12][/size]
    text-transform: uppercase;[size=12][/size]
    font-weight: lighter;[size=12][/size]
    letter-spacing: 0.2em;[size=12][/size]
    font-family: gisha;[size=12][/size]
}[size=12][/size]
/* Bereich der Mitglieder Inforbox in der Mitgliederliste*/[size=12][/size]
.member_info_box {[size=12][/size]
    background-color: #e5e5e5;[size=12][/size]
    border: 1px solid #c7c7c7;[size=12][/size]
    text-transform: uppercase;[size=12][/size]
    font-family: gisha;[size=12][/size]
     -webkit-border-radius: 10px;[size=12][/size]
    -moz-border-radius: 10px;[size=12][/size]
    border-radius: 10px;[size=12][/size]
}[size=12][/size]
/* Mitgliederliste anpassen END */

^ Diesen Code fügt ihr unter Anzeige -> Farben und dann CSS Stylesheet ein.
Dieser kümmert sich um Farben, Schriftarten und Schriftgröße oder auch um die Größe des Anzeigebildes. 
Hier ist es leicht etwas herum zu probieren. Die Schriftgröße oder Art zu verändern oder das "uppercase" also alles in Großbuchstaben, heraus zu nehmen.

Wenn ihr bestimmte Farbcodes braucht (z.B. #ffffff) dann schaut am besten mal hier: >>Hexal Farbcodes<<

Ich hoffe das ganze ist ersichtlich. Probiert am besten selbst aus.
Der Code stammt nicht von uns! Hier geht's zum Originalbeitrag im Supportforum.