AccueilRechercherS'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 : -19%
CORSAIR Fauteuil Gamer T1 RACE 2020
Voir le deal
226.59 €

    Affichage des feuilles de personnage

    Gurufissu
    Gurufissu
    MasculinAge : 24Messages : 11

    le Mer 18 Nov 2020 - 19:35

    Hello à toutes et à tous,

    Voilà, on a un soucis avec l'affichage des feuilles de personnage sur le forum. Que ce soit sur les posts topics (ici par exemple) ou dans la page "rpg" : ici.Ou encore la page "rpgsheet" : ici.

    Voici une image du principal problème.

    Fiche de Personnage:
    Affichage des feuilles de personnage Screen10

    Vous pourrez remarquer facilement que les "barres de stats" et les icônes représentant ces stats, ne sont pas alignées. Ce qui est pas folichon esthétiquement parlant. Donc j'aimerais réussir à les aligner pour avoir quelque chose de joulie.

    Ensuite, toujours dans ce but esthétique, j'aimerais que les barres de stats soient affichées différemment. En meilleure qualité, un peu plus gros quoi.

    En gros, les barres de stats sur forumactif sont 4 images, le bord gauche, la barre remplie, la barre vide, et le bord droite. Le soucis c'est que la barre remplie et la barre vide sont faite d'une image chacune, et cette image est prise à 100%, puis compressée ou étirée selon le pourcentage affiché. La compression, dans le cas d'image de bonne qualité, rend très laid. Et je voudrais une barre de bonne qualité ! L'idée que j'ai, c'est qu'il faudrait réussir à faire que chaque pourcentage, n'affiche qu'une partie de la barre et non la totalité compressée, vous voyez ?

    Voilà, si c'est possible, aidez moi !

    :hudada:

    'Christa
    'Christa
    FémininAge : 35Messages : 163

    le Mer 18 Nov 2020 - 20:57

    Hello !

    Alors je ne sais pas pour les barres de statistiques (de base, c'est supposé être des images toutes petites qui sont utilisées à ce niveau, avec des couleurs unies, d'où le fait qu'en principe ça n'est pas un problème) mais pour ce qui est de l'alignement des icones ça devrait se faire.

    Tu pourrais nous partager ton template viewtopic_body s'il te plait ? La page "rpg" (je n'ai aucune idée d'à quoi elle correspond, le profil?) n'est pas accessible aux invités, et je suppose que le template de la feuille de personnage est celui nommé rpg_sheet.

    Ah, et le CSS serait également utile ^^ Je vois ceci :
    Code:
    body img {
        vertical-align: 0;
    }
    Qui a un peu tendance à effectivement poser un problème d'alignement dans la feuille RPG.

    Quel rendu tu cherches à obtenir (selon les différentes pages) ?
    Gurufissu
    Gurufissu
    MasculinAge : 24Messages : 11

    le Mer 18 Nov 2020 - 21:23

    Tout d'abord merci pour la réponse, ensuite voici le template viewtopic :

    Template:

    Code:
    <script type="text/javascript">
    //<![CDATA[
    var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}

    addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email:

    "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };

    $(function(){
        if(typeof(_atc) == "undefined") {
            _atc = {  };
        }
    });

    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="sub-header">
       <div class="sub-header-info">
          <h1 class="page-title">
             <a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
          </h1>
          <div class="sub-header-path">
             <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
             {NAV_CAT_DESC}
          </div>
       </div>

       <div class="sub-header-buttons">
          <!-- BEGIN switch_user_authpost -->
             <a href="{U_POST_NEW_TOPIC}" rel="nofollow" class="ion-edit button1">{L_POST_NEW_TOPIC}</a>
          <!-- END switch_user_authpost -->
          <!-- BEGIN switch_user_authreply -->
             <a href="{U_POST_REPLY_TOPIC}" class="ion-reply button1">{L_POST_REPLY_TOPIC}</a>
          <!-- END switch_user_authreply -->
       </div>
    </div>

    <div class="topic-actions">
       <!-- BEGIN topicpagination -->
          <div class="pagination">
             {PAGINATION}
          </div>
       <!-- END topicpagination -->

       <div class="topic-actions-buttons">
          <!-- BEGIN switch_twitter_btn -->
          <span>
             <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a>
             <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test

    (d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p

    +'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
          </span>
          <!-- END switch_twitter_btn -->

          <!-- BEGIN switch_fb_likebtn -->
          <script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "https://connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
          }(document, 'script', 'facebook-jssdk'));</script>
          <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like"

    data-show-faces="false" data-share="false"></span>
          <!-- END switch_fb_likebtn -->

          <a class="addthis_button">{L_SHARE}</a>
          <!-- BEGIN switch_plus_menu -->
          <script type="text/javascript">//<![CDATA[
             var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
             var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
             var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
             var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
             var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
             insert_plus_menu_new('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
          //]]>
          </script>
          <!-- END switch_plus_menu -->
       </div>
    </div>

    <div class="quick-nav-topics">
        <!-- BEGIN switch_isconnect -->
       <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>
        <!-- END switch_isconnect -->
        <a href="#bottom">{L_GOTO_DOWN}</a>
        <!-- BEGIN switch_isconnect -->
       <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
        <!-- END switch_isconnect -->
    </div>

    {POLL_DISPLAY}

    <!-- BEGIN postrow -->
       <!-- BEGIN hidden -->
          <div class="post {postrow.hidden.ROW_COUNT}">
             <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
          </div>
       <!-- END hidden -->
       <!-- BEGIN displayed -->
          <div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT}

    {postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR}

    style="{postrow.displayed.DISPLAYABLE_STATE}">
                <div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
             <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
                <!-- div class="online2"></div-->
                <dl>
                   <dt>
                      <div class="postprofile-avatar">
                         {postrow.displayed.POSTER_AVATAR}
                      </div>
                      <div class="postprofile-name">
                         {postrow.displayed.POSTER_NAME}
                      </div>
                      <div class="postprofile-rank">
                         {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
                      </div>
                   </dt>
                   <dd class="postprofile-info">
                      <!-- BEGIN profile_field -->
                         {postrow.displayed.profile_field.LABEL}
                         {postrow.displayed.profile_field.CONTENT}
                         {postrow.displayed.profile_field.SEPARATOR}
                      <!-- END profile_field -->
                      <div class="postprofile-rpg">{postrow.displayed.POSTER_RPG}</div>
                   </dd>
                   <dd class="postprofile-contact">
                      {postrow.displayed.PROFILE_IMG}
                      {postrow.displayed.PM_IMG}
                      {postrow.displayed.EMAIL_IMG}
                      <!-- BEGIN contact_field -->
                          {postrow.displayed.contact_field.CONTENT}
                      <!-- END contact_field -->
                   </dd>
                </dl>
             </div>

             <div class="post-head">
                <ul class="profile-icons">
                   <li class="btn-thank">
                      <a href="{postrow.displayed.THANK_URL}">
                         <i class="ion-heart"></i>
                      </a>
                   </li>
                   <li class="btn-quote-multi">
                      <span onclick="{postrow.displayed.MULTIQUOTE_URL}" id="post_mq{TOPIC_ID}_

    {postrow.displayed.U_POST_ID}">
                         <i class="ion-quote"></i>
                         <i class="ion-ios-plus-empty"></i>
                      </span>
                   </li>
                   <li class="btn-quote">
                      <a href="{postrow.displayed.QUOTE_URL}">
                         <i class="ion-quote"></i>
                      </a>
                   </li>
                   <li class="btn-edit">
                      <a href="{postrow.displayed.EDIT_URL}">
                         <i class="ion-edit"></i>
                      </a>
                   </li>
                   <li class="btn-delete">
                      <a href="{postrow.displayed.DELETE_URL}">
                         <i class="ion-trash-a"></i>
                      </a>
                   </li>
                   <li class="btn-ip">
                      <a href="{postrow.displayed.IP_URL}">
                         <i class="ion-ios-information"></i>
                      </a>
                   </li>
                   <li class="btn-report">
                      {postrow.displayed.REPORT_IMG}
                   </li>
                </ul>

                <h2 class="topic-title">{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">

    {postrow.displayed.POST_SUBJECT}</a></h2>
                <div class="topic-date">
                   {postrow.displayed.POST_DATE_NEW}

                   <!-- BEGIN switch_vote_active -->
                   <div class="vote">
                      <!-- BEGIN switch_vote -->
                         <a

    href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}" class="ion-thumbsup"></a>
                      <!-- END switch_vote -->

                      <!-- BEGIN switch_vote -->
                         <a

    href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}" class="ion-thumbsdown"></a>
                      <!-- END switch_vote -->

                      <!-- BEGIN switch_bar -->
                      <div class="vote-bar"

    title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                         <div class="vote-bar-desc">
                            {postrow.displayed.switch_vote_active.L_VOTE_TITLE}
                         </div>

                         <div class="vote-bars">
                            <!-- BEGIN switch_vote_plus -->
                               <div class="vote-bar-plus" style="width:

    {postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                            <!-- END switch_vote_plus -->

                            <!-- BEGIN switch_vote_minus -->
                               <div class="vote-bar-minus" style="width:

    {postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                            <!-- END switch_vote_minus -->
                         </div>
                      </div>
                      <!-- END switch_bar -->

                      <!-- BEGIN switch_no_bar -->
                         <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}"

    class="vote-bar-empty"></div>
                      <!-- END switch_no_bar -->
                   </div>
                   <!-- END switch_vote_active -->
                </div>
             </div>

             <div class="postbody">
                <div class="content">
                   <div>{postrow.displayed.MESSAGE}</div>
                   <!-- BEGIN switch_attachments -->
                      <dl class="attachbox">
                         <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                         <dd class="attachments">
                            <!-- BEGIN switch_post_attachments -->
                            <dl class="file">
                               <dt>
                                  <img

    src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt=""/>
                               </dt>
                               <dd>
                                  <!-- BEGIN switch_dl_att -->
                                  <span><a class="postlink"

    href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">

    {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a>

    {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}</span>
                                  <!-- END switch_dl_att -->

                                  <!-- BEGIN switch_no_dl_att -->
                                  <span>

    {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT}

    {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}</span>
                                  <!-- END switch_no_dl_att -->

                                  <!-- BEGIN switch_no_comment -->
                                  <span>

    {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</span>
                                  <!-- END switch_no_comment -->

                                  <!-- BEGIN switch_no_dl_att -->
                                  <span><strong>

    {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></span>
                                  <!-- END switch_no_dl_att -->

                                  <span>

    ({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE})

    {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</span>
                               </dd>
                            </dl>
                            <!-- END switch_post_attachments -->
                         </dd>
                      </dl>
                   <!-- END switch_attachments -->
                </div>
                <div class="edited-message">
                </div>
                <!-- BEGIN switch_signature -->
                   <div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">

    {postrow.displayed.SIGNATURE_NEW}</div>
                <!-- END switch_signature -->
             </div>
          </div>
          <!-- BEGIN first_post_br -->
          <hr id="first-post-br" />
          <!-- END first_post_br -->
       <!-- END displayed -->
    <!-- END postrow -->

    <a name="bottomtitle"></a>

    <div class="quick-nav-topics bottom">
        <!-- BEGIN switch_isconnect -->
       <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>
        <!-- END switch_isconnect -->
        <a href="#top">{L_BACK_TO_TOP}</a>
        <!-- BEGIN switch_isconnect -->
       <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
        <!-- END switch_isconnect -->
    </div>

    <div class="topic-actions bottom">
       <!-- BEGIN topicpagination -->
          <div class="pagination">
             {PAGINATION}
          </div>
       <!-- END topicpagination -->

       <div class="topic-actions-buttons">
          <!-- BEGIN switch_user_logged_in -->
             <!-- BEGIN watchtopic -->
                {S_WATCH_TOPIC}
             <!-- END watchtopic -->
          <!-- END switch_user_logged_in -->

          <!-- BEGIN switch_user_authpost -->
             <a href="{U_POST_NEW_TOPIC}" rel="nofollow" class="ion-edit button1">{L_POST_NEW_TOPIC}</a>
          <!-- END switch_user_authpost -->
          <!-- BEGIN switch_user_authreply -->
             <a href="{U_POST_REPLY_TOPIC}" class="ion-reply button1">{L_POST_REPLY_TOPIC}</a>
          <!-- END switch_user_authreply -->
       </div>
    </div>

    <!-- BEGIN promot_trafic -->
       <div class="block" id="ptrafic_close" style="display: none;">
          <div class="h3"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><i class="ion-ios-

    plus-outline"></i></a>{PROMOT_TRAFIC_TITLE}</div>
       </div>
       <div class="block" id="ptrafic_open" style="display:'';">
          <div class="h3"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><i class="ion-ios-

    minus-outline"></i></a>{PROMOT_TRAFIC_TITLE}</div>
          <ul class="ptrafic">
             <!-- BEGIN link -->
                <li>
                   <a href="{promot_trafic.link.U_HREF}" target="_blank"

    title="{promot_trafic.link.TITLE}" rel="nofollow">
                      <i class="ion-ios-chatbubble-outline"></i>{promot_trafic.link.TITLE}
                   </a>
                </li>
             <!-- END link -->
          </ul>
       </div>
    <!-- END promot_trafic -->

    <!-- BEGIN switch_forum_rules -->
    <div class="post row1" id="forum_rules">
       <div class="h3">{L_FORUM_RULES}</div>
       <div class="clear"></div>
       <table class="postbody">
          <tr>
             <!-- BEGIN switch_forum_rule_image -->
             <td class="logo">
                <img src="{RULE_IMG_URL}" alt="" />
             </td>
             <!-- END switch_forum_rule_image -->
             <td class="rules content">
                {RULE_MSG}
             </td>
          </tr>
       </table>
    </div>
    <!-- END switch_forum_rules -->

    <!-- BEGIN switch_user_logged_in -->
       <a name="quickreply"></a>
       {QUICK_REPLY_FORM}
    <!-- END switch_user_logged_in -->

    <form action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
       <fieldset class="jumpbox">
          <label>{L_JUMP_TO}:</label>
          {S_JUMPBOX_SELECT}
          <input class="button2" type="submit" value="{L_GO}" />
       </fieldset>
    </form>

    <!-- BEGIN viewtopic_bottom -->
    <form method="get" action="{S_FORM_MOD_ACTION}">
       <fieldset class="quickmod">
          <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}" />
          <label>{L_MOD_TOOLS}:</label>
          {S_SELECT_MOD}
          <input class="button2" type="submit" value="{L_GO}" />
       </fieldset>
    </form>

    <p class="right">{S_TOPIC_ADMIN}</p>
    <!-- END viewtopic_bottom -->

    <!-- BEGIN show_permissions -->
       <div class="block">
          <div class="h3">{L_TABS_PERMISSIONS}</div>
          {S_AUTH_LIST}
       </div>
    <!-- END show_permissions -->

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

    {switch_image_resize.IMG_RESIZE_HEIGHT} }));
    //]]>
    </script>
    <!-- END switch_image_resize -->

    <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github-gist.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/go.min.js"></script>
    <script>
    $(document).ready(function() {
       $('pre, code').each(function(i, block) {
          hljs.highlightBlock(block);
       });

       $('.post').each(function() {
          if (!$(this).find('.postprofile-avatar').html().length) {
             $(this).find('.postprofile-rank').css('border-bottom', 'none');
             $(this).find('.postprofile > dl > dt').css('min-height', $(this).find('.post-head').innerHeight

    ());
          }
       });
    });
    </script>

    La page "rpg", c'est ceci : http://prntscr.com/vlq93z

    Tandis que le rpgsheet, c'est cela : http://prntscr.com/vlqaqj (c'est mieux aligné). Sur cette page, on ne peut pas modifier la fiche, alors que sur "rpg" on peut.

    Ceci dit, ces screens ne servent à rien, puisqu'avec le compte : Guest (mdp: guest123), tu pourras les voir !

    Pour le CSS, je te mets tout ce que j'ai :

    CSS:


    Code:
    /* Description forums */

    .BlocForum {
      width: 120%;
      margin-left: 60px;
    }


    .BlocForum:after {
      display:table;
      content:"";
      clear:both;
    }

    .description-forums {
      float:left; /* flottant à gauche */
      width:70%;/* largeur de 80% */
      height: 100px;
    }

    .sousforums {
      float:right; /* flottant à gauche */
      width:20%; /* largeur de 20% */
    }

    .description-forums div {
      margin:2px 10px 2px 10px;
      padding:6px;
      text-align:justify;
      border-top: 2px solid white;
      -webkit-box-shadow:1px 1px 2px 0px #FFFFF;
      -moz-box-shadow:1px 1px 2px 0px #000000;
      /*box-shadow:1px 1px 2px #000000;*/
      height: 100px;
      width: auto;
      color: #9e9577;
      overflow: auto;
    }

    .description-forums div::-webkit-scrollbar {
      width: 4px; /*largeur de la scrollbar verticale*/
      height: 4px; /*hauteur de la scrollbar horizontale*/
      background-color: #2e2e2e;
      border-radius: 8px;
    }
     
    .description-forums div::-webkit-scrollbar-track {
      background-color:  #2e2e2e; /*couleur du fond de la scrollbar*/
      border-radius: 0;
      border-left: 4px solid #2e2e2e;
      border-right: 4px solid #2e2e2e;
    }

    .description-forums div::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
      background-color: #8f8774/*couleur de l'ascenseur*/;
      border-radius: 2px;
      border-left: 1px solid #2e2e2e;
      border-right: 1px solid #2e2e2e;
    }


    .sousforums a{
      font-size: 0.8em;
      display:block; /* on transforme les liens en blocs */
      background:#00000063!important; /* couleur de fond */
      padding:2px; /* marges internes haut/bas et droite/gauche */
      margin:2px 0; /*marges externes haut/bas et droite/gauche */
      /* des coins arrondis */
      -webkit-border-radius:1px;
      -moz-border-radius:1px;
      border-radius:1px;
      /* un effet d'ombre */
      -webkit-box-shadow:1px 1px 2px 0px #000000;
      -moz-box-shadow:1px 1px 2px 0px #000000;
      box-shadow:1px 1px 2px 0px #000000;
    }

    #defilementSF {
      height: 101px;
      overflow: auto;
      width: auto;
    }

    #defilementSF::-webkit-scrollbar {
      width: 4px; /*largeur de la scrollbar verticale*/
      height: 4px; /*hauteur de la scrollbar horizontale*/
      background-color: #2e2e2e;
      border-radius: 8px;
    }
     
    #defilementSFv::-webkit-scrollbar-track {
      background-color:  #2e2e2e; /*couleur du fond de la scrollbar*/
      border-radius: 0;
      border-left: 4px solid #2e2e2e;
      border-right: 4px solid #2e2e2e;
    }

    #defilementSF::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
      background-color: #8f8774/*couleur de l'ascenseur*/;
      border-radius: 2px;
      border-left: 1px solid #2e2e2e;
      border-right: 1px solid #2e2e2e;
    }
     


    /* Titres de catés centrés*/

    li.header dl.icon dd.dterm {
      width: 100%!important;
    }

    .dterm h2 {
        font-family: 'Fondamento';
    }


    /* Pour caler le nom du dernier message */

    .color-groups {
      float:none!important;
    }

    /* iFrame tableau */

    #divPA {
        text-align: center;
        margin: auto;
    }


    /* mettre le lastpost correctement*/

    /*ul.topiclist dd {
        display: block;
        float: right;
        padding: 18px 0;
    } */



    /* Fonds des liens d'habitude invisibles */
    .linklist.top {
        border-width: 0 0;
        padding: 6px;
        background-color: #000000bd;
      border-radius: 3px;
    }
    .linklist {
        list-style: none;
        margin: 24px 0;
        background-color: #000000bd;
        padding: 6px;
      border-radius: 3px;
    }

    /* Page Profil Tweaks */

    .middleline {
        line-height: 2em;
        padding-left: 15px;
    }

    .module {
        background-color: #000000e3;
        /* border-radius: 3px; /
        box-shadow: 0 1px 6px rgba(0,0,0,0.06);
        color: #dbcaa4;
        font-size: 1.3rem;
        / margin-bottom: -24px; */
        overflow: hidden;
        padding: 18px;
        width: 300px;
        height: 350px;
    }
    .module .h3 {
        background-color: rgb(0 0 0 / 57%);
        border-bottom: none;
        /* border-radius: 3px 3px 0 0; */
        color: #FFF;
        font-family: inherit;
        font-size: 1.3rem;
        font-weight: 400;
        margin: -18px -18px 18px;
        padding: 12px 18px;
        text-transform: none;
    }

    /*Décalage Titres dans les topics et posts */

    .table-title, .table-title h2, ul.topiclist dd.dterm h2, ul.topiclist dt h2 {
        display: inline;
        font-size: 2rem;
        font-weight: 300;
        text-align: center;
    }

    #cp-main h1 {
        border-bottom: none;
        color: #dbcaa4;
        margin-bottom: 9px;
        margin-left: 30px;
        margin-top: 10px;
        padding: 0;
    }

    .post h2.topic-title a {
        display: block;
        max-width: 95%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-left: 5px;
    }
    .post-head .topic-date {
        border: solid;
        border-color: transparent;
        margin-left: 258px;
    }

    .postbody {
        color: #dbcaa4;
        float: none;
        font-size: 1.2rem;
        margin-left: 260px;
        padding: 12px 18px 18px;
    }

    /* Couleur bandeau catégorie */

    .forabg.hidden {
        background-color: rgba(24, 24, 27, 0.7)!important;
    }

    .forabg {
        background-color: rgba(24, 24, 27, 0.7)!important;
        background-image: none!important;
      border-radius : 0px;
    }

    ul.forums {
        background-color: rgba(24, 24, 27, 0.7)!important;
        background-image: none!important;
    }

    /* VIRER LES DOUBLE DOTS */

    .postprofile-rpg {
      font-size: 0;
    }
     
    .postprofile-rpg a[href],
    .postprofile-rpg .gensmall {
      font-size: 14px;
    }
     
    .postprofile-rpg .gensmall {
      padding-left: .35rem !important;
    }
     
    .postprofile-rpg img[align="absmiddle"] + br {
      display: none;
    }
     
    /* Panneaux fiches de perso */



    .column1 dl.details dd, .column2 dl.details dd {
        padding-left: 0px;
    }

    dl.details dt {
        color: transparent;
        display: block;
        float: left;
        text-align: right;
        width: 10em;
    }

    /* Caté Titre etc */

    #site-title, #site-title h1 {
        color: #fadf84;
        display: none;
        font-size: 30px;
        font-weight: 500;
        margin: 0;
        padding: 0;
    }

    a.forumtitle {
        color: #b3985d!important;
        text-align: left;
        margin-left: 60px;
        margin-bottom: 5px;
    }

    ul.topiclist dd.dterm, ul.topiclist dt {
        display: block;
        float: left;
        font-size: 1.3rem;
        padding: 18px;
        width: 52%;
        text-align: center;
    }

    dd.lastpost {
        font-size: 1em;
        line-height: 19px;
        padding: 0;
        margin-right: 5% ;
        text-align: center !important;
        vertical-align: middle;
        width: 15%;
        float: right !important;
        padding-top: 20%;
        word-wrap: break-word;
        display: inline-block;
    }

    /* Nombre de posts / sujets*/
    .forum_counter {
        display: block;
        position: relative;
        margin-top: 2%;
        font-size: 0.8em;
    }
    /* Icone Loups Caté */

    ul.forums li.row dl {
        background-position: left 16px top 50%!important;
        background-size: 33px 33px!important;
        min-height: 0px;
        padding: 0;
        margin-left: 20px;
        margin-right: 20px;
        /*position: relative;*/
    }


    /* FONT VOLLKORN */

    font-family: 'Vollkorn', serif;
    font-family: 'Fondamento', cursive;


    /*onglets catégories*/
    #cat-onglets {
      margin: 3px ;
    }
     
    .co-item {

      color: #dbcaa4;
      background-color: rgba(24, 24, 27, 0.7);
      border: 1px solid  #fadf84;
      border-bottom: 0px;
      cursor: pointer;
      margin: 0 3px 0px 0;
      padding: 7px 12px 6px 12px;
      border-radius: 1px 11px 0 0;
      display: inline-block;
      width: auto;
      height: 35px;
    }
     
    .co-item:hover{
      background: #00000;
      border: 1px solid #D9DBE8;
      border-bottom: 0;
      color:#3787E8;
      cursor: pointer;
      margin: 0 3px 0px 0;
      padding: 7px 12px 6px 12px;
      border-radius: 1px 11px 1px 1px;
      width: auto;
      height: 35px;
    }
     
    .co-actif {
      border: 1px solid #fadf84;
      border-bottom: 0;
      position: relative;
      bottom: -5px;
      background-color: #000c;
      height: 30px !important;
    }

    /* Script pour musique en fond */

    .player-con {
      background: url();
      display: inline-flex;
      color: #fff;
      box-shadow: 0 3px 6 rgba(0, 0, 0, .16);
      position: fixed;
      top: 35px;
      z-index: 999;
      background-attachment: fixed;
    }
     
    .player-volume input {
      -webkit-appearance: none;
      background: 0 0;
      width: 100px
    }
     
    .player-volume input::-moz-range-thumb {
      border: none;
      background: #fff;
      cursor: pointer
    }
     
    .player-volume input::-webkit-slider-thumb {
      -webkit-appearance: none!important;
      border: none;
      background: #fff;
      cursor: pointer;
      width: 12px;
      height: 12px;
      border-radius: 100%;
      margin-top: -4px
    }
     
    .player-volume input::-moz-range-track {
      background: #4f4f4f
    }
     
    .player-volume input::-webkit-slider-runnable-track {
      background: #4f4f4f;
      height: 4px;
      position: relative;
      top: -5px
    }
     
    .player-volume input:focus {
      outline: 0
    }
     
    .player-volume input::-moz-range-progress {
      background: #fff
    }
     
    .player-con>div {
      padding: 10px
    }
     
    .player-con path {
      fill: #fff!important
    }
     
    .player-state {
      background: url();
      opacity: 1;
      cursor: pointer;
    }
     
    .player-mute {
      position: relative;
      top: 2px;
      margin-right: 5px
    }
     
    .player-state svg {
      margin-top: 2px;
    }
     


    /*--------------------------BDN-------------------------------------*/
    .is-sticky#headerbar-top{background-color:#000;

    background-repeat:repeat;
    border-bottom:1px solid #fadf84;
    box-shadow:0 0 15px #000;}
    .navbar a{color:#fadf84;
    font-weight:700;
    font-size:12px;}
    .navbar a:hover{background-color:#000;}
    .navbar img:hover{
    -webkit-filter: brightness(1000%) !important;
    -o-filter: brightness(1000%) !important;
    -moz-filter: brightness(1000%) !important;
    filter : brightness(1000%) !important;}
    .navbar img{width:100%;
    filter:invert(0);}
    a.mainmenu{font-size:0 !important;
    }
    /*--------------------------BANNIERE-------------------------------*/
    div.headerbar {background-image:url();
    background-size:100%;
    background-color: transparent!important;
    background-position:top center;
    height:255px;
    border-bottom:0px solid #fadf84;}
    .headerbar {
        background-color: transparent!important;
    }
    /*----------------------------BOUTONS------------------------------*/

    #tabs ul a span {
        background-color: #000000f5;
        border-style: solid;
        border-width: 1px;
        color: #dbcaa4;
        display: block;
        float: left;
        padding: 0 9px;
        white-space: nowrap;
    }

    fieldset.submit-buttons input {
        vertical-align: middle;
        margin-top: 10px;
    }

    .button, .button1, .button2, input[type="submit"] {
        background: #000;
        border: 2px solid #f8dd82;
        box-shadow: none!important;
        color: #f8dd82!important;
        font-weight: 500;
        text-align: center;
    }
    .inputbox:hover, input[type="text"]:hover {
        border: 2px solid #fadf84;
    }
    .button1:hover, .button2:hover, .button:hover, input[type="submit"]:hover {
    display: inline-block;
    font-weight: 800;
    text-align: center;
    color: #b99543!important;
    background-color: #000;
    box-shadow: none!important;}
    select{color: #ececec !important;}
    /*-----------------------OMBRE FORUM QEEL MODULE---------------------*/
    .topiclist,.block,.module,.post,#picture_legend,.panel{box-shadow:0px 0px 3px #000;}
    /*----------------------BORDURE STATS--------------------------------*/
    .statistics{border-top:3px solid #fadf84;}
    /*----------------COULEUR TITRES FORUMS-----------------------------
    a.forumtitle{color:#ececec !important;}
    a.forumtitle:hover{color:#ff0000 !important;} */
    /*-----------------BORDURE MESSAGE-----------------------------------*/
    .post-head{border-color:#FADF84;}
    /*------------------TAILLE ICONE LEGENDE-----------------------------*/
    #picture_legend img, #privmsgs-menu img{height:50px;
    width:50px;}
    dl.icon, ul.forums li.row dl {background-size: 50px 50px!important;}
    /*------------------TAILLE MAX FORUM---------------------------------*/
    #wrap{
      min-width:1400px;
      max-width: 80%;
    }
    /*------------------COULEUR QEEL ET LEGENDE--------------------------*/
    #picture_legend,.block,.panel {background-color: rgba(0,0,0,0.7) ;}
    .block-footer {background-color:transparent !important;}
    /*-------------------BANNIERRE FOOTER--------------------------------*/

     
     
    /*taille et forme avatar profil*/
    .postprofile-avatar img {
      height: auto;
      width: auto;
      box-shadow: none;
      border-radius: 0 !important;
      border: 0;}

    .postprofile-info {
        padding-top: 10px;
        font-size: 1.2rem;
        line-height: 1.3333;
    }

    .mod-login-avatar img {
        border: 2px solid #fadf84 !important;
        border-radius: 0px;
      height: auto;
      width: auto !important;
      box-shadow: none!important;
    }

    .postprofile-rank {
        border-color: #fadf84;
        margin-bottom: auto;
        padding-bottom: 1px;
      padding-top: 5px;
        width: auto;
        text-align: center;
    }

    /* Avatars Chat Box */

    #chatbox .user-msg .cb-avatar img {
        background-color: #FFF;
        border-color: #FFF;
        border-radius: 0px;
        border-style: solid;
        border-width: 1px;
        box-shadow: 0 1px 1px rgba(0,0,0,0.3), 0 0 1px rgba(0,0,0,0.3);
        display: block;
        height: 38px!important;
        width: 38px!important;
    }

    /*Pour la largeur de la bande Feuille de Perso*/

    .postprofile {
        background-color: #000000c4;
        border-style: solid;
        border-width: 1px;
        color: #d1ba88;
        display: block;
        float: left;
        font-size: 1.3rem;
        height: auto!important;
        padding: auto!important;
        position: relative;
        margin: 10px;
        width: 250px!important;
        word-wrap: break-word!important;
    }

    /*Ajout depuis la fiche CSS du Thème de base*/
    #chatbox .msg{word-wrap: break-word;}
    #chatbox{overflow-x: hidden;}
    #chatbox .user{white-space: nowrap;}
    body.chatbox img { vertical-align: 0px; }
    body img { vertical-align: 0px; }
    #chatbox_header .catBottom;

    /* Pour virer la séparation dans les posts */

    .post-head {
        border-color: #fadf84;
      border: 1px;
    }
    .post-head {
        background-color: rgba(0,0,0,0.03);
        border-color: rgba(0, 0, 0, 0.00);
        border-radius: 3px 3px 0 0;
        border-style: solid;
        border-width: 0 0 1px;
        padding: 18px;
    }
    /* épaisseur des cadres */
    li.row {
        border-color: #fadf84;
        border-style: solid;
        border-width: 1px 0 0;
    }
    /* Centrer la CB */
    .panel {
        border-radius: 0px;
        margin-bottom: 24px;
        overflow: hidden;
        padding: 0px 0px 0;
        position: relative;
    }

    /*Logo*/
    #logo img {
        max-width: 100%;
    }
    /* Noms de Catégories */
    a.forumtitle {
        color: #b3985d !important;
    }
    a.forumtitle:visited {
      color: #A38D5F !important;
    }
    a.forumtitle:active {
      color: #917B47 !important;
    }
    a.forumtitle:hover {
      color: #D1B86D !important;
    }

    /* CB Taille écriture et autres changements */
    #chatbox > p {
        font-size: 1.2rem;
    }
    #chatbox_footer {
        background-color: #121316;
        border-color: #121316;
        border-radius: 0 0 3px 3px;
        border-style: solid;
        border-width: 0px 0 0;
        bottom: 0;
        display: block;
        height: auto!important;
        left: 0;
        overflow: hidden;
        padding: 6px 45px 6px 18px;
        position: absolute;
        right: 0 !important;
    }
    /* Les cadres de connexions */
    .inputbox, input[type="text"] {
      background-color: rgba(0, 0, 0, 0.45);
        border: 2px solid #b99543;
        color: #b99543;
        cursor: text;
        font-size: 1.2rem;
        padding: 10px 0 9px;
    }
    dt label {
        display: block;
        font-weight: 500;
        margin-top: 7px;
        text-align: left;
        margin-left: 8px;
    }
    input {
        cursor: pointer;
        font-family: Vollkorn, serif;
        font-size: 1em;
        font-weight: 400;
        padding: 0 3px;
        vertical-align: middle;
        padding-left: 3px!important;
    }
    .h3, h3 {
        border-color: #17171a;
        border-style: solid;
        border-width: 0 0 1px;
        color: #d1ba88;
        font-family: Arial,Verdana,Tahoma,sans-serif;
        font-size: 1.58rem;
        font-weight: 400;
        letter-spacing: .2px;
        margin-bottom: 10px;
        margin-left: 30px;
        margin-top: 2px;
        padding-bottom: 2px !important;
    }
    .content p {
        font-family: Arial,Verdana,Tahoma,sans-serif;
        font-size: 1.2em;
        line-height: 1.4em;
        margin-bottom: 1em;
        margin-left: 5px !important;
    }
    /* BG SCROLL */
    body, html {
    background-attachment: fixed;
        background-color: #0f121a;
        background-image: url(https://cdnb.artstation.com/p/assets/images/images/003/530/705/large/dmitry-brushray-kaer.jpg?1474716164);
      background-size: cover;
      background-repeat: no-repeat;
        background-position: center;

    }


    /* Reduire la taille du bandeau du bas */

    .statistics {
        background-color: rgba(24, 24, 27, 0.7);
        color: #FFF;
        font-size: 1rem;
        overflow: hidden;
        padding: 18px 0;
    }

    .statistics-item > strong {
     font-size: 1rem;
     vertical-align: 1px;
    }

    #page-footer {
        background-color: rgba(24, 24, 27, 0.7)!important;
    }

    /* Couleur ecriture dans fenetre de post etc */
    #message-box textarea {
        color: #000000;

        width: 100%!important;
    }

    .row2 {
        background-color: rgba(24, 24, 27, 0.8);
    }

    .row1 {
        background-color: rgba(24, 24, 27, 0.8);
    }

    div.sceditor-dropdown input, div.sceditor-dropdown textarea {
        -moz-background-clip: padding;
        -moz-border-radius: 1px;
        -webkit-background-clip: padding-box;
        -webkit-border-radius: 1px;
        background-clip: padding-box;
        border: 1px solid #ccc;
        border-radius: 1px;
        border-top-color: #888;
        margin: 0 0 .75em;
        outline: 0;
        padding: 4px;
        color: #000000!important;
    }
    /* Bloc citation */

    blockquote {
        background-color: rgba(24, 24, 27, 0.7);
        border-color: rgba(0,0,0,0.18);
        box-shadow: 0 0 3px #FADF84;
      background-image: url("https://www.transparenttextures.com/patterns/black-felt.png")!important;
    }

    Mais à part :

    /* VIRER LES DOUBLE DOTS */

    .postprofile-rpg {
    font-size: 0;
    }

    .postprofile-rpg a[href],
    .postprofile-rpg .gensmall {
    font-size: 14px;
    }

    .postprofile-rpg .gensmall {
    padding-left: .35rem !important;
    }

    .postprofile-rpg img[align="absmiddle"] + br {
    display: none;
    }

    Je crois qu'il n'y a rien qui bouleverse les feuilles de personnage.

    Et sinon, j'aimerais avoir un truc bien aligné, genre : http://prntscr.com/vlqdw3 ( avec les icônes légèrement plus hautes).
    'Christa
    'Christa
    FémininAge : 35Messages : 163

    le Ven 20 Nov 2020 - 22:49

    Hello !

    Alors je vois qu'il n'y a plus de barres de statistiques dans les profils des messages donc j'imagine que tu as décidé de t'en passer ^^

    J'ai repéré ceci de bizarre dans le CSS :
    Code:
    /* FONT VOLLKORN */

    font-family: 'Vollkorn', serif;
    font-family: 'Fondamento', cursive;
    Les propriétés CSS doivent être déclarées à l'intérieur d'un groupe de propriétés, comme ça :
    Code:
    sélecteur {
        propriété : valeur;
        propriété : valeur;
    }

    Du coup ce bout de code n'est pas très valide :3

    Il y a également ce petit bout là :
    Code:
    #chatbox_header .catBottom;

    Et ceci également qui peut poser souci :
    Code:

      -webkit-box-shadow: 1px 1px 2px 0px #FFFFF;
      -moz-box-shadow: 1px 1px 2px 0px #000000;
    La couleur #FFFFFF a perdu un F. Oui, c'est important XD Accessoirement, je crois que box-shadow suffit désormais, tu peux les fusionner en une seule propriété. Si tu veux deux ombres, je crois qu'il est possible de les associer, mais je t'invite à chercher du côté de la définition de la propriété box-shadow pour en savoir plus :)
    J'ai vu d'autres couleurs hexadécimales qui avaient perdu des bouts, mais faire la liste de tous les bugs risquerait de prendre du temps et ce n'est pas le sujet de cette demande.

    Qu'est-ce que vous avez fait avec la fiche RPG "de base" (celle qui apparait quand on va dans le profil d'un membre) ? L'alignement des deux colonnes est clairement anormal par rapport à la version normale de modernBB mais je n'arrive pas à mettre le doigt sur d'où ça vient. Essaie de remettre (temporairement) ton CSS à zéro pour voir si ça le fait même comme ça ?

    Et pourquoi du code visant à modifier de force un alignement déjà cassé se trouve... dans le template overall_header, plutôt que dans votre feuille de style ?

    Je me demande si le problème ne pourrait pas se trouver dans le template overall_header, en fin de compte. Le profil avancé n'est pas modifiable, donc ça doit bien venir d'ailleurs...
    Gurufissu
    Gurufissu
    MasculinAge : 24Messages : 11

    le Ven 20 Nov 2020 - 23:11

    Hoyo, merci pour la réponse !

    Ouep, je me suis dit que c'était peut-être plus simple de faire sans, puisque ça ne servait à rien aux joueurs et que les MJs avaient un logiciel avec toutes les stats enregistrées. Autant faire simple quand on peut :zen:

    Bizarre pour les polices, puisque ça marche nickel ! scratch Je ne saurais pas quoi mettre en "sélecteur" de toutes les façons, faut que je vois avec ceux qui ont mit ces CSS scratch

    Pour le CSS de la chatbox, vu qu'on est passé sur discord, j'imagine que je peux juste le désactiver, et je viens de le faire, merci Razz

    Enfin pour le CSS sur les shadows, je viens de vérifier, et ça ne sert absolument à rien :wall: Du coup j'ai désactivé les deux. Le premier code, lorsque activé avec les 6 F, bah ça rend moche, et le deuxième il change rien !

    Enfin bis, pour la page de la fiche RPG, on n'a pas touché encore, j'ai essayé de faire des trucs mais j'ai pas trouvé. Du coup je vais essayer de tout enlever pour voir.

    J'ai essayé, et ça ne change rien pour l'alignement scratch Peut-être un JS ?
    'Christa
    'Christa
    FémininAge : 35Messages : 163

    le Ven 20 Nov 2020 - 23:31

    Donc même sans ton CSS actuel, le bug est présent ? Voilà qui est très étrange. Est-ce que tu peux me dire quelles sont les options cochées en bas de la page des CSS ?

    Est-ce que tu peux me donner ton template overall_header, également ?

    (Les polices "fonctionnent" probablement parce qu'elles sont utilisées ailleurs pour d'autres sélecteurs. Ces deux lignes ne devraient pas être là)

    Edit: Ton CSS est compressé, non? Décoche cette fonction, ça sera déjà un bon début x_x
    Gurufissu
    Gurufissu
    MasculinAge : 24Messages : 11

    le Ven 20 Nov 2020 - 23:37

    Les options cochées sont :

    Forcer le CSS de base : non
    Désactiver le CSS de base : non
    Optimiser le CSS : oui

    Et vlà le overall header !

    Spoiler:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
    <head>
         <link href="https://fonts.googleapis.com/css2?family=Vollkorn:wght@400&display=swap" rel="stylesheet">
            <link href="https://fonts.googleapis.com/css2?family=Fondamento&display=swap" rel="stylesheet" >
       <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
       <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
       <meta http-equiv="content-script-type" content="text/javascript" />
       <meta http-equiv="content-style-type" content="text/css" />
       <!-- BEGIN switch_compat_meta -->
          <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
       <!-- END switch_compat_meta -->
       <!-- BEGIN switch_canonical_url -->
          <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
       <!-- END switch_canonical_url -->
       {META_FAVICO}
       {META}
       {META_FB_LIKE}
       <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
       {T_HEAD_STYLESHEET}
       {CSS}
       <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
       <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
       <script src="{JQUERY_PATH}" type="text/javascript"></script>
     
      <script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
     
        <!-- BEGIN switch_recent_jquery -->
        <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
        <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
        <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
        <!-- END switch_recent_jquery -->
       <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
        {RICH_SNIPPET_GOOGLE}

       <!-- BEGIN switch_fb_login -->
          <script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
          <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
       <!-- END switch_fb_login -->

       <!-- BEGIN switch_ticker -->
          <link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css" />
          <script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
       <!-- END switch_ticker -->

       <!-- BEGIN switch_ticker_new -->
          <script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
          <script type="text/javascript">
             //<![CDATA[
                /* Definir le sens de direction en fonction du panneau admin */
                var tickerDirParam = "{switch_ticker.DIRECTION}";
                var slid_vert = false;
                var auto_dir = 'next';
                var h_perso = parseInt({switch_ticker.HEIGHT});

                switch( tickerDirParam )
                {
                   case 'top' :
                      slid_vert = true;
                      break;

                   case 'left':
                      break;

                   case 'bottom':
                      slid_vert = true;
                      auto_dir = 'prev';
                      break;

                   case 'right':
                      auto_dir = 'prev';
                      break;

                   default:
                      slid_vert = true;
                }

                $(document).ready(function() {

                   $('#fa_ticker_content').css('display','block');

                   var width_max = $('ul#fa_ticker_content').width();
                   var width_item = Math.floor(width_max / {switch_ticker.SIZE});

                   if (width_max > 0)
                   {
                      $('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
                         if ($(this).width() > width_item)
                         {
                         var ratio      = $(this).width() / width_item;
                         var new_height = Math.round($(this).height() / ratio);
                         $(this).height(new_height).width(width_item);
                         }
                      });

                      if (slid_vert)
                      {
                         var height_max = h_perso;

                         $('ul#fa_ticker_content li').each( function () {
                            if ($(this).height() > height_max)
                            {
                               height_max = $(this).height();
                            }
                         } );

                         $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
                         $('ul#fa_ticker_content li').height(height_max);
                      }


                      $('#fa_ticker_content').jcarousel({
                            vertical: slid_vert,
                         wrap: 'circular',
                         auto: {switch_ticker.STOP_TIME},
                         auto_direction: auto_dir,
                      scroll: 1,
                      size: {switch_ticker.SIZE},
                      height_max: height_max,
                      animation: {switch_ticker.SPEED}
                      });
                   }
                   else
                   {
                      $('ul#fa_ticker_content li:not(:first)').css('display','none');
                      $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
                   }
                });
             //]]>
          </script>
       <!-- END switch_ticker_new -->
     
       <script type="text/javascript">//<![CDATA[
          $(document).ready(function(){
             <!-- BEGIN switch_enable_pm_popup -->
                pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
                if(pm != null) { pm.focus(); }
             <!-- END switch_enable_pm_popup -->
             <!-- BEGIN switch_report_popup -->
                report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
                if(report != null) { report.focus(); }
             <!-- END switch_report_popup -->
             <!-- BEGIN switch_ticker -->
                $(document).ready(function() {
                   Ticker.start({
                      height : {switch_ticker.HEIGHT},
                      spacing : {switch_ticker.SPACING},
                      speed : {switch_ticker.SPEED},
                      direction : '{switch_ticker.DIRECTION}',
                      pause : {switch_ticker.STOP_TIME}
                   });
                });
             <!-- END switch_ticker -->
          });

          <!-- BEGIN switch_login_popup -->
                var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;

                $(document).ready( function() {
                    $(window).resize(function() {
                        var windowWidth = document.documentElement.clientWidth;
                        var popupWidth = $("#login_popup").width();
                        var mypopup = $("#login_popup");

                        $("#login_popup").css({
                            "left": windowWidth/2 - popupWidth/2
                        });
                    });
                });
          <!-- END switch_login_popup -->
          //]]>
       </script>

       {GREETING_POPUP}

       <style type="text/css">
          #page-footer, div.navbar, div.navbar ul.linklist {
             display: block !important;
          }

          ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
             display: inline !important;
          }

          <!-- BEGIN switch_ticker_new -->
          .jcarousel-skin-tango .jcarousel-item {
             text-align:center;
             width: 10px;
          }

          .jcarousel-skin-tango .jcarousel-item-horizontal {
             margin-right: {switch_ticker.SPACING}px;
          }

          .jcarousel-skin-tango .jcarousel-item-vertical {
             margin-bottom: {switch_ticker.SPACING}px;
          }
          <!-- END switch_ticker_new -->
       </style>

       {HOSTING_JS}

       <!-- BEGIN google_analytics_code -->
       <script type="text/javascript">
          //<![CDATA[
          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
          })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

          ga('create', '{G_ANALYTICS_ID}', 'auto');
          ga('send', 'pageview');
          ga('set', 'anonymizeIp', true);

          <!-- BEGIN google_analytics_code_bis -->
          ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
          ga('bis.send', 'pageview');
          ga('bis.set', 'anonymizeIp', true);
          <!-- END google_analytics_code_bis -->
          //]]>
       </script>
       <!-- END google_analytics_code -->

       <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet" />
       <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
            <link rel="preconnect" href="https://fonts.gstatic.com">
            <link href="https://fonts.googleapis.com/css2?family=Redressed&display=swap" rel="stylesheet">
    <style>
    #profile-advanced-details .column2{
    position:relative;
    top:-330px;
    }
    </style></head>

    <body id="modernbb">
       <!-- BEGIN hitskin_preview -->
          <div id="hitskin_preview" style="display: block;">
             <h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
             <div class="content">
                <p>
                   {hitskin_preview.L_THEME_SITE_PREVIEW}
                   <br />
                   <span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
                </p>

             </div>
          </div>
       <!-- END hitskin_preview -->

       <!-- BEGIN switch_login_popup -->
          <div id="login_popup" style="z-index: 10000 !important;">
             <div class="h3">{SITENAME}</div>
                <div id="login_popup_message">
                    {LOGIN_POPUP_MSG}
                </div>
             <div id="login_popup_buttons">
                <form action="{S_LOGIN_ACTION}" method="get">
                   <input type="submit" class="button1" value="{L_LOGIN}" />
                   <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                   <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
                </form>
             </div>
          </div>
       <!-- END switch_login_popup -->

       <a id="top" name="top" accesskey="t"></a>
       {JAVASCRIPT}

       <div id="page-header">
          <div class="headerbar">
             <div id="headerbar-top">
                <div class="wrap">
                   <a href="{U_INDEX}" id="logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>

                   <ul class="navbar navlinks{NAVBAR_BORDERLESS}">
                      <li>{GENERATED_NAV_BAR}</li>
                   </ul>
                </div>
             </div>

             <div class="wrap">
                <div id="site-desc">
                   <!-- BEGIN switch_h1 -->
                      <div id="site-title">{switch_h1.MAIN_SITENAME}</div>
                   <!-- END switch_h1 -->
                   <!-- BEGIN switch_desc -->
                      <p>{switch_desc.SITE_DESCRIPTION}</p>
                   <!-- END switch_desc -->
                </div>
             </div>
          </div>

          <!-- BEGIN switch_ticker_new -->
          <div id="fa_ticker_blockD" style="margin-top:4px;">
             <div class="module">
                <div class="inner">
                   <div id="fa_ticker_container">
                      <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
                         <!-- BEGIN ticker_row -->
                         <li>{switch_ticker.ticker_row.ELEMENT}</li>
                         <!-- END ticker_row -->
                      </ul>
                   </div>
                </div>
             </div>
          </div>
          <!-- END switch_ticker_new -->
       </div>

       <div class="conteneur_minwidth_IE">
       <div class="conteneur_layout_IE">
       <div class="conteneur_container_IE">
       <div id="wrap">
          <div id="page-body">

             <!-- BEGIN switch_ticker -->
             <div id="fa_ticker_block" style="margin-top:4px;">
                <div class="module">
                   <div class="inner">
                      <div id="fa_ticker_container">
                         <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                            <div class="fa_ticker_content">
                               <!-- BEGIN ticker_row -->
                               <div>{switch_ticker.ticker_row.ELEMENT}</div>
                               <!-- END ticker_row -->
                            </div>
                         </div>
                      </div>
                   </div>
                </div>
             </div>
             <!-- END switch_ticker -->

             <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                <div id="outer-wrapper">
                   <div id="wrapper">
                      <div id="{ID_LEFT}">
                         <!-- BEGIN giefmod_index1 -->
                            {giefmod_index1.MODVAR}
                            <!-- BEGIN saut -->
                               <div style="height:{SPACE_ROW}px"></div>
                            <!-- END saut -->
                         <!-- END giefmod_index1 -->
                      </div>

                      <div id="container">
                         <div id="content-main">
                            <div id="main">
                               <div id="main-content">
    'Christa
    'Christa
    FémininAge : 35Messages : 163

    le Ven 20 Nov 2020 - 23:57

    Alors, j'ai édité mon message plus haut, j'aurais besoin que tu désactives "l'optimisation" du CSS (FA n'est pas très très doué pour ça et ça crée occasionnellement des bugs... ou ça en masque d'autres).

    J'ai également insisté sur le fait que les deux lignes que j'ai indiquées n'avaient pas la moindre chance de fonctionner, les polices en question sont utilisées via d'autres sélecteurs.

    Pour le template overall_header, je vois qu'il a été victime de l'accumulation de moult tutoriels dépareillés, et qu'il a potentiellement pris un coup de vieux au passage.

    Du coup, commence par le remettre à zéro, puis cherche la balise </head> et JUSTE AVANT rajoute ces codes là (qui étaient déjà dans ton template modifié)

    Code:

    <!-- DEBUT : MODIFICATIONS DU THEME -->
    <link href="https://fonts.googleapis.com/css2?family=Vollkorn:wght@400&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Fondamento&display=swap" rel="stylesheet" >
    <script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Redressed&display=swap" rel="stylesheet">
    <!-- FIN : MODIFICATIONS DU THEME -->
    (Les commentaires sont pas nécessaires, je trouve ça juste plus pratique pour repérer ce qui a été changé)

    Si tu es observateur, tu constateras que j'ai retiré ce bout de code là :
    Code:
    <style>
    #profile-advanced-details .column2{
    position:relative;
    top:-330px;
    }
    </style>
    Il fait justement partie des codes qui affectent notre profil, mettons le de côté pour le moment.

    J'ai également besoin de savoir quels autres templates ont été modifiés, s'il te plait ! (pas besoin de me donner leur code pour le moment).

    En vrai, pour vérifier que ça ne vient pas de ton forum (certains vieux forums ont du code tout bizarre qui a l'air de venir de leur ancienneté et pas des templates) je te suggèrerais d'enregistrer tous tes templates et ton CSS et de remettre tout à zéro pour voir si le bug est toujours présent (l'art de procéder par élimination), mais c'est une procédure lourde donc on va espérer trouver avant d'en arriver là.
    Gurufissu
    Gurufissu
    MasculinAge : 24Messages : 11

    le Sam 21 Nov 2020 - 0:08

    Optimisation desactivated !

    Alors je poste rapidos sans avoir tout testé encore. Donc j'ai juste remit à zéro le template, collé ce que tu m'as donné comme code et retiré les 2 lignes du CSS sur les polices. Et là, la partie qui était trop basse sur la feuille de perso, l'est encore plus :hum:

    Donc c'est peut-être le code que tu as enlevé qui fait ça ?

    Et pour les templates modifiés il y a : index body, index box, topics list box, viewforum body, viewtopic body pour le header général. Et en vrai c'est tout !
    'Christa
    'Christa
    FémininAge : 35Messages : 163

    le Sam 21 Nov 2020 - 0:13

    Oui, le code que j'ai enlevé est effectivement celui qui "remonte" la colonne trop basse. Mais justement, j'essaie de trouver pourquoi la colonne est trop basse pour commencer, donc pas touche @_@ Même si c'est laid, ça l'était déjà avant de toute façon. Je regarderai demain ou plus tard pour la suite, en espérant que tu survives d'ici là. Vérifie que tu n'as pas fait tout ça avant que j'édite mon précédent message, aussi, il y avait deux lignes que j'avais oubliées.

    Il n'y a pas de templates modifiés ailleurs que dans la catégorie "Général" du coup ? Sapristi, d'où vient ce bug.
    Gurufissu
    Gurufissu
    MasculinAge : 24Messages : 11

    le Sam 21 Nov 2020 - 0:18

    Dis pas que mon bb est moche par contre :angry:

    Mais on va essayer de survivre d'ici là hein... Et nope, pas de templates modifiés ailleurs que dans général. J'ai d'ailleurs remit le bon code vu que du coup non je n'avais pas vu l'édit !

    Mais du coup, dans le pire des cas, il suffira de le faire à la barbare et changer les pixels du code enlevé :barbare: Du coup tranquille, c'est déjà un petit soulagement

    Bonne nuit btw
    'Christa
    'Christa
    FémininAge : 35Messages : 163

    le Sam 21 Nov 2020 - 15:37

    Alors donc, relativement à nos conversations endiablées sur Discord, il s'avère que j'ai fait une erreur dramatique (ou alors c'est Senk qui raconte n'importe quoi, mais dans le doute, considérons que Senk a raison)

    Tu te rappelles de ça :

    Code:
    <!-- DEBUT : MODIFICATIONS DU THEME -->
    <link href="https://fonts.googleapis.com/css2?family=Vollkorn:wght@400&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Fondamento&display=swap" rel="stylesheet" >
    <script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Redressed&display=swap" rel="stylesheet">
    <!-- FIN : MODIFICATIONS DU THEME -->

    Faut le mettre avant ça :
    Code:
    {CSS}

    Voilà :3

    Donc retire les fameuses lignes font de ton CSS, teste dans un topic ce qui se passe si tu fais ça
    Code:
    <div style="font-family: Vollkorn, serif;">Test de Vollkorn</div>
    <div style="font-family: 'Fondamento', cursive;">Test de Fondamento</div>
    Et raconte moi tout :3
    Contenu sponsorisé


      La date/heure actuelle est Lun 23 Nov 2020 - 16:58