AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment : -17%
(Black Friday) Apple watch Apple SE GPS + Cellular ...
Voir le deal
249 €

    Partie profil et corps de message

    Lilychx
    Lilychx
    FémininAge : 31Messages : 14

    Mar 19 Jan 2021 - 14:47

    Partie profil et corps de message



    Bonjour,

    Je pense que je poste ma demande au bon endroit mais si jamais ce n'est pas le cas je m''en excuse infiniment et je reposterais ma demande au bon endroit selon les indication qui me seront donnée. Normalement j'ai bien regardé et je n'ai rien trouvé dans la section libre service ressemblant à ce dont j'ai besoin, mais si jamais vous pensez qu'il existe déjà un code ressemblant n'hésitez pas à me le dire et j'irais bien évidement voir si c'est se que j'ai besoin.




    Schéma(s) et Eléments


    Schémas : Désolée pour la qualité des schéma mais je les ai fait moi même très rapidement ^^
    Partie profil et corps de message Profil10
    Si vous avez besoin des images pour créer le code je vous les fournirait, mais si non vous pouvez mettre des image lambda je les modifierais moi après.

    Tailles des éléments / Effets voulus : Je vous poste un schéma, mais si ce n'est pas suffisamment claire n'hésitez pas à me le dire et je préciserait aux maximum.
    Partie profil et corps de message Profil11

    Version de votre forum : phpBB2

    Ressources


    Pour les picto et les images je vous laisse mettre se qui vous inspire, c'est essentiellement la structure qui m'intéresse. J'harmoniserait avec mon forum après.

    Les couleurs sont les suivant : #262023 (couleur la plus sombre) / #31262b (l'espèce de violet en fond de message) / #837a6d (beige des typo)

    Les font : pour les titre "calligraphique" -> 'Greatvibes'; cursive (greatvibes est une google font) / pour le reste c'est Century Gothic


    Autres précisions ?


    Si c'est possible j'aimerais que le code soit le plus possible commenter. Si ce n'est pas possible ce n'est pas grave.




    Merci beaucoup !


    Dernière édition par Lilychx le Jeu 4 Fév 2021 - 16:59, édité 2 fois
    Monomer
    Monomer
    MasculinAge : 31Messages : 39

    Mar 19 Jan 2021 - 21:31

    Salutations !

    Je réponds à ta demande d'abord pour accéder à ton schéma s'il est caché (si ce n'est pas le cas et qu'il s'agit d'un oubli de ta part j'éditerai mon message). Si tout est en ordre, je regarde ce que je peux faire pour t'aider le plus rapidement possible et j'éditerai mon message s'il me manque quoique ce soit. :)

    Ton schéma est très clair, je te rassure ! J'essaie de voir ce que je peux faire dans la soirée pour la structure principale et on avisera par la suite de quelle manière tu souhaites personnaliser tes différentes entête de groupe/rang.




    Lilychx
    Lilychx
    FémininAge : 31Messages : 14

    Mer 20 Jan 2021 - 11:09

    Hello,

    Merci beaucoup pour cette réponse rapide ^^

    Je viens de regarder se que tu as commencé à faire sur le forum test et ça me parait déjà super. Si tu veux voici le lien du forum sur le quelle ça va s'intégrer : https://hildriss.forumactif.com/
    Hésites pas a me dire si tu as besoin de plus d'informations et si il faut que je te fasse les visuelle pour chacun des groupes.

    et encore une fois merci beaucoup ! globalement j'arrive pas trop mal à bidouiller pour arriver a mes fin mais là je m'en sortais pas du tout avec cette partie là ^^
    Monomer
    Monomer
    MasculinAge : 31Messages : 39

    Jeu 21 Jan 2021 - 22:43

    Content que ça te plaise pour l'instant (et désolé pour le délai de réponse, les mercredis sont mes vendredis et j'en profite pour décompresser) !

    Pour le visuel de chaque groupe (l'entête), j'aurais surtout besoin de savoir de quelle façon tu comptes t'y prendre pour les différencier.

    La première méthode, assez minutieuse, serait d'utiliser la couleur des groupes et un peu de JS pour l'appliquer ailleurs (notamment pour le cadre des profils, comme dans tes schémas). Malheureusement, cette façon devient plus compliquée si on y ajoute différentes modifications (notamment des images) parce qu'il faut s'assurer que la couleur choisie dans le panneau d'administration pour chaque groupes soit bien celle appliquée par ForumActif sur le forum, et ce n'est pas toujours le cas (l'oeil humain ne s'en rend pas compte, mais une couleur "#EFEFEF" peut se transformer en "#EEFEEF" et le JS devient difficile à prédire et encore plus à modifier).

    Une autre façon de faire, que j'affectionne particulièrement (parce qu'elle ne requiert aucun JS et parce que le moins on en utilise le mieux c'est), est d'utiliser directement le rang des membres pour différencier les groupes. Si tu t'y connais un peu en CSS, les templates permettent de le faire comme ceci, en utilisant la variable qui affiche normalement le nom du rang :
    Code:
    <div class="post" data-rank="{postrow.displayed.POSTER_RANK}"></div>

    .post[data-rank^="Admin"] {
      background-image: url('image.png');
    }

    Donc, tout dépendra de si tu comptes utiliser tes rangs indépendamment des groupes ou non.

    Sinon, je pense que tout est bon côté structure (image). Pour ce qui manque, les couleurs et les champs de profil qui ne sont pas ceux de ton schéma, tu pourras toi-même les modifier facilement sur ton forum (avec les images de contact, dans ton panneau d'administration). (boutons nouveau/répondre)

    EDIT : Je viens de remarquer et de me souvenir : je n'ai pas "Century Gothic" d'installer sur mon PC, donc le texte que tu verras toi en live (et certains de tes membres) sera différent de celui sur mes screenshots.
    Lilychx
    Lilychx
    FémininAge : 31Messages : 14

    Ven 22 Jan 2021 - 12:03

    hello,

    effectivement moins je bidouille de JS mieux je me porte donc je pense que passer par les rang pour pouvoir appliquer non seulement une couleur mais également des images pour différencier les différents groupes me parait plus à ma porté ^^

    en plus ça pourra me permettre également de mettre des nom de rang adapter à chaque joueurs s'il le faut sans à avoir à ajouter des groupes !

    Monomer a écrit:et désolé pour le délai de réponse, les mercredis sont mes vendredis et j'en profite pour décompresser !

    mais il n'y a pas de soucis ! je ne suis absolument pas pressé et s'il avait fallu plusieurs semaines ça m'aurait été parfaitement ^^

    Monomer
    Monomer
    MasculinAge : 31Messages : 39

    Mer 27 Jan 2021 - 0:55

    Salutations !

    Me voilà de retour, avec une première version que tu peux installer. Tu peux remplacer le template "viewtopic_body" par ceci :
    Code:
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">
    <div class="mnmr__topic">
    <!-- BEGIN switch_plus_menu -->
    <script type="text/javascript">
       //<![CDATA[
       var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}';
    </script>
    <!-- END switch_plus_menu -->
    <script type="text/javascript">
    var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
    showHiddenMessage = function(id)
    {
        try
        {
            var regId = parseInt(id, 10);
            if( isNaN(regId) ) { regId = 0; }
           
            if( regId > 0)
            {
                $('.post--' + id).toggle(0, function()
             {
                if( $(this).is(":visible") )
                {
                   $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
                }
                else
                {
                   $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
                }
             });
            }
        }
        catch(e) { }
       
       return false;
    };

    //]]>
    </script>


      <div class="breadcrumbs">
        <div class="breadcrumbs__buttons">
          <!-- BEGIN switch_user_authpost -->
          <a href="{U_POST_NEW_TOPIC}" rel="nofollow">Nouveau</a>
          <!-- END switch_user_authpost -->
          <!-- BEGIN switch_user_authreply -->
          <a href="{U_POST_REPLY_TOPIC}">Répondre</a>
          <!-- END switch_user_authreply -->
        </div>
        <div class="breadcrumbs__links">
          <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
          {NAV_CAT_DESC_SECOND}
        </div>
        <div class="mnmr__pagination pagination"><span class="gensmall">{PAGINATION}</span></div>
      </div>
     

      <h1 class="mnmr__cattitle">{TOPIC_TITLE}</h1>
     
      <!-- BEGIN postrow -->
      <!-- BEGIN displayed -->
      <div class="mnmr__post post--{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}" data-rank="{postrow.displayed.POSTER_RANK}">
        <header class="mnmr__header">rang</header>
        <aside class="mnmr__aside">
          <div class="mnmr__username">{postrow.displayed.POSTER_NAME}</div>
          <div class="mnmr__rank">{postrow.displayed.POSTER_RANK}</div>
          <div class="mnmr__avatar">{postrow.displayed.POSTER_AVATAR}</div>
          <div class="mnmr__contact">
            {postrow.displayed.PM_IMG}
            {postrow.displayed.PROFILE_IMG}
            <!-- BEGIN contact_field -->
            {postrow.displayed.contact_field.CONTENT}
            <!-- END contact_field -->
          </div>
          <div class="mnmr__profile">
            <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
          </div>
          <div class="mnmr__rpg">
            {postrow.displayed.POSTER_RPG}
          </div>
        </aside>
        <article class="mnmr__article">
          <div class="mnmr__meta">
            <div class="mnmr__date">{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</div>
            <div class="mnmr__meta-buttons">{postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}</div>
          </div>
          <div class="mnmr__postbody postbody">{postrow.displayed.MESSAGE}</div>
          <!-- BEGIN switch_signature -->
          <div class="mnmr__signature signature_div">
            {postrow.displayed.SIGNATURE}
          </div>
          <!-- END switch_signature -->
        </article>
      </div>
      <!-- END displayed -->
      <!-- END postrow -->
     
      <div class="breadcrumbs">
        <div class="breadcrumbs__buttons">
          <!-- BEGIN switch_user_authpost -->
          <a href="{U_POST_NEW_TOPIC}" rel="nofollow">Nouveau</a>
          <!-- END switch_user_authpost -->
          <!-- BEGIN switch_user_authreply -->
          <a href="{U_POST_REPLY_TOPIC}">Répondre</a>
          <!-- END switch_user_authreply -->
        </div>
        <div class="breadcrumbs__links">
          <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
          {NAV_CAT_DESC_SECOND}
        </div>
        <div class="mnmr__pagination pagination"><span class="gensmall">{PAGINATION}</span></div>
      </div>

    <table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">

       <!-- BEGIN switch_user_logged_in -->
       <!-- BEGIN watchtopic -->
       <tr>
          <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
       </tr>
       <!-- END watchtopic -->
       <!-- END switch_user_logged_in -->
    </table>


    <!-- BEGIN switch_forum_rules -->
    <table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
       <tbody>
          <tr>
             <td class="catBottom">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                   <tbody>
                      <tr>
                         <td valign="top">
                            <div class="cattitle"> {L_FORUM_RULES}</div>
                         </td>
                      </tr>
                   </tbody>
                </table>
             </td>
          </tr>
          <tr>
             <td class="row1 clearfix">
                <table>
                   <tr>
                      <!-- BEGIN switch_forum_rule_image -->
                      <td class="logo">
                         <img src="{RULE_IMG_URL}" alt="" />
                      </td>
                      <!-- END switch_forum_rule_image -->
                      <td class="rules postbody">
                         {RULE_MSG}
                      </td>
                   </tr>
                </table>
             </td>
          </tr>
       </tbody>
    </table>
    <!-- END switch_forum_rules -->

    <table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr>
          <td class="row2" colspan="2" align="center" style="padding:0px">
             <!-- BEGIN switch_user_logged_in -->
             <a name="quickreply"></a>
             {QUICK_REPLY_FORM}<br />
             <!-- END switch_user_logged_in -->
          </td>
       </tr>
       <tr>
          <td style="margin:0; padding: 0;" colspan="2">
             <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
                <tbody>
          <!-- BEGIN show_permissions -->
          <tr>
             <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
             <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
          </tr>
          <!-- END show_permissions -->
          <tr>
             <td class="catBottom" colspan="2" height="28">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                   <tr>
                      <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                      <!-- BEGIN show_permissions -->
                      <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
                      <!-- END show_permissions -->
                   </tr>
                </table>
             </td>
          </tr>
       </tbody>
             </table>
          </td>
       </tr>
       <tr>
          <td style="margin:0; padding: 0;" colspan="2">
             <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
                <tbody>
          <tr>
             <td class="catBottom" colspan="2" height="28">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                   <tr>
                      <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
                      <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
                   </tr>
                </table>
             </td>
          </tr>
       </tbody>
             </table>
          </td>
       </tr>
    </table>


    <!-- BEGIN viewtopic_bottom -->
    <table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
       <tr>
          <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
             <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
                <input type="hidden" name="t" value="{TOPIC_ID}" />

                <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
                <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

                <span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" /></span>
             </form>
          </td>
       </tr>
    </table>
    <!-- END viewtopic_bottom -->

    <!-- BEGIN switch_image_resize -->
    <script type="text/javascript">
    //<![CDATA[
    $(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
    //]]>
    </script>
    <!-- END switch_image_resize -->
    </div>

    et ajouter ceci à ton CSS :
    Code:
    /* © MONOMER - Never Utopia */
    .mnmr__topic {
      --group: #fff; /* couleur de groupe par défaut blanc */
      --color-bg: #262023; /* violet sombre */
      --color-cell: #31262b; /* voilet clair */
      --color-pale: #837a6d; /* beige clair */
      margin: 64px 0;
      font-family: Century Gothic;
      font-size: 16px;
    }

    /* RANG ADMIN */
    .mnmr__post[data-rank^="Admin"] {
      --group: #a3a3f5;
    }
    .mnmr__post[data-rank^="Admin"] .mnmr__header {
      background-image: url(image.png);
    }
    /* RANG ADMIN */
    .mnmr__post[data-rank^="Guerrier"] {
      --group: #a3a3f5;
    }
    .mnmr__post[data-rank^="Guerrier"] .mnmr__header {
      background-image: url(image.png);
    }

    .breadcrumbs {
      display: flex;
      width: 100%;
      margin-bottom: 25px;
    }
    .breadcrumbs__buttons {
      /* contexte des boutons nouveau et repondre */
      display: flex;
      flex-shrink: 0;
      gap: 15px;
      margin-right: 30px;
    }
    .breadcrumbs__buttons a {
      /* bouton noureau et répondre */
      background-color: var(--color-pale);
      font-family: 'Great Vibes', cursive;
      paddign: 8px;
      font-size: 1.5rem;
      color: var(--color-bg);
      padding: 10px 15px;
      text-decoration: none;
      box-shadow: 6px 6px 6px rgba(0,0,0,.8);
      border: 1px solid var(--color-pale);
      transition: .2s ease;
      font-weight: bold;
    }
    .breadcrumbs__buttons a:hover {
      /* bouton noureau et répondre survol */
      text-decoration: none!important;
      background-color: var(--color-cell);
      color: var(--color-pale);
    }
    .breadcrumbs__links {
      /* alignement et contexte de la hiérarchie */
      color: var(--color-pale);
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-grow: 1;
    }
    .breadcrumbs__links a {
      /* liens de la hiérarchie */
      color: inherit;
    }
    .mnmr__pagination {
      /* pages du sujet */
      display: flex;
      flex-shrink: 0;
      align-items: center;
    }

    h1.mnmr__cattitle {
      /* titre du sujet */
      color: var(--color-pale);
      text-align: center;
      margin: 10px 0;
      text-shadow: 4px 4px 4px rgba(0,0,0,.8);
      font-size: 1.2rem;
      font-weight: normal;
    }

    .mnmr__post {
      display: flex;
      align-items: flex-start;
      flex-flow: row wrap;
      margin-bottom: 15px;
    }

    .mnmr__header {
      /* boite rang/groupe d'entête */
      font-family: 'Great Vibes';
      font-size: 2rem;
      text-align: center;
      color: var(--group);
      border: 1px solid var(--color-pale);
      padding: 10px;
      background-color: var(--color-cell);
      background-image: url(http://placekitten.com/g/1000/80);
      background-size: cover;
      background-position: 50% 50%;
      text-shadow: 4px 4px 4px rgba(0,0,0,.8);
      flex: 1 1 100%;
    }
    .mnmr__aside {
      /* boite profile */
      flex: 0 0 200px;
      background-color: var(--color-cell);
      border: 2px solid var(--group);
      border-top: 0;
      margin-right: 15px;
      box-sizing: border-box;
    }
    .mnmr__username {
      /* nom d'utilisateur */
      margin-top: 10px;
      font-family: 'Great Vibes';
      font-size: 1.4em;
      text-align: center;
      line-height: 1;
    }
    .mnmr__username a {
      text-decoration: none;
    }
    .mnmr__rank {
      /* rang sous le pseudo */
      text-align: center;
      line-height: 1;
      margin-bottom: 10px;
      font-family: 'Great Vibes';
      font-size: 1.3em;
      font-weight: bold;
      text-transform: lowercase;
    }
    .mnmr__avatar {
      margin-bottom: 4px;
    }
    .mnmr__profile,
    .mnmr__rpg {
      /* boite champs de profil */
      box-sizing: border-box;
      padding: 0 4px;
      color: var(--color-pale);
      font-size: .8rem;
    }
    .mnmr__profile .label {
      font-weight: 600;
    }
    .mnmr__rpg {
      font-weight: 600;
      margin-bottom: 4px;
    }
    .mnmr__rpg a,
    .mnmr__rpg br {
      /* retire lien feuille de personnage
      et les sauts de ligne désagréables */
      display: none;
    }
    .mnmr__rpg textarea {
      width: 192px; /* 200px - 8px pour les espaces */
      box-sizing: border-box;
      border: 1px solid var(--color-pale);
      background-color: var(--color-bg);
      color: var(--color-pale);
      resize: vertical;
    }
    .mnmr__contact {
      /* petit bloc pour les boutons contact */
      display: flex;
      align-items: center;
      padding: 5px;
      justify-content: center;
      border: 1px solid var(--color-pale);
      border-width: 1px 0;
      background-color: var(--color-bg);
      margin-bottom: 4px;
    }

    .mnmr__article {
      /* boite du message */
      color: var(--color-pale);
      flex: 1;
      border: 1px solid var(--color-pale);
      border-top: 0;
      background-color: var(--color-cell);
      padding: 0 15px 30px 15px;
      align-self: stretch;
    }
    .mnmr__meta {
      /* extra au dessus du message */
      padding: 5px 0;
      display: flex;
      align-items: center;
      border-bottom: 2px solid var(--color-pale);
      margin-bottom: 5px;
    }
    .mnmr__meta-buttons {
      display: flex;
      gap: 15px;
    }
    .mnmr__meta-buttons a img {
      display: none;
    }
    .mnmr__meta-buttons a {
      /* bouton moderation du message */
      color: var(--color-cell);
      border: 1px solid var(--color-pale);
      background-color: var(--color-pale);
      text-decoration: none!important;
      min-width: 35px;
      min-height: 35px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: .2s ease;
    }
    .mnmr__meta-buttons a:hover {
      /* bouton moderation du message survol */
      text-decoration: none!important;
      background-color: var(--color-cell);
      color: var(--color-pale);
    }
    .mnmr__meta-buttons a:before {
      /* texte qui remplace les images */
      font-family: 'Great Vibes';
      font-size: 20px;
      font-weight: bold;
    }
    /* astuce pour afficher les boutons edition et citation
      sans les images, en utilisant les liens pour remplacer le
      contenu par du texte. */
    .mnmr__meta-buttons a[href*="mode=quote"]:before {
      content: '”';
    }
    .mnmr__meta-buttons a[href*="mode=edit"]:before {
      content: 'Ed';
    }
    .mnmr__meta-buttons a[href*="mode=delete"]:before {
      content: 'X';
    }
    .mnmr__meta-buttons a[href*="mode=ip"]:before {
      content: 'Ip';
    }
    .mnmr__date {
      /* date du post */
      flex-grow: 1;
    }
    .mnmr__signature {
      /* signature */
      color: var(--color-pale);
      margin-top: 30px;
      border-top: 2px solid var(--color-pale);
    }
    .mnmr__postbody {
      /* format du text du message */
      color: var(--color-pale);
      font-size: .9rem;
    }

    La magie des rangs se passe dans les premières lignes du CSS :
    Code:
    .mnmr__post[data-rank^="Admin"] {
      --group: #a3a3f5; /* "écraser" la variable de couleur */
    }
    .mnmr__post[data-rank^="Admin"] .mnmr__header {
      background-image: url(image.png); /* image de fond */
    }

    Si tu as déjà quelques notions en CSS, tu pourras modifier facilement ces lignes et les copier/coller les unes sous les autres (en modifiant le "Admin" entre guillemets) pour affecter un autre rang. À savoir que cette méthode a quelques restrictions : les majuscules sont importantes (il faudra copier/coller exactement le texte du rang, accents compris). Aussi, je te déconseille d'utiliser du HTML dans tes rangs (certains forums le font) et de mettre les guillemets anglais qu'on utilise en HTML (Maj + 2 sur azerty, si je ne me trompe pas). Un exemple :
    Code:
    .mnmr__post[data-rank^="Sorcière des Landes"] {
      --group: pink; /* "écraser" la variable de couleur */
    }
    .mnmr__post[data-rank^="Sorcière des Landes"] .mnmr__header {
      background-image: url(image_galaxie_super_rose.png); /* image de fond */
    }

    Dis-moi si l'intégration se passe bien et on regardera ensuite les petites détails que tu aimerais améliorer ou changer (ou s'il y a quelques oublis de ma part, ce qui est fort possible avec mon petit pois de cerveau) ! Bonne chance.
    Lilychx
    Lilychx
    FémininAge : 31Messages : 14

    Mar 2 Fév 2021 - 8:21

    OOOO top merci beaucoup j'essaye de mettre tout ça en place dans la semaine (désolée pour le temps de réponses j'étais chargé au niveau boulot la semaine dernière)

    je reviens vers toi pour te montrer le rendu final quand tout sera installer et les réglages adapté !

    merci infiniment pour ce travail !
    Contenu sponsorisé


      La date/heure actuelle est Dim 24 Nov 2024 - 16:14