Bonjour, bonsoir -- voici l'affichage du profil en libre-service appartenant au #pink-theme. Le profil est codé en flex, la largeur de votre forum ne devrait pas poser de problème comme il se redimensionne tout seul,
voici un petit tutoriel pour que vous puissiez installer le code sans problème.

Vous avez deux versions du code, une où vous avez le profil avec la feuille de personnage (si activé sur votre forum) et une version sans (si vous n'avez pas de feuille de personnage).

VERSION LIVE AFFICHAGE D'UN PROFIL (sans feuille rpg)
VERSION LIVE AFFICHAGE D'UN PROFIL (avec feuille rpg)

AUTRES ÉLÉMENTS DU PINK THEME
LIEN VERS LA PA
LIEN VERS LES CATÉGORIES
LIEN VERS LE QEEL
LIEN VERS LES FORMULAIRES
LIEN VERS LA LISTE DES SUJETS

Avant toute chose, s'il vous plaît n'oubliez pas de créditer. Si je remarque qu'il n'y en pas, je vais le notifier à FA. Respectez s'il vous plaît le travail qui a été fait.


Si vous avez des questions je vous renvoie à mon tumblr et/ou ce sujet sur le forum.


HTML
Le code a été fait pour trois version que forumactif propose: ModernBB, PHPBB3 et PHPBB2. Pour les versions ModernBB et PHPBB3 ce sont les mêmes codes.

FAITES ATTENTION À CE QUE LE PROFIL SIMPLE SOIT ACTIVÉ!
Si ce n'est pas le cas vous devez vous rendre ici et vous assurer que le profil avancé est bien coché à non:
panneau d'administration > Utilisateurs & Groupes > Utilisateurs > Profils > Options générales > Activer le profil avancé : non

Vous pouvez trouver la template HTML dont vous avez besoin ici:
affichage > templates > profil > profile_view_body

Copiez le code ci-dessous et collez le dans la template, vous pouvez TOUT remplacer sauf le script. Donc collez le tout avant cette partie:

Code:

<script src="{JQUERY_ROOT}json/jquery.json-1.3.min.js" type="text/javascript"></script>

Tout le code JavaScript en-dessous doit rester intact, donc n'y touchez pas.

HTML MODERNBB & PHPBB3 (SANS FEUILLE RPG)

Code:

<div class="spro_1">
    <div class="spro_2">
        <div class="spro_avarang">
            <div class="spro_rang">
                <div class="spro_username">
                    {USERNAME}
                </div>
                <div class="spro_rang2">
                    {POSTER_RANK}
                </div>
            </div>
            <div class="spro_avatar">
                <span id="avatar_membre">{AVATAR_IMG}</span>
            </div>
        </div>
    </div>
    <div class="spro_3">
        <div class="spro_lastvisit">
            {LAST_VISIT_TIME}
        </div>
        <div class="spro_profile">
            <div class="spro_contact">
                <!-- BEGIN switch_show_status -->
                {USER_ONLINE}
                <!-- END switch_show_status -->
                <!-- BEGIN contact_field -->
                {contact_field.CONTENT}
                <!-- END contact_field -->
            </div>
            <div class="spro_info">
                <!-- BEGIN switch_dhow_mp -->
                <dl class="left-box details">
                    <dt>MESSAGES PRIVÉS: </dt>
                    <dd>{PRIVATE_MSG}</dd>
                </dl>
                <!-- END switch_dhow_mp -->

                <!-- BEGIN profile_field -->
                <dl id="field_id{profile_field.ID}" class="left-box details">
                    <dt>{profile_field.LABEL}</dt>
                    <dd>{profile_field.CONTENT}</dd>
                </dl>
                <!-- END profile_field -->
            </div>
        </div>
        <div class="spro_links">
            <a rel="nofollow" href="/st/{PUSERNAME}">SUJETS OUVERTS</a>
            <a rel="nofollow" href="/sta/{PUSERNAME}">{L_TOPICS}</a>
            <a rel="nofollow" href="/spa/{PUSERNAME}">{L_POSTS}</a>
        </div>
    </div>
</div>

{ADMINISTRATE_USER}{BAN_USER}

HTML POUR PHPBB2 (SANS FEUILLE RPG)

Code:

<div class="spro_1">
    <div class="spro_2">
        <div class="spro_avarang">
            <div class="spro_rang">
                <div class="spro_username">
                    {USERNAME}
                </div>
                <div class="spro_rang2">
                    {POSTER_RANK}
                </div>
            </div>
            <div class="spro_avatar">
                <span id="avatar_membre">{AVATAR_IMG}</span>
            </div>
        </div>
    </div>
    <div class="spro_3">
        <div class="spro_lastvisit">
            {LAST_VISIT_TIME}
        </div>
        <div class="spro_profile">
            <div class="spro_contact">
                <!-- BEGIN switch_show_status -->
                {USER_ONLINE}
                <!-- END switch_show_status -->
                <!-- BEGIN contact_field -->
                {contact_field.CONTENT}
                <!-- END contact_field -->
            </div>
            <div class="spro_info">
                <!-- BEGIN switch_dhow_mp -->
                <table>
                    <tr>
                        <td class="pro_field">MESSAGES PRIVÉS: </td>
                        <td class="prof_info">{PRIVATE_MSG}</td>
                    </tr>
                </table>
                <!-- END switch_dhow_mp -->

                <!-- BEGIN profile_field -->
                <table>
                    <tr id="field_id{profile_field.ID}">
                        <td class="pro_field">{profile_field.LABEL}  </td>
                        <td class="prof_info">{profile_field.CONTENT}</td>
                    </tr>
                </table>
                <!-- END profile_field -->
            </div>
        </div>
        <div class="spro_links">
            <a rel="nofollow" href="/st/{PUSERNAME}">SUJETS OUVERTS</a>
            <a rel="nofollow" href="/sta/{PUSERNAME}">{L_TOPICS}</a>
            <a rel="nofollow" href="/spa/{PUSERNAME}">{L_POSTS}</a>
        </div>
    </div>
</div>

{ADMINISTRATE_USER}{BAN_USER}

HTML MODERNBB & PHPBB3 (AVEC FEUILLE RPG)

Code:

<div class="spro_1">
    <div class="spro_2">
        <div class="spro_avarang">
            <div class="spro_rang">
                <div class="spro_username">
                    {USERNAME}
                </div>
                <div class="spro_rang2">
                    {POSTER_RANK}
                </div>
            </div>
            <div class="spro_avatar">
                <span id="avatar_membre">{AVATAR_IMG}</span>
            </div>
        </div>
    </div>
    <div class="spro_3">
        <div class="spro_5">
            <div class="spro_6">
                <div class="spro_lastvisit">
                    {LAST_VISIT_TIME}
                </div>
                <div class="spro_profile">
                    <div class="spro_contact">
                        <!-- BEGIN switch_show_status -->
                        {USER_ONLINE}
                        <!-- END switch_show_status -->
                        <!-- BEGIN contact_field -->
                        {contact_field.CONTENT}
                        <!-- END contact_field -->
                    </div>
                    <div class="spro_info">
                        <!-- BEGIN switch_dhow_mp -->
                        <dl class="left-box details">
                            <dt>MESSAGES PRIVÉS: </dt>
                            <dd>{PRIVATE_MSG}</dd>
                        </dl>
                        <!-- END switch_dhow_mp -->

                        <!-- BEGIN profile_field -->
                        <dl id="field_id{profile_field.ID}" class="left-box details">
                            <dt>{profile_field.LABEL}</dt>
                            <dd>{profile_field.CONTENT}</dd>
                        </dl>
                        <!-- END profile_field -->
                    </div>
                </div>
            </div>
            <div class="spro_4">
                <div class="spro_frpgtitle">
                    FEUILLE DE PERSONNAGE
                </div>
                <div class="spro_frpg">
                    <!-- BEGIN switch_rpg -->
                    <!-- BEGIN rpg_fields_left -->
                  <frpg>{switch_rpg.rpg_fields_left.F_NAME} :</frpg>
                    {switch_rpg.rpg_fields_left.F_VALUE_NEW}
                    <!-- END rpg_fields_left -->

                    <!-- BEGIN rpg_fields -->
                    <frpg>{switch_rpg.rpg_fields.F_NAME} :</frpg>
                    {switch_rpg.rpg_fields.F_VALUE_NEW}
                    <!-- END rpg_fields -->

                    <!-- END switch_rpg -->
                </div>
            </div>
        </div>
        <div class="spro_links">
            <a rel="nofollow" href="/st/{PUSERNAME}">SUJETS OUVERTS</a>
            <a rel="nofollow" href="/sta/{PUSERNAME}">{L_TOPICS}</a>
            <a rel="nofollow" href="/spa/{PUSERNAME}">{L_POSTS}</a>
        </div>
    </div>

</div>

{ADMINISTRATE_USER}{BAN_USER}

HTML PHPBB2 (AVEC FEUILLE RPG)

Code:

<div class="spro_1">
    <div class="spro_2">
        <div class="spro_avarang">
            <div class="spro_rang">
                <div class="spro_username">
                    {USERNAME}
                </div>
                <div class="spro_rang2">
                    {POSTER_RANK}
                </div>
            </div>
            <div class="spro_avatar">
                <span id="avatar_membre">{AVATAR_IMG}</span>
            </div>
        </div>
    </div>
    <div class="spro_3">
        <div class="spro_5">
            <div class="spro_6">
                <div class="spro_lastvisit">
                    {LAST_VISIT_TIME}
                </div>
                <div class="spro_profile">
                    <div class="spro_contact">
                        <!-- BEGIN switch_show_status -->
                        {USER_ONLINE}
                        <!-- END switch_show_status -->
                        <!-- BEGIN contact_field -->
                        {contact_field.CONTENT}
                        <!-- END contact_field -->
                    </div>
                    <div class="spro_info">
                <!-- BEGIN switch_dhow_mp -->
                 <table>
                <tr>
 <td class="pro_field">MESSAGES PRIVÉS: </td>
                    <td class="prof_info">{PRIVATE_MSG}</td>
                </tr>
                    </table>
                <!-- END switch_dhow_mp -->

                <!-- BEGIN profile_field -->
              <table>
<tr id="field_id{profile_field.ID}">
 <td class="pro_field">{profile_field.LABEL} &nbsp;</td>
 <td class="prof_info">{profile_field.CONTENT}</td>
 </tr>
              </table>
                <!-- END profile_field -->
                    </div>
                </div>
            </div>
            <div class="spro_4">
                <div class="spro_frpgtitle">
                    FEUILLE DE PERSONNAGE
                </div>
                <div class="spro_frpg">
                    <!-- BEGIN switch_rpg -->
                    <!-- BEGIN rpg_fields_left -->
                  <frpg>{switch_rpg.rpg_fields_left.F_NAME} :</frpg>
                    {switch_rpg.rpg_fields_left.F_VALUE_NEW}
                    <!-- END rpg_fields_left -->

                    <!-- BEGIN rpg_fields -->
                    <frpg>{switch_rpg.rpg_fields.F_NAME} :</frpg>
                    {switch_rpg.rpg_fields.F_VALUE_NEW}
                    <!-- END rpg_fields -->

                    <!-- END switch_rpg -->
                </div>
            </div>
        </div>
        <div class="spro_links">
            <a rel="nofollow" href="/st/{PUSERNAME}">SUJETS OUVERTS</a>
            <a rel="nofollow" href="/sta/{PUSERNAME}">{L_TOPICS}</a>
            <a rel="nofollow" href="/spa/{PUSERNAME}">{L_POSTS}</a>
        </div>
    </div>

</div>

{ADMINISTRATE_USER}{BAN_USER}

CSS
Comme avec le HTML vous avez un CSS spécifique à la version PHPBB2 et aux versions ModernBB et PHPBB3.

CSS POUR MODERNBB & PHPBB3 (PROFIL SANS FEUILLE PERSONNAGE)

Code:

:root {
    --acc1: #000;
    --acc2:#DD9F8C;
    --acc3:#fff; 
    --white: #fff;
    --black: #000;
    --border: #ededed;
    --border1: 1px solid #ededed;
    --background1: #f1f1f1;
    --background2: #ffffff;
    --background3: #000000;
    --degrade: linear-gradient(-45deg,#ccc9c7,#DD9F8C)!important;
    --degrag: #ccc9c7;
    --gr1: #000;
    --gr2: #DD9F8C;
    --gr3:#6CB29F;
    --gr4: #74ABB6;
    --gr5: #D7A329;
}

/***************************** AFFICHAGE DUN PROFIL *****************************/

/***** DIV PRINCIPAL CONTENANT LE PROFIL *****/

.spro_1 {
    background: var(--background2);
    padding: 10px;
    border-radius: 10px;
    display: flex;
margin:20px 0;
}

/***** AFFICHAGE À GAUCHE (rang et avatar) *****/

/*Div à gauche qui contient avatar et rang*/
.spro_2 {
    background: var(--background1);
    padding: 10px;
    border-radius: 10px;
    width: 232px;
    box-sizing: border-box;
}

/*Div qui contient le pseudo et le rang*/
.spro_rang {
display: flex;
    background: var(--background2);
    flex-wrap: wrap;
    margin: 0 0 7px;
    border-radius: 10px 30px 30px 10px;
}

/*Div qui contient le pseudo*/
.spro_username {      padding: 4px 0 0 12px;
    border-bottom: var(--border1);
    text-align: left;
    font-size: 15px;
    height: 31px;
    box-sizing: border-box;
    width: 100%;}

/*Div contenant le rang et limage*/
.spro_rang2 {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    font-size: 12px;
    line-height: 28px;
}

/*Styling de limage*/
.spro_rang2 img {         width: 60px;
    height: 60px;
    border-radius: 100%;
    padding: 5px;
    box-sizing: border-box;
    background: var(--background2);
    border: var(--border1);
    margin: -31px 0 0 7px;
}

/*Div contenant lavatar*/
.spro_avatar {
        background: var(--background2);
    padding: 6px;
    border-radius: 10px;
    box-sizing: border-box;
}

/*Styling de lavatar*/
.spro_avatar img {border-radius: 10px;
    max-width: 200px;}


/***** AFFICHAGE À DROITE (derniere visite, images contact, infos) *****/

/*Div contenant le tout*/
.spro_3 {
        margin: 0 0 0 7px;
    width: 100%;
}

/*Div de la derniere connexion*/
.spro_lastvisit {      margin: 0 0 7px;
    background: var(--background1);
    text-align: center;
    text-transform: uppercase;
    color: var(--acc2);
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 24px;
    border-radius: 6px;
    font-size: 14px;
}

/*Div contenant contact et les infos*/
.spro_profile {    border: var(--border1);
    padding: 10px;
    border-radius: 10px;
}

/*Div contenant le en ligne et les images contact*/
.spro_contact {         border-bottom: var(--border1);
    padding: 0 0 7px;
    margin: 0 0 7px;
    display: flex;
    text-transform: uppercase;
    justify-content: space-evenly;
    font-weight: 600;
    color: var(--acc1);
    font-size: 14px;
    align-items: center;
}

/*Styling images contact*/
.spro_contact img {
width: 23px;
    background: var(--background1);
    padding: 3px;
    box-sizing: border-box;
    border-radius: 5px;
}

/*Div contenant toutes les infos*/
.spro_info {       height: 292px;
    overflow: auto;}

.spro_info img {
max-width:200px;
  border-radius:10px;
}

/*Styling et mise en page des infos*/
.left-box {
width: 100%;
}

dl.details dt {
      text-align: left;
    width: 12em;
    font-size: 14px;
      text-transform: uppercase;
    font-weight: 600;
    color: var(--acc2);
}

dl.details dd {
    margin: 0 0 .5em 12em;
  font-size:14px;
line-height:22px;
}

/*Div contenant les liens en bas*/
.spro_links {    display: flex;
    margin: 7px 0 0;
}

/*Styling des liens*/
.spro_links a {
        width: 100%;
    line-height: 29px;
    background: var(--background1);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    border-radius: 10px;
    font-size: 12px;
}

.spro_links a:nth-child(2) {
    margin:0 7px;
}

CSS POUR PHPBB2 (PROFIL SANS FEUILLE PERSONNAGE)

Code:

:root {
    --acc1: #000;
    --acc2:#DD9F8C;
    --acc3:#fff; 
    --white: #fff;
    --black: #000;
    --border: #ededed;
    --border1: 1px solid #ededed;
    --background1: #f1f1f1;
    --background2: #ffffff;
    --background3: #000000;
    --degrade: linear-gradient(-45deg,#ccc9c7,#DD9F8C)!important;
    --degrag: #ccc9c7;
    --gr1: #000;
    --gr2: #DD9F8C;
    --gr3:#6CB29F;
    --gr4: #74ABB6;
    --gr5: #D7A329;
}

/***************************** AFFICHAGE DUN PROFIL *****************************/

/***** DIV PRINCIPAL CONTENANT LE PROFIL *****/

.spro_1 {
    background: var(--background2);
    padding: 10px;
    border-radius: 10px;
    display: flex;
margin:20px 0;
}

/***** AFFICHAGE À GAUCHE (rang et avatar) *****/

/*Div à gauche qui contient avatar et rang*/
.spro_2 {
       background: var(--background1);
    padding: 10px;
    border-radius: 10px;
    width: 232px;
    box-sizing: border-box;
}

/*Div qui contient le pseudo et le rang*/
.spro_rang {
display: flex;
    background: var(--background2);
    flex-wrap: wrap;
    margin: 0 0 7px;
    border-radius: 10px 30px 30px 10px;
}

/*Div qui contient le pseudo*/
.spro_username {      padding: 4px 0 0 12px;
    border-bottom: var(--border1);
    text-align: left;
    font-size: 15px;
    height: 31px;
    box-sizing: border-box;
    width: 100%;}

/*Div contenant le rang et limage*/
.spro_rang2 {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    font-size: 12px;
    line-height: 28px;
}

/*Styling de limage*/
.spro_rang2 img {         width: 60px;
    height: 60px;
    border-radius: 100%;
    padding: 5px;
    box-sizing: border-box;
    background: var(--background2);
    border: var(--border1);
    margin: -31px 0 0 7px;
}

/*Div contenant lavatar*/
.spro_avatar {
    background: var(--background2);
    padding: 6px;
    border-radius: 10px;
    box-sizing: border-box;
}

/*Styling de lavatar*/
.spro_avatar img {border-radius: 10px;
    max-width: 200px;}


/***** AFFICHAGE À DROITE (derniere visite, images contact, infos) *****/

/*Div contenant le tout*/
.spro_3 {
        margin: 0 0 0 7px;
    width: 100%;
}

/*Div de la derniere connexion*/
.spro_lastvisit {      margin: 0 0 7px;
    background: var(--background1);
    text-align: center;
    text-transform: uppercase;
    color: var(--acc2);
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 24px;
    border-radius: 6px;
    font-size: 14px;
}

/*Div contenant contact et les infos*/
.spro_profile {    border: var(--border1);
    padding: 10px;
    border-radius: 10px;
}

/*Div contenant le en ligne et les images contact*/
.spro_contact {       border-bottom: var(--border1);
    padding: 0 0 7px;
    margin: 0 0 7px;
    display: flex;
    text-transform: uppercase;
    justify-content: space-evenly;
    font-weight: 600;
    color: var(--acc1);
    font-size: 14px;
    align-items: center;
}

/*Styling images contact*/
.spro_contact img {
width: 23px;
    background: var(--background1);
    padding: 3px;
    box-sizing: border-box;
    border-radius: 5px;
}

/*Div contenant toutes les infos*/
.spro_info {       height: 292px;
    overflow: auto;}

.spro_info img {
max-width:200px;
  border-radius:10px;
}

/*Styling et mise en page des infos*/
.pro_field {
       vertical-align: top;
    width: 12em;
    font-size: 14px;
      text-transform: uppercase;
      font-weight: 600;
    color: var(--acc2);
}

.prof_info {font-size: 14px;
    line-height: 24px;}

/*Div contenant les liens en bas*/
.spro_links {    display: flex;
    margin: 7px 0 0;
}

/*Styling des liens*/
.spro_links a {
        width: 100%;
    line-height: 29px;
    background: var(--background1);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    border-radius: 10px;
    font-size: 12px;
}

.spro_links a:nth-child(2) {
    margin:0 7px;
}

CSS POUR MODERNBB & PHPBB3 (PROFIL AVEC FEUILLE PERSONNAGE)

Code:

:root {
    --acc1: #000;
    --acc2:#DD9F8C;
    --acc3:#fff; 
    --white: #fff;
    --black: #000;
    --border: #ededed;
    --border1: 1px solid #ededed;
    --background1: #f1f1f1;
    --background2: #ffffff;
    --background3: #000000;
    --degrade: linear-gradient(-45deg,#ccc9c7,#DD9F8C)!important;
    --degrag: #ccc9c7;
    --gr1: #000;
    --gr2: #DD9F8C;
    --gr3:#6CB29F;
    --gr4: #74ABB6;
    --gr5: #D7A329;
}

/***************************** AFFICHAGE DUN PROFIL *****************************/

/***** DIV PRINCIPAL CONTENANT LE PROFIL *****/

.spro_1 {
    background: var(--background2);
    padding: 10px;
    border-radius: 10px;
    display: flex;
  margin:20px 0;
}

/***** AFFICHAGE À GAUCHE (rang et avatar) *****/

/*Div à gauche qui contient avatar et rang*/
.spro_2 {
    background: var(--background1);
    padding: 10px;
    border-radius: 10px;
    width: 232px;
    box-sizing: border-box;
}

/*Div qui contient le pseudo et le rang*/
.spro_rang {
display: flex;
    background: var(--background2);
    flex-wrap: wrap;
    margin: 0 0 7px;
    border-radius: 10px 30px 30px 10px;
}

/*Div qui contient le pseudo*/
.spro_username {      padding: 4px 0 0 12px;
    border-bottom: var(--border1);
    text-align: left;
    font-size: 15px;
    height: 31px;
    box-sizing: border-box;
    width: 100%;}

/*Div contenant le rang et limage*/
.spro_rang2 {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    font-size: 12px;
    line-height: 28px;
}

/*Styling de limage*/
.spro_rang2 img {        width: 60px;
    height: 60px;
    border-radius: 100%;
    padding: 5px;
    box-sizing: border-box;
    background: var(--background2);
    border: var(--border1);
    margin: -31px 0 0 7px;
}

/*Div contenant lavatar*/
.spro_avatar {
        background: var(--background2);
    padding: 6px;
    border-radius: 10px;
    box-sizing: border-box;
}

/*Styling de lavatar*/
.spro_avatar img {border-radius: 10px;
    max-width: 200px;}


/***** AFFICHAGE À DROITE (derniere visite, images contact, infos, feuille perso) *****/

/*Div contenant le tout*/
.spro_3 {
    margin: 0 0 0 7px;
    width: 100%;
}

/*Div contenant les infos et la feuille de perso*/
.spro_5 {display: flex;}

/*Div contenant lastvisit, infos, etc.*/
.spro_6 {
  width: 70%;
    margin: 0 7px 0 0;
}

/*Div de la derniere connexion*/
.spro_lastvisit {      margin: 0 0 7px;
    background: var(--background1);
    text-align: center;
    text-transform: uppercase;
    color: var(--acc2);
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 24px;
    border-radius: 6px;
    font-size: 14px;
}

/*Div contenant contact et les infos*/
.spro_profile {    border: var(--border1);
    padding: 10px;
    border-radius: 10px;
}

/*Div contenant le en ligne et les images contact*/
.spro_contact {      border-bottom: var(--border1);
    padding: 0 0 7px;
    margin: 0 0 7px;
    display: flex;
    text-transform: uppercase;
    justify-content: space-evenly;
    font-weight: 600;
    color: var(--acc1);
    font-size: 14px;
    align-items: center;
}

/*Styling images contact*/
.spro_contact img {
width: 23px;
    background: var(--background1);
    padding: 3px;
    box-sizing: border-box;
    border-radius: 5px;
}

/*Div contenant toutes les infos*/
.spro_info {          height: 292px;
    overflow: auto;}

.spro_info img {
max-width:200px;
  border-radius:10px;
}

/*Styling et mise en page des infos*/
.left-box {
width: 100%;
}

dl.details dt {
    text-align: left;
    width: 12em;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--acc2);
}

dl.details dd {
    margin: 0 0 .5em 12em;
  font-size:14px;
  line-height:22px;
}

/*Div contenant la feuille de personnage*/
.spro_4 {    width: 30%;
    border: var(--border1);
    padding: 10px;
    box-sizing: border-box;
  border-radius: 10px;}

/*Div contenant les liens en bas*/
.spro_links {    display: flex;
    margin: 7px 0 0;
}

/*Styling des liens*/
.spro_links a {
        width: 100%;
    line-height: 29px;
    background: var(--background1);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    border-radius: 10px;
    font-size: 12px;
}

.spro_links a:nth-child(2) {
    margin:0 7px;
}

/*Div contenant feuille de personnage*/
.spro_4 {    width: 30%;
    border: var(--border1);
    padding: 10px;
    box-sizing: border-box;
  border-radius: 10px;}

/*Div titre feuille de personnage*/
.spro_frpgtitle {
    background-image: var(--degrade);
    color: var(--acc3);
    font-size: 12px;
    text-align: center;
    font-weight: 600;
    border-radius: 4px;
}

/*Div avec scroll pour feuille personnage*/
.spro_frpg {
    margin: 7px 0 0;
    height: 335px;
    overflow: auto;
    border-top: var(--border1);
    box-sizing: border-box;
    padding: 10px 0 0;
}

/*Styling des champs*/
frpg {font-weight: 700;
    letter-spacing: 1px;
    color: var(--acc1);
    text-transform: uppercase;
  font-size: 13px;}

/*Styling où le texte se trouve*/
.spro_frpg textarea {
    width: 100%!important;
    height: 93px!important;
    border: var(--border1);
    border-radius: 10px;
    margin: 10px 0 12px;
    overflow: auto;
    box-sizing: border-box;
}

.inputbox:hover {
    border: var(--border1);
}

CSS POUR PHPBB2 (PROFIL AVEC FEUILLE PERSONNAGE)

Code:

:root {
    --acc1: #000;
    --acc2:#DD9F8C;
    --acc3:#fff; 
    --white: #fff;
    --black: #000;
    --border: #ededed;
    --border1: 1px solid #ededed;
    --background1: #f1f1f1;
    --background2: #ffffff;
    --background3: #000000;
    --degrade: linear-gradient(-45deg,#ccc9c7,#DD9F8C)!important;
    --degrag: #ccc9c7;
    --gr1: #000;
    --gr2: #DD9F8C;
    --gr3:#6CB29F;
    --gr4: #74ABB6;
    --gr5: #D7A329;
}

/***************************** AFFICHAGE DUN PROFIL *****************************/

/***** DIV PRINCIPAL CONTENANT LE PROFIL *****/

.spro_1 {
    background: var(--background2);
    padding: 10px;
    border-radius: 10px;
    display: flex;
  margin:20px 0;
}

/***** AFFICHAGE À GAUCHE (rang et avatar) *****/

/*Div à gauche qui contient avatar et rang*/
.spro_2 {
    background: var(--background1);
    padding: 10px;
    border-radius: 10px;
    width: 232px;
    box-sizing: border-box;
}

/*Div qui contient le pseudo et le rang*/
.spro_rang {
display: flex;
    background: var(--background2);
    flex-wrap: wrap;
    margin: 0 0 7px;
    border-radius: 10px 30px 30px 10px;
}

/*Div qui contient le pseudo*/
.spro_username {      padding: 4px 0 0 12px;
    border-bottom: var(--border1);
    text-align: left;
    font-size: 15px;
    height: 31px;
    box-sizing: border-box;
    width: 100%;}

.spro_rang2 {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    font-size: 12px;
    line-height: 28px;
}

/*Styling de limage*/
.spro_rang2 img {        width: 60px;
    height: 60px;
    border-radius: 100%;
    padding: 5px;
    box-sizing: border-box;
    background: var(--background2);
    border: var(--border1);
    margin: -31px 0 0 7px;
}

/*Div contenant lavatar*/
.spro_avatar {
        background: var(--background2);
    padding: 6px;
    border-radius: 10px;
    box-sizing: border-box;
}

/*Styling de lavatar*/
.spro_avatar img {border-radius: 10px;
    max-width: 200px;}


/***** AFFICHAGE À DROITE (derniere visite, images contact, infos, feuille perso) *****/

/*Div contenant le tout*/
.spro_3 {
    margin: 0 0 0 7px;
    width: 100%;
}

/*Div contenant les infos et la feuille de perso*/
.spro_5 {display: flex;}

/*Div contenant lastvisit, infos, etc.*/
.spro_6 {
  width: 70%;
    margin: 0 7px 0 0;
}

/*Div de la derniere connexion*/
.spro_lastvisit {      margin: 0 0 7px;
    background: var(--background1);
    text-align: center;
    text-transform: uppercase;
    color: var(--acc2);
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 24px;
    border-radius: 6px;
    font-size: 14px;
}

/*Div contenant contact et les infos*/
.spro_profile {    border: var(--border1);
    padding: 10px;
    border-radius: 10px;
}

/*Div contenant le en ligne et les images contact*/
.spro_contact {      border-bottom: var(--border1);
    padding: 0 0 7px;
    margin: 0 0 7px;
    display: flex;
    text-transform: uppercase;
    justify-content: space-evenly;
    font-weight: 600;
    color: var(--acc1);
    font-size: 14px;
    align-items: center;
}

/*Styling images contact*/
.spro_contact img {
width: 23px;
    background: var(--background1);
    padding: 3px;
    box-sizing: border-box;
    border-radius: 5px;
}

/*Div contenant toutes les infos*/
.spro_info {      height: 292px;
    overflow: auto;}

.spro_info img {
max-width:200px;
  border-radius:10px;
}

/*Styling et mise en page des infos*/
.pro_field {
      vertical-align: top;
    width: 12em;
    font-size: 14px;
      text-transform: uppercase;
      font-weight: 600;
    color: var(--acc2);
}

.prof_info {font-size: 14px;
    line-height: 24px;}


/*Div contenant la feuille de personnage*/
.spro_4 {    width: 30%;
    border: var(--border1);
    padding: 10px;
    box-sizing: border-box;
  border-radius: 10px;}

/*Div contenant les liens en bas*/
.spro_links {    display: flex;
    margin: 7px 0 0;
}

/*Styling des liens*/
.spro_links a {
        width: 100%;
    line-height: 29px;
    background: var(--background1);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    border-radius: 10px;
    font-size: 12px;
}

.spro_links a:nth-child(2) {
    margin:0 7px;
}

/*Div contenant feuille de personnage*/
.spro_4 {    width: 30%;
    border: var(--border1);
    padding: 10px;
    box-sizing: border-box;
  border-radius: 10px;}

/*Div titre feuille de personnage*/
.spro_frpgtitle {
    background-image: var(--degrade);
    color: var(--acc3);
    font-size: 12px;
    text-align: center;
    font-weight: 600;
    border-radius: 4px;
}

/*Div avec scroll pour feuille personnage*/
.spro_frpg {
    margin: 7px 0 0;
    height: 335px;
    overflow: auto;
    border-top: var(--border1);
    box-sizing: border-box;
    padding: 10px 0 0;
}

/*Styling des champs*/
frpg {font-weight: 700;
    letter-spacing: 1px;
    color: var(--acc1);
    text-transform: uppercase;
  font-size: 13px;}

/*Styling où le texte se trouve*/
.spro_frpg textarea {
    width: 100%!important;
    height: 93px!important;
    border: var(--border1);
    border-radius: 10px;
    margin: 10px 0 12px;
    overflow: auto;
    box-sizing: border-box;
}

.inputbox:hover {
    border: var(--border1);
}

Je le redis, mais vraiment si vous avez un problème ou une question, surtout n'hésitez pas.

Je serais bien entendu très heureuse de voir le résultat final dans le cas où vous utilisez la liste, donc n'hésitez vraiment pas à me l'envoyer. Vous pouvez également laisser une suggestion dans ce sujet.