Le Deal du moment : -21%
LEGO® Icons 10329 Les Plantes Miniatures, ...
Voir le deal
39.59 €

Voir le sujet précédent Voir le sujet suivant Aller en bas
Aller à la page : Précédent  1, 2, 3  Suivant
Linoa
Créatrice Graphique ♔ Du talent jusqu'au bout des doigts
Linoa
♕ Inscription : 24/03/2019
♕ Messages : 103
♕ Référencé : Non
Une commande imposante pour Lino'... - Page 2 Flrs Une commande imposante pour Lino'... - Page 2 Yo9q

Sam 27 Avr 2019 - 14:31
Rappel du premier message :

Bonsoiiiir *-*

Je viens vers vous pour une GROSSE commande ;__;
J'ai donc besoin de vos talents ! *nulle en codage*


• URL de ton forum : En construction
• Type de code (PA, Catégorie, Messages etc..) : Codage complet
• Schéma approximatif :
J'ai réalisé plusieurs maquettes :
- la maquette globale de l'index (avec la PA, les catégories et le QEEL) >
Spoiler:
( > Lien direct de la maquette
- la maquette de la liste des forums + celle des sujets >
Spoiler:
( > Lien direct de la maquette
- la maquette des messages + profil >
Spoiler:
( > Lien direct de la maquette

• Dimensions : Niveau dimensions, je sais jamais quoi donner >< la largeur du forum est de 30% (si ça peut aider, ça correspond à celle de mon forum Realm Enchanted).
• Code de couleurs : #25115e , #f1ae81 & #ffffff
• Police Google Font :
J'en ai choisi plusieurs :
- cette typo' pour la PA & le QEEL au niveau des titres et liens (Règlement, point recrutement, devenir staff ?...etc) > https://fonts.google.com/specimen/Aclonica
- cette typo' pour les titres des forums (renseignements utiles, présentations - au niveau du schéma liste des forums - le pseudo dans le profil, le titre du footer) > https://fonts.google.com/specimen/Julius+Sans+One
Pour le reste, c'est soit des images ou la police Verdana déjà présente sur Forumactif

• Images : Niveau images, vu qu'il y en a une quantité, je vais tout vous filer tout le dossier sur MEGA dont le lien sera sous hide. S'il vous manque des images, n'hésitez pas à me le signaler ^^
>
• Informations complémentaires : J'ai également réalisé une maquette de l'index avec des annotations (notamment sur la PA enfait) :
- l'image du milieu doit s'abaisser quand on passe la souris dessus pour dévoiler le contexte
- une "bulle" doit apparaître lorsque l'on passe la souris sur les images du staff (toutes les images doivent avoir leur propre bulle)
- même chose pour les deux images des Clans, sauf qu'ici, un simple chiffre pouvant aller jusqu'à la centaine, doit apparaître
- pour la création du mois, j'aimerais qu'un petit aperçu soit visible dans une "bulle" qui apparaît quand la souris passe dessus, si possible mais PAS en taille réelle ; en gros une bulle qui redimensionne la créa' automatiquement mais sans la déformer.

Maquette avec les annotations :
Spoiler:

Lien direct de la maquette

Autres détails : les petits textes sur la PA "Devenir partenaire" et "Devenir staff" sont des liens, idem pour les crédits "Linoa Graphic" et "un site".
Même chose pour l'image d'insta et les plumes en haut à gauche.

Autre détail² : le bloc contenant le texte des post sur la maquette des messages doit s'adapter à la longueur des posts
• URL de ton référencement / Pub : Le référencement n'est pas encore fait mais dès que le forum est terminé, ça sera fait o/

Si vous avez des questions, n'hésitez pas o/
Linoa
http://realm-enchanted.forumactif.com
Revenir en haut Aller en bas
AuteurMessage
Miettes
Esprit Libre ✪ Anciennement du Staff ★ L'herbe est plus verte ailleurs
Miettes
♕ Inscription : 27/03/2012
♕ Messages : 241
♕ Référencé : Oui
Une commande imposante pour Lino'... - Page 2 88x31-logo

Dim 12 Mai 2019 - 16:14
Bon bah du coup, il ne reste que les messages :)

Je regarde ça cette semaine ^^
Miettes
http://tambouille-raleuses.forumactif.com
Revenir en haut Aller en bas
Linoa
Créatrice Graphique ♔ Du talent jusqu'au bout des doigts
Linoa
♕ Inscription : 24/03/2019
♕ Messages : 103
♕ Référencé : Non
Une commande imposante pour Lino'... - Page 2 Flrs Une commande imposante pour Lino'... - Page 2 Yo9q

Ven 17 Mai 2019 - 3:27
Nickel ! :D
Je n'ai pas répondu mais j'avais vu ton post ^^
Linoa
http://realm-enchanted.forumactif.com
Revenir en haut Aller en bas
Miettes
Esprit Libre ✪ Anciennement du Staff ★ L'herbe est plus verte ailleurs
Miettes
♕ Inscription : 27/03/2012
♕ Messages : 241
♕ Référencé : Oui
Une commande imposante pour Lino'... - Page 2 88x31-logo

Mar 28 Mai 2019 - 8:53
Coucou Linoa :)

excuse moi pour ces délais de réponse :/ J'ai choppé une méga crève la semaine dernière. Il me reste donc les messages à coder.

Est-ce que tu veux déjà que je te transmette le début à installer ?
Miettes
http://tambouille-raleuses.forumactif.com
Revenir en haut Aller en bas
Linoa
Créatrice Graphique ♔ Du talent jusqu'au bout des doigts
Linoa
♕ Inscription : 24/03/2019
♕ Messages : 103
♕ Référencé : Non
Une commande imposante pour Lino'... - Page 2 Flrs Une commande imposante pour Lino'... - Page 2 Yo9q

Mer 29 Mai 2019 - 13:25
Coucou Miettes,

J'allais justement me permettre un petit UP :$
Je suis désolée, j'espère que tu t'es bien rétablie ?
Du coup, je veux bien les premiers codes, s'il te plaît :)
Linoa
http://realm-enchanted.forumactif.com
Revenir en haut Aller en bas
Miettes
Esprit Libre ✪ Anciennement du Staff ★ L'herbe est plus verte ailleurs
Miettes
♕ Inscription : 27/03/2012
♕ Messages : 241
♕ Référencé : Oui
Une commande imposante pour Lino'... - Page 2 88x31-logo

Ven 31 Mai 2019 - 11:15
Coucou :)

Du coup, voilà les éléments.

Une commande imposante pour Lino'... - Page 2 5570927 Je suis obligée de découper le message en plusieurs parties.

Les templates

- index_body
Code:
{JAVASCRIPT}

<div id="wrapper-pa"></div>

<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <!-- BEGIN message_admin_titre -->
  <tr>
    <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
  </tr>
  <!-- END message_admin_titre -->
  <!-- BEGIN message_admin_txt -->
  <tr>
    <td class="row1" rowspan="3" align="center" valign="middle">
    <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
    </td>
  </tr>
  <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="{switch_user_login_form_header.V_ALIGN}" class="row1">

                <table>
                    <tr>
                        <td><span class="genmed">{L_USERNAME}:</span> </td>
                        <td><input class="post" type="text" size="10" name="username"/> </td>
                        <td>
                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                            <span class="gensmall">{L_AUTO_LOGIN}</span> 
                        </td>
                    </tr>

                    <tr>
                        <td><span class="genmed">{L_PASSWORD}:</span> </td>
                        <td><input class="post" type="password" size="10" name="password"/> </td>
                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                    </tr>
                </table>
            </td>

            <!-- BEGIN switch_social_login -->
            <td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_header.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
            </td>
            <!-- END switch_social_login -->

        </tr>
    </table>
</form>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50%" valign="top">
      <!-- BEGIN switch_user_logged_in -->
      <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
      <!-- END switch_user_logged_in -->
      <!-- BEGIN switch_delete_cookies -->
      <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
      <!-- END switch_delete_cookies -->
    </td>
    <td width="50%" align="right">
      <span class="gensmall">
        <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
        <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
        <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
        <!-- BEGIN switch_on_index -->
          <!-- BEGIN switch_delete_cookies -->
          <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
          <!-- END switch_delete_cookies -->
        <!-- END switch_on_index -->
      </span>
    </td>
  </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="right" class="row1">

                <table>
                    <tr>
                        <td><span class="genmed">{L_USERNAME}:</span> </td>
                        <td><input class="post" type="text" size="10" name="username"/> </td>
                        <td>
                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                            <span class="gensmall">{L_AUTO_LOGIN}</span> 
                        </td>
                    </tr>

                    <tr>
                        <td><span class="genmed">{L_PASSWORD}:</span> </td>
                        <td><input class="post" type="password" size="10" name="password"/> </td>
                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                    </tr>
                </table>
            </td>

            <!-- BEGIN switch_social_login -->
            <td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_footer.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
            </td>
            <!-- END switch_social_login -->

        </tr>
    </table>
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->
<div id="mon-qeel" style="display:none">
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
    <td class="catHead" colspan="2" height="28">
    <!-- BEGIN switch_viewonline_link -->
    <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
    <!-- END switch_viewonline_link -->

    <!-- BEGIN switch_viewonline_nolink -->
    <span class="cattitle">{L_WHO_IS_ONLINE}</span>
    <!-- END switch_viewonline_nolink -->
    </td>
  </tr>
  <tr>
    <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
    <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
    {TOTAL_USERS}<br />
    {NEWEST_USER}</span></td>
  </tr>
  <tr>
    <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
    {RECORD_USERS}<br />
    <br />
    {LOGGED_IN_USER_LIST}</span></td>
  </tr>
  {L_CONNECTED_MEMBERS}
  {L_WHOSBIRTHDAY_TODAY}
  {L_WHOSBIRTHDAY_WEEK}
  <tr>
    <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
  </tr>
  <!-- BEGIN switch_chatbox_activate -->
  <tr>
    <td class="row1">
      <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
        <!-- BEGIN switch_chatbox_popup -->
        <div id="chatbox_popup"></div>
        <script type="text/javascript">
        //<![CDATA[
        insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
        //]]>
        </script>
        <!-- END switch_chatbox_popup -->
      </span>
    </td>
  </tr>
  <!-- END switch_chatbox_activate -->
</table>
</div>
<!-- END disable_viewonline -->


<!-- QEEL -->
<div id="wrapper-qeel" class="feq">
    <img src="https://i.servimg.com/u/f71/20/05/19/39/qeel10.png" alt="Qui se trouve parmi nous ?">
    <div class="d-flex" id="qeel-first-line">
        <div id="qeel-liste-mb-enligne">
            <div class="qeel-titre aclonica stats">Les membres en ligne</div>
            <p class="stats"><span class="nb d-none">@connectes_forum@</span>Membre<span class="pluriel">s</span> présent<span class="pluriel">s</span> : @membres_connectes$, @</p>
        </div>
        <div id="qeel-liste-mb-recents">
            <div class="qeel-titre aclonica">Les membres récents</div>
            <p>Membres connectés au cours des 24 dernières heures : @derniers_membres_connectes$, @</p>
        </div>
    </div>
   
    <div id="qeel-stats">
        <div class="qeel-titre aclonica">Les statistiques de Your Art</div>
        <p>
            Les membres de Your Art ont posté un total de <span class="stats"><span class="nb">@messages@</span> message<span class="pluriel">s</span></span>.
            <br />
            Actuellement, il y a <span class="stats"><span class="nb">@connectes_forum@</span> membre<span class="pluriel">s</span> enregistré<span class="pluriel">s</span></span>.
            <br />
            Le membre le plus récent est @dernier_membre@ ! Bienvenue sur Your Art !
            <br />
            Il y a, en tout, <span class="stats"><span class="nb">@enregistres@</span> membre<span class="pluriel">s</span></span> en ligne, <span class="stats"><span class="nb">@invisibles@</span> invisible<span class="pluriel">s</span></span> et <span class="stats"><span class="nb">@invites@</span> invité<span class="pluriel">s</span></span>.
        </p>
    </div>

    <div id="qeel-groupes">
        <div class="d-flex">
            <a href="#">
                <img src="https://i.servimg.com/u/f71/20/05/19/39/clan-f10.png" alt="Fondatrice">
            </a>
            <a href="#">
                <img src="https://i.servimg.com/u/f71/20/05/19/39/clan-s10.png" alt="Staff">
            </a>
            <a href="#">
                <img src="https://i.servimg.com/u/f71/20/05/19/39/clan-p10.png" alt="Phoenix Tears">
            </a>
            <a href="#">
                <img src="https://i.servimg.com/u/f71/20/05/19/39/clan-d10.png" alt="Dragons Flames">
            </a>
        </div>     
    </div>

    <div id="qeel-anniversaires">
        <div class="qeel-titre aclonica">Anniversaires des membres</div>
        <p>@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=<span>Il/Elle fête son anniversaire aujourd'hui :</span> @membres_anniversaire_aujourdhui$&@$<span>Ils fêtent leur anniversaire aujourd'hui :</span> @membres_anniversaire_aujourdhui$, @@$<span>Aucun membre ne fête son anniversaire aujourd'hui.</span> @@</p>
    </div>
   
</div>
<!-- Fin QEEL -->

{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
  <tr>
    <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
    <td><span class="gensmall">{L_NEW_POSTS}</span></td>
    <td></td>
    <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
    <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
    <td>  </td>
    <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
    <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
  </tr>
</table>
<!-- END switch_legend -->

{AUTO_DST}

- index_box
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>

<div id="wrapper-categories">
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
   <div class="categorie">
      <div class="cate-header aclonica">
         {catrow.tablehead.L_FORUM}
       </div>
       <div class="wrapper-forum d-flex">
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <div class="un-forum d-flex">
      <figure class="img-etat">
           <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
       </figure>
        <div class="forum-description">
            <div class="titre-forum aclonica">
                <h{catrow.forumrow.LEVEL} class="hierarchy">
                    <span class="forumlink">
                        <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                    </span>
                </h{catrow.forumrow.LEVEL}>
            </div>
            <div>
                {catrow.forumrow.FORUM_DESC}

                <!-- BEGIN switch_moderators_links -->
                {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                <!-- END switch_moderators_links -->
            </div>
        </div>
        <div class="sous-forum">
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </div>
        <div class="stats-last-msg">
            <div class="stats-forum">
                <span class="stats"><span class="nb">{catrow.forumrow.POSTS}</span> sujet<span class="pluriel">s</span></span> ; <span class="stats"><span class="nb">{catrow.forumrow.TOPICS}</span> message<span class="pluriel">s</span></span>
            </div>
            <div class="last-post">
                <!-- BEGIN ads -->
                <span class="AD_LastPA">
                    <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                    <span class="AD_LastInfos">
                        <b><a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a></b><br />
                        {catrow.forumrow.ads.DATE}<br />
                        {catrow.forumrow.ads.LOCATION}
                    </span>
                </span>
                <!-- END ads -->
                <!-- BEGIN avatar -->
                <div style="width: 200px;"></div>
                <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                <!-- END avatar -->

                <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
            </div>
        </div>
    </div>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
      </div>
   </div>
   <!-- END tablefoot --><!-- END catrow -->
</div>

- overall_header
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>
    <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>
    <!-- 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() {
            var w_cont = $('#fa_ticker_container').width();

            if (w_cont > 0) {
                $('#fa_ticker_container').width(w_cont);

                /* Affichage de la liste */
                $('#fa_ticker_content').css('display','block');

                /* Calcul des dimensions du conteneur et des elements */
                var width_max = $('ul#fa_ticker_content').width();
                var width_item = Math.floor(width_max / {switch_ticker.SIZE});
                var height_max = h_perso;

                /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
                $('ul#fa_ticker_content li').each( function () {
                    if ($(this).height() > height_max) {
                        height_max = $(this).height();
                    }
                } );

                /* Redimensionnement des elements et des images trop larges */
                $('ul#fa_ticker_content li').width(width_item).height(height_max).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);
                    }
                });

                /* Redimensionnement et centrage du conteneur en mode vertical */
                if (slid_vert) {
                    $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
                }

                /* Initialisation du caroussel */
                $('#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;
    <!-- END switch_login_popup -->

    <!-- BEGIN switch_login_popup -->
    $(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}
    <!-- BEGIN switch_ticker_new -->
    <style>
    .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;
    }
    </style>
    <!-- END switch_ticker_new -->
    {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 -->

     <!-- Typo du forum -->
   <link href="https://fonts.googleapis.com/css?family=Julius+Sans+One" rel="stylesheet" media="all" type="text/css" />
   <link href="https://fonts.googleapis.com/css?family=Aclonica" rel="stylesheet" media="all" type="text/css" />
   <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet" media="all" type="text/css" />
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
    <!-- BEGIN hitskin_preview -->
    <div id="hitskin_preview" style="display: block;">
        <h1><img src="https://2img.net/i/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;">
        <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
            <tr height="25">
                <td class="catLeft">
                    <span class="genmed module-title">{SITENAME}</span>
                </td>
            </tr>
            <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
                <td class="row1" align="left" valign="top">
                    <div id="login_popup_buttons">
                        <form action="{S_LOGIN_ACTION}" method="get">
                            <input type="submit" class="mainoption" value="{L_LOGIN}" />
                            <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                            <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                        </form>
                    </div>
                    <span class="genmed">{LOGIN_POPUP_MSG}</span>
                </td>
            </tr>
        </table>
    </div>
    <!-- END switch_login_popup -->

    <a name="top"></a>
    {JAVASCRIPT}

    <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
        <tr>
            <td class="bodyline">
                <table width="100%" cellspacing="0" cellpadding="0" border="0">
                    <tr>
                        <!-- BEGIN switch_logo_left -->
                        <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                        <!-- END switch_logo_left -->
                        <td align="center" width="100%" valign="middle">
                            <!-- BEGIN switch_logo_center -->
                            <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                            <br />
                            <!-- END switch_logo_center -->
                            <div class="maintitle">{MAIN_SITENAME}</div>
                            <br />
                            <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                        </td>
                        <!-- BEGIN switch_logo_right -->
                        <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                        <!-- END switch_logo_right -->
                    </tr>
                </table>

                <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
                    <tr>
                        <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
                    </tr>
                </table>

                <div style="clear: both;"></div>

                <!-- BEGIN switch_ticker_new -->
                <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                        <tr>
                            <td align="left" class="row1">
                                <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>
                            </td>
                        </tr>
                    </table>
                </div>
                <!-- END switch_ticker_new -->

                <!-- BEGIN switch_ticker -->
                <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                        <tr>
                            <td align="left" class="row1">
                                <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>
                            </td>
                        </tr>
                    </table>
                </div>
                <!-- END switch_ticker -->

                <div id="page-body">
                    <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                        <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                            <tbody>
                                <tr>
                                    <td valign="top" width="{C1SIZE}">
                                        <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>
                                    </td>
                                    <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>
<!-- END html_validation -->

- topics_list_box
Code:
<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
   var all_checked = true;
   for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
      }
   }
   document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
   for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
      }
   }
}
</script>
<!-- END multi_selection -->

<div id="liste-sjt">
   <div class="d-flex header">
      <div class="sjt">
         Sujet
      </div>
      <div class="reponses">
         Réponses
      </div>
      <div class="auteur">
         Auteur
      </div>
      <div class="vues">
         Vues
      </div>
      <div class="dernier-msg">
         Dernier messages
      </div>
      <!-- BEGIN multi_selection -->
      <div style="width: 20px"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></div>
      <!-- END multi_selection -->
   </div>
   <!-- BEGIN pagination -->
   <div class="pagination">
      <span class="gensmall">{PAGINATION}</span>
   </div>
   <!-- END pagination -->

<table>
   <!-- END header_table --><!-- BEGIN header_row -->
   <!-- END header_row -->

<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
<div class="d-flex un-sjt">
   <!-- BEGIN single_selection -->
   <div class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></div>
   <!-- END single_selection -->

   <div class="sjt {topics_list_box.row.ROW_CLASS}">
      <img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
      <div>
         <!-- BEGIN icon -->
         {topics_list_box.row.ICON}
         <!-- END icon -->
         {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
         <h2 class="topic-title">
            <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
         </h2>
         <!-- BEGIN switch_description -->
         <span class="genmed">
            <br />
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
         </span>
         <!-- END switch_description -->
         <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span> 
         <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
      </div>         
   </div>
   <div class="reponses">
      {topics_list_box.row.REPLIES}
   </div>
   <div class="auteur">
      {topics_list_box.row.TOPIC_AUTHOR}
   </div>
   <div class="vues">
      {topics_list_box.row.VIEWS}
   </div>
   <div class="dernier-msg">
      <!-- BEGIN avatar -->
        <div style="width: 200px;"></div>
        <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
        <!-- END avatar -->
        <span class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span>
   </div>
   <!-- BEGIN multi_selection -->
   <div style="width: 20px;"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></div>
   <!-- END multi_selection -->
</div>
   <!-- END topic --><!-- BEGIN no_topics -->
   <div class="no-topic">
      {topics_list_box.row.L_NO_TOPICS}
   </div>
   <!-- END no_topics --><!-- BEGIN bottom -->
   <div class="d-flex bottom-sjt">
      <div>
         <span class="gensmall">{PAGINATION}</span>
      </div>
      <div>
         <a href="#top">{L_BACK_TO_TOP}</a>
      </div>
   </div>
<!-- END bottom --><!-- BEGIN footer_table -->
</table>
</div><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

- viewforum_body
Code:
<table width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
  <tr>
      <td align="left" valign="middle" width="50">
        <!-- BEGIN switch_user_authpost -->
        <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}" alt="{L_POST_NEW_TOPIC}" border="0" /></a>
        <!-- END switch_user_authpost -->
      </td>
      <td class="nav" valign="middle" width="100%">
            <div class="nav">
                <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>{NAV_CAT_DESC}
            </div>
        </td>
        <!-- BEGIN show_plus_menu -->
      <td class="gensmall" align="right" valign="bottom" nowrap="nowrap">
        <span class="nav">
            <script type="text/javascript">//<![CDATA[
              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('f{FORUM_ID}&f={FORUM_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
            //]]>
            </script>
        </span>
      </td>
        <!-- END show_plus_menu -->
  </tr>
</table>

<div id="dans-forum">{BOARD_INDEX}</div>

{TOPICS_LIST_BOX}

<div id="info_open" style="display:''">
  <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr>
        <td class="row1" align="left" valign="top"><span class="gensmall"><a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a></span></td>
        <td class="row1" align="right" valign="top"><span class="gensmall">{S_WATCH_FORUM}</span></td>
      </tr>
      <tr>
        <td class="row2" colspan="2" valign="top"><span class="gensmall"><b>{LOGGED_IN_USER_LIST}</b></span></td>
      </tr>
      <tr>
        <td class="row2" valign="top" width="150"><span class="gensmall"><b>{L_MODERATOR}:</b></span></td>
        <td class="row1" valign="top"><span class="gensmall">{MODERATORS}</span></td>
      </tr>
      <tr>
        <td class="row2" valign="top" width="150"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
        <td class="row1" valign="top"><span class="gensmall">{S_AUTH_LIST}</span></td>
      </tr>
      <tr>
        <td class="catBottom" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                  <td class="nav" valign="middle" width="100%"><div class="nav"> <a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC_SECOND}</div></td>
                  <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>
              </tr>
            </table>
        </td>
      </tr>
  </table>
</div>

<div id="info_close" style="display:none">
  <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr>
        <td class="row1" colspan="2" align="right" valign="top"><span class="gensmall"><a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a></span></td>
      </tr>
      <tr>
        <td class="row2" colspan="2" valign="top"><span class="gensmall"><b>{LOGGED_IN_USER_LIST}</b></span></td>
      </tr>
      <tr>
        <td class="catBottom" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                  <td class="nav" valign="middle" width="100%"><span class="nav"> <a class="nav" href="{U_INDEX}">{L_INDEX}</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>
  </table>
</div>
  <form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
  <tr>

        <td align="left" valign="middle" width="50">
            <!-- BEGIN switch_user_logged_in -->
            <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}1" alt="{L_POST_NEW_TOPIC}" border="0" /></a>
            <!-- END switch_user_logged_in -->
        </td>
        <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" /></span></td>

  </tr>
  <!-- BEGIN switch_legend -->
  <tr>
      <td colspan="2">
        <table border="0" cellpadding="6" cellspacing="2" align="center">
            <tr>
              <td>
                  <img src="{FOLDER_NEW_IMG}" alt="{L_FOLDER_NEW_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_NEW_IMG}</span><br />
                  <img src="{FOLDER_HOT_NEW_IMG}" alt="{L_FOLDER_HOT_NEW_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_HOT_NEW_IMG}</span><br />
                  <img src="{FOLDER_LOCKED_NEW_IMG}" alt="{L_FOLDER_LOCKED_NEW_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_LOCKED_NEW_IMG}</span>
              </td>
              <td>
                  <img src="{FOLDER_IMG}" alt="{L_FOLDER_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_IMG}</span><br />
                  <img src="{FOLDER_HOT_IMG}" alt="{L_FOLDER_HOT_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_HOT_IMG}</span><br />
                  <img src="{FOLDER_LOCKED_IMG}" alt="{L_FOLDER_LOCKED_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_LOCKED_IMG}</span>
              </td>
              <td valign="top">
                  <img src="{FOLDER_ANNOUNCE_IMG}" alt="{L_FOLDER_ANNOUNCE_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_ANNOUNCE_IMG}</span><br />
                  <img src="{FOLDER_GLOBAL_ANNOUNCE_IMG}" alt="{L_FOLDER_GLOBAL_ANNOUNCE_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_GLOBAL_ANNOUNCE_IMG}</span><br />
                  <img src="{FOLDER_STICKY_IMG}" alt="{L_FOLDER_STICKY_IMG}" border="0" /> <span class="gensmall">{L_FOLDER_STICKY_IMG}</span><br />
              </td>
            </tr>
        </table>
      </td>
  </tr>
  <!-- END switch_legend -->
</table>
      </form>

Miettes
http://tambouille-raleuses.forumactif.com
Revenir en haut Aller en bas
Miettes
Esprit Libre ✪ Anciennement du Staff ★ L'herbe est plus verte ailleurs
Miettes
♕ Inscription : 27/03/2012
♕ Messages : 241
♕ Référencé : Oui
Une commande imposante pour Lino'... - Page 2 88x31-logo

Ven 31 Mai 2019 - 11:15
La Pa
Une commande imposante pour Lino'... - Page 2 5570927 A mettre sur une page html (PA > Modules > HTML & Javascript > Gestion des pages HTML) ; création en mode avancé ; cocher "non" et "non"
Code:
<!-- Ligne du haut -->
        <div class="d-flex">
            <div id="pa-plume">
                <a href="#" target="_blank" class="aclonica">
                    <img src="https://i.servimg.com/u/f71/20/05/19/39/top-si10.png" alt="Top Site">
                    <span>Votez pour<br />Your Art</span>
                </a>
            </div>
            <div id="pa-bienvenue">
                <img src="https://i.servimg.com/u/f71/20/05/19/39/bienve10.png" alt="Bienvenue sur Your Art">
            </div>
            <div id="pa-instagram">
                <a href="#" target="_blank" class="aclonica">
                    <img src="https://i.servimg.com/u/f71/20/05/19/39/insta-10.png" alt="Instagram">
                    <span>Retrouvez-nous<br />sur Insta' !</span>
                </a>
            </div>
        </div>
        <!-- Fin ligne du haut -->
        
        <div class="d-flex">
            <!-- Colonne de gauche -->
            <div id="pa-col-left">
                <ul id="pa-link" class="aclonica">
                    <li>
                        <a href="#">Règlement</a>
                    </li>
                    <li>
                        <a href="#">Présentations des membres</a>
                    </li>
                    <li>
                        <a href="#">Partenaires</a>
                    </li>
                    <li>
                        <a href="#">Commandes graphiques</a>
                    </li>
                    <li>
                        <a href="#">Libre-service</a>
                    </li>
                </ul>
                
                <div id="pa-recrutement">
                    <div class="pa-titre aclonica">Points recrutements</div>
                    <p>Nous recrutons activement des <strong>Modérateurs</strong> et des <strong>Animateurs</strong> !</p>
                </div>
                
                <div id="pa-news">
                    <div class="pa-titre aclonica">Nouveautés</div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe reiciendis quidem similique possimus nobis !</p>
                </div>
            </div>
            <!-- Fin Colonne de gauche -->
            
            <!-- Colonne du milieu -->
            <div id="pa-col-center">
                <div id="pa-presentation">
                    <img src="https://i.servimg.com/u/f71/20/05/19/39/img-pa10.png" alt="Le contexte">
                    <div id="pa-txt">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio consectetur earum quo, et non fugiat, odit veritatis, mollitia culpa facere iure error optio aperiam corporis nostrum impedit magnam laboriosam nemo.
                    </div>
                </div>
                <div id="pa-partenaires">
                    <div class="pa-titre aclonica">Top partenaires</div>
                    <div class="d-flex">
                        <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
                        <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
                        <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
                        <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
                        <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
                        <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
                    </div>
                    <a href="#" class="text-shadow">Devenir partenaire ?</a>
                </div>
                <div id="pa-credits">
                    <div class="pa-titre aclonica">Crédits</div>
                    <p>
                        Design' réalisé par ©Linoa sur <a href="#" target="_blank">Linoa Graphic</a>
                        <br />
                        Codage réalisé par ©Miettes sur <a href="http://triangle-references.forumactif.com/" target="_blank">Triangle-References</a>
                    </p>
                </div>
            </div>
            <!-- Fin Colonne du milieu -->
            
            <!-- Colonne de droite -->
            <div id="pa-col-right">
                <div id="pa-staff">
                    <a href="#" class="text-shadow">Devenir staff ?</a>
                    <div class="d-flex">
                        <div class="pa-mb-staff">
                            <img src="https://i.servimg.com/u/f71/20/05/19/39/pastaf10.png" alt="Linoa">
                            <div class="pa-ib">
                                <p class="pseudo dancing">Linoa</p>
                                <p class="rang julius">Fondatrice</p>
                            </div>
                        </div>
                        <div class="pa-mb-staff">
                            <img src="https://i.servimg.com/u/f71/20/05/19/39/pastaf10.png" alt="Pseudo">
                            <div class="pa-ib">
                                <p class="pseudo dancing">Pseudo</p>
                                <p class="rang julius">Rang</p>
                            </div>
                        </div>
                        <div class="pa-mb-staff">
                            <img src="https://i.servimg.com/u/f71/20/05/19/39/pastaf10.png" alt="Pseudo">
                            <div class="pa-ib">
                                <p class="pseudo dancing">Pseudo</p>
                                <p class="rang julius">Rang</p>
                            </div>
                        </div>
                        <div class="pa-mb-staff">
                            <img src="https://i.servimg.com/u/f71/20/05/19/39/pastaf10.png" alt="Pseudo">
                            <div class="pa-ib">
                                <p class="pseudo dancing">Pseudo</p>
                                <p class="rang julius">Rang</p>
                            </div>
                        </div>
                        <div class="pa-mb-staff">
                            <img src="https://i.servimg.com/u/f71/20/05/19/39/pastaf10.png" alt="Pseudo">
                            <div class="pa-ib">
                                <p class="pseudo dancing">Pseudo</p>
                                <p class="rang julius">Rang</p>
                            </div>
                        </div>
                        <div class="pa-mb-staff">
                            <img src="https://i.servimg.com/u/f71/20/05/19/39/pastaf10.png" alt="Pseudo">
                            <div class="pa-ib">
                                <p class="pseudo dancing">Pseudo</p>
                                <p class="rang julius">Rang</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="pa-clans">
                    <div class="pa-titre aclonica">Clans</div>
                    <div class="d-flex">
                        <div class="pa-clan">
                            <img src="https://i.servimg.com/u/f71/20/05/19/39/clan-d10.png" alt="Dragons Flames">
                            <div class="pa-ib">
                                120
                            </div>
                        </div>
                        <div class="pa-clan">
                            <img src="https://i.servimg.com/u/f71/20/05/19/39/clan-p10.png" alt="Phoenix Tears">
                            <div class="pa-ib">
                                XXX
                            </div>
                        </div>
                    </div>
                </div>
                
                <div id="pa-crea-mois">
                    <div class="pa-titre aclonica">Création du mois</div>
                    <div class="d-flex">
                        <div>
                            <img src="https://i.servimg.com/u/f71/20/05/19/39/img-cr10.png" alt="Création du mois">
                            <div class="pa-ib">
                                <img src="https://i.servimg.com/u/f71/20/05/19/39/img-pa10.png" alt="Création d'Avril : Linoa">
                            </div>
                        </div>
                        <p class="aclonica">Venez la<br />découvrir <a href="#">ici</a> !</p>
                    </div>
                </div>

            </div>
            <!-- Fin Colonne de droite -->
        </div>


Du JS
Une commande imposante pour Lino'... - Page 2 5570927 PA > Modules > HTML & Javascript > Gestion des codes javascript ; cocher "sur toutes les pages"
Code:
;$(function(){
 
 // Charge en-tête
 $('#wrapper-pa').load('/h22-commande-linoa-pa');

 /*** Afficher / Cacher "s" pour les stats ***/
 $( ".stats .nb" ).each(function( index ) {
 var infos_stat = $(this).text();

 if( infos_stat * 1 <= 1){
  $(this).parents('.stats').find('.pluriel').addClass('d-none');
 }
 });

 $('body')
    .on('mouseleave', '#wrapper-pa #pa-col-center #pa-presentation', function(){
        var elt = $(this);
        elt.addClass('out');
        setInterval( function(){
            elt.removeClass('out');
        }, 2000);
      console.log('ok');
    });

});
Une commande imposante pour Lino'... - Page 2 5570927 Ici, il faut que tu remplaces :
/h22-commande-linoa-pa
par l'url de la page html qui contient ta pa :)

La CSS
Une commande imposante pour Lino'... - Page 2 5570927 Il faudra la remettre à jour une fois que j'aurai fini les messages :)

Code:
body{
    background: #f1ae81;
    color: #25115e;
    font: normal 14px/1 Verdana, sans-serif;
}

#page-body{
 margin: auto;
 width: 1160px;
}

.julius{
   font-family: 'Julius Sans One', sans-serif;
}
.aclonica{
    font-family: 'Aclonica', sans-serif;
}
.dancing{
  font-family: 'Dancing Script', cursive;;
}

.d-none{
  display: none;
}

.d-flex{
   align-items: flex-start;
   display: flex;  
   flex-wrap: wrap;  
  justify-content: space-around;      
}

/*** ------- PA ------- ***/
#wrapper-pa{
    background: transparent url('https://i.servimg.com/u/f71/20/05/19/39/fond-p10.png') no-repeat center center;
    background-size: cover;
    border: 2px solid #25115e;
    box-sizing: border-box;  
    border-radius: 10px;
    font: normal 12px/1 Verdana, sans-serif;
    margin: auto;
    min-height: 502px;
    width: 1160px;
}

#wrapper-pa > .d-flex{
 justify-content: space-between;    
}

#wrapper-pa p,
#wrapper-pa ul{
  margin: 0;
  padding: 0;
}

/* Liens */
#wrapper-pa a{
    color: #25115e;
    text-decoration: none;
    transition: all ease-in-out .8s;
}

#wrapper-pa a:hover{
    color: #000;
    transition: all ease-in-out .8s;
}

#wrapper-pa .text-shadow{
  font-size: .8rem;
  text-shadow: 0 0 3px #fff;
}

#wrapper-pa .text-shadow::before{
  content:"~";
  padding-right: 2px;
}

/* Infobulle */
#wrapper-pa #pa-col-right #pa-staff .pa-mb-staff,
#wrapper-pa #pa-col-right #pa-clans .pa-clan,
#wrapper-pa #pa-col-right #pa-crea-mois div:not(.pa-ib){
  cursor: pointer;
  position: relative;
}

#wrapper-pa .pa-ib{
  background: #25115e;
  border:  4px solid #fff;
  border-radius: 5px;
  color: #f1ae81;
  font-size: 1.2rem;
  font-weight: bold;
  display: none;
  left: 0;
  padding: 10px;
  position: absolute;
  text-align: center;
  top: 20%;
  min-width: 100px;
  z-index: 999;
}

#wrapper-pa img:hover + .pa-ib,
#wrapper-pa .pa-ib:hover{
  display: block;
}

/*** --- HEADER --- ***/
#wrapper-pa #pa-plume a,
#wrapper-pa #pa-instagram a,
#wrapper-pa #pa-plume span,
#wrapper-pa #pa-instagram span{
  display: block;
}

#wrapper-pa #pa-plume a,
#wrapper-pa #pa-instagram a{
  font-size: 0.8rem;
  position: relative;
}

/*** Top Site ***/
#wrapper-pa #pa-plume{
  width: 15%;
}

#wrapper-pa #pa-plume span{
  bottom: -2%;
  left: 43%;
  position: absolute;
  width: 100%;
}


/*** Bienvenue ***/
#wrapper-pa #pa-bienvenue{
  width: 73%;
}

#wrapper-pa #pa-bienvenue img{
  max-width: 100%;
  position: relative;
  top: -5px;
}

/*** Instagram **/

#wrapper-pa #pa-instagram{
  width: 12%;
}

#wrapper-pa #pa-instagram span{
  position: absolute;
  top: 90%;
}

/*** --- COLONNES --- ***/
#wrapper-pa #pa-col-left,
#wrapper-pa #pa-col-center,
#wrapper-pa #pa-col-right{
 flex: 0 0 33.333%;
 max-width: 33.333%;
}

#wrapper-pa #pa-col-left{
  padding-top: 3%;
}

/*** Titre ***/
#wrapper-pa .pa-titre{
    font-size: 1.6rem;
    font-variant: small-caps;
    margin: 10px 0 5px;
    text-align: center;
}

/*** Colonne de gauche ***/

/* Liste de liens */
#wrapper-pa #pa-col-left #pa-link{
  font-variant: small-caps;
  list-style: none;
  text-align: center;
  }

#wrapper-pa #pa-col-left #pa-link li{
    font-size: 1.4rem;
}

/* Recrutement */
#wrapper-pa #pa-col-left #pa-recrutement{
    text-align: center;
}

#wrapper-pa #pa-col-left #pa-recrutement p{
   font-size: 1rem;
}

/* News */
#wrapper-pa #pa-col-left #pa-news p {
    font-size: 1rem;
    margin: 0 10px;
}

/*** Colonne du milieu ***/

/* Contexte */
#wrapper-pa #pa-col-center #pa-presentation{
  cursor: pointer;
  height: 242px;
  margin: auto;
  position: relative;
  overflow: hidden;
  width: 323px;
}

#wrapper-pa #pa-col-center #pa-presentation > img,
#wrapper-pa #pa-col-center #pa-presentation #pa-txt{
  width: 100%;
}

#wrapper-pa #pa-col-center #pa-presentation #pa-txt{
  left: 0;
  padding: 10px;
  position: absolute;
  top: 0;
  z-index: 90;
}

#wrapper-pa #pa-col-center #pa-presentation > img{
  position: relative;
  top: 0;
  z-index: 100;
}

#wrapper-pa #pa-col-center #pa-presentation:hover > img{
  animation-duration: 2s;
  animation-name: hideImage;
  top: 250px;
}

#wrapper-pa #pa-col-center #pa-presentation.out > img{
  animation-duration: 2s;
  animation-name: showImage;
  top: 250px;
}

@keyframes hideImage {
  from {
    top: 0;
  }

  to {
    top: 250px;
  }
}

@keyframes showImage {
  from {
    top: 250px;
  }

  to {
    top: 0;
  }
}

/* Partenaires */
#wrapper-pa #pa-col-center #pa-partenaires{
 margin: auto;
 width: 300px;
}

#wrapper-pa #pa-col-center #pa-partenaires .d-flex{
  justify-content: center;
}

#wrapper-pa #pa-col-center #pa-partenaires a{
  margin: 2px;
}

/* Crédits */
#wrapper-pa #pa-col-center #pa-credits p{
  font-size: 0.7rem;
  line-height: 1rem;
}

#wrapper-pa #pa-col-center #pa-credits a{
  color: #f1ae81;
  font-weight: bold;
  text-shadow: 1px 1px #25115e, -1px -1px #25115e, -1px 1px #25115e,1px -1px #25115e;
  transition: all ease-in-out .8s;
}

#wrapper-pa #pa-col-center #pa-credits a:hover{
  color: #25115e;
  text-shadow: 1px 1px #f1ae81, -1px -1px #f1ae81, -1px 1px #f1ae81,1px -1px #f1ae81;
  transition: all ease-in-out .8s;
}

/*** Colonne de droite ***/

/* Staff */
#wrapper-pa #pa-col-right #pa-staff .d-flex{
  justify-content: center;
}

#wrapper-pa #pa-col-right #pa-staff .pa-mb-staff{
 margin: 5px 10px;
}

#wrapper-pa #pa-col-right #pa-staff .pa-mb-staff .pseudo{
  font-size: 1.4rem;
}

#wrapper-pa #pa-col-right #pa-staff .pa-mb-staff .rang{
  font-size: 1rem;
}

/* Clans */
#wrapper-pa #pa-col-right #pa-clans > .d-flex{
 justify-content: center;
}

#wrapper-pa #pa-col-right #pa-clans .pa-clan{
  flex: 0 0 40%;
  max-width: 40%;
  text-align: center;
}

#wrapper-pa #pa-col-right #pa-clans .pa-clan > img{
  max-width: 100%;
}

/* Création du mois */

#wrapper-pa #pa-col-right #pa-crea-mois .d-flex{
  align-items: center;
}

#wrapper-pa #pa-col-right #pa-crea-mois a{
  color: #f1ae81;
  font-weight: bold;
  text-shadow: 1px 1px #25115e, -1px -1px #25115e, -1px 1px #25115e,1px -1px #25115e;
  transition: all ease-in-out .8s;
}

#wrapper-pa #pa-col-center #pa-crea-mois a:hover{
  color: #25115e;
  text-shadow: 1px 1px #f1ae81, -1px -1px #f1ae81, -1px 1px #f1ae81,1px -1px #f1ae81;
  transition: all ease-in-out .8s;
}

#wrapper-pa #pa-col-right #pa-crea-mois .pa-ib{
  top: inherit;
  bottom: 20%;
}

#wrapper-pa #pa-col-right #pa-crea-mois .pa-ib img{
  max-width: 200px;
}

/*** ------- QEEL ------- ***/
#wrapper-qeel{
    background: transparent url('https://i.servimg.com/u/f71/20/05/19/39/fond-p10.png') no-repeat center center;
    background-size: cover;
    border: 2px solid #25115e;  
    border-radius: 10px;
    padding: 5px;
    margin: 15px auto;    
    width: 80%;
}

#wrapper-qeel > img{
  display: block;
  margin: auto;
  position: relative;
  top: -11px;
  width: 800px;
}

#wrapper-qeel p{
  font-size: 1rem;
}

#wrapper-qeel #qeel-liste-mb-enligne,
#wrapper-qeel #qeel-liste-mb-recents,
#wrapper-qeel #qeel-stats,
#wrapper-qeel #qeel-anniversaires{
  border: 2px dashed #fff;
  border-radius: 5px;
  padding: 5px;
}

#wrapper-qeel #qeel-liste-mb-enligne,
#wrapper-qeel #qeel-liste-mb-recents{
  flex: 0 0 47%;
  max-width: 47%;
}

#wrapper-qeel #qeel-first-line{
  align-items: stretch;
  justify-content: space-between;
  margin-bottom: 20px;
}

/* Titres */
#wrapper-qeel .qeel-titre{
  font-size: 1.2rem;
  text-align: center;
}

/* Statistiques */
#wrapper-qeel #qeel-stats{
  margin: 0 auto 10px;
  text-align: center;
  width: 80%;
}

/* Groupes */
#wrapper-qeel #qeel-groupes{
  margin: 0 auto 10px;
  width: 80%;
}

/* Anniversaires */
#wrapper-qeel #qeel-anniversaires{
   margin: auto;
    text-align: center;
  width: 50%;
}

/*** ------- Catégories ------- ***/
#wrapper-categories{
  margin: auto;
  width: 800px;
}

#wrapper-categories .categorie{
  background: #25115e;
  border: 2px solid #fff;
  border-radius: 10px;
  margin: 10px 0;
  padding: 10px;
  position: relative;
}

#wrapper-categories .categorie .cate-header{
 position: absolute;
 text-align: center;
 top: 0;
 width: 100%;
}

#wrapper-categories .categorie .cate-header .tcat{
  display: none;
}

#wrapper-categories .categorie .wrapper-forum{
  border: 5px solid #fff;
  border-radius: 10px;
  margin: 50px auto 20px;
  padding: 155px 10px 20px;
  width: 80%;
}

#wrapper-categories .categorie .wrapper-forum .un-forum{
  align-items: stretch;
  border: 2px solid #fff;
  border-radius: 10px;
  flex-wrap: nowrap;
  font-size: 12px;
  height: 101px;
  margin: 10px auto;
  overflow: hidden;
  width: 98%;
}

/* Image */
#wrapper-categories .categorie .wrapper-forum .un-forum .img-etat{
  flex: 0 0 89px;
  height: 101px;
 margin: 0;
 max-width: 89px;
    flex-grow: 0;
    flex-shrink: 0;
}

#wrapper-categories .categorie .wrapper-forum .un-forum .img-etat img{
  width: 100%;
}

/* Description */
#wrapper-categories .categorie .wrapper-forum .un-forum .forum-description{
  color: #f1ae81;
  flex-grow: 1;
 flex-shrink: 1;
  padding: 6px;
  word-break: break-word;
}

#wrapper-categories .categorie .wrapper-forum .un-forum .forum-description .titre-forum a.forumlink{
  color: #25115e;
  font-size: 16px;
  text-shadow: 1px 1px 3px #fff;
}

#wrapper-categories .categorie .wrapper-forum .un-forum .forum-description .titre-forum + div{
  height: 100%;
  overflow: auto;
}

/* sous-forum */
#wrapper-categories .categorie .wrapper-forum .un-forum .sous-forum{
  background: #f1ae81;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  font-size: 0;
  flex: 0 0 20%;
  flex-grow: 0;
    flex-shrink: 0;
  text-align: center;
}

#wrapper-categories .categorie .wrapper-forum .un-forum .sous-forum a{
  border-bottom: 1px solid #fff;
  color: #25115e;
  display: block;
  font-size: 12px;
  padding: 3px 0;
}

#wrapper-categories .categorie .wrapper-forum .un-forum .sous-forum a:hover{
  background: #25115e;
  color: #f1ae81;
}

/* Dernier message */
#wrapper-categories .categorie .wrapper-forum .un-forum .stats-last-msg{
  flex: 0 0 30%;
  flex-grow: 0;
    flex-shrink: 0;
  max-width: 30%;
  text-align: center;
}

#wrapper-categories .categorie .wrapper-forum .un-forum .stats-last-msg .stats-forum{
 color: #f1ae81;
 border: 1px dashed #fff;
    margin: 4px auto;
 padding: 2px;
 width: 90%;
}

#wrapper-categories .categorie .wrapper-forum .un-forum .stats-last-msg .gensmall,
#wrapper-categories .categorie .wrapper-forum .un-forum .stats-last-msg .gensmall a{
 color: #f1ae81;
}

#wrapper-categories .categorie .wrapper-forum .un-forum .stats-last-msg .gensmall a{
 text-decoration: none;
}

/* Dans un forum */
.nav a.nav img{
 display: none;
}

#dans-forum #wrapper-categories .cate-header{
 top: 8px;
}

#dans-forum #wrapper-categories .cate-header h2{
 color: #25115e;
  font-size: 34px;
  text-shadow: 1px 1px 3px #fff;
}

#dans-forum #wrapper-categories .categorie{
 background: transparent;
 border: 0;
}

#dans-forum #wrapper-categories .wrapper-forum{
 background: #25115e;
 border: 2px solid #fff;
 padding-top: 20px;
}

/*** Liste des sujets ***/
#liste-sjt .header {
 font-weight: bold;
}

#liste-sjt .un-sjt{
 align-items: center;
 background: #25115e;
 border: 2px solid #fff;
 border-radius: 15px;
 color: #f1ae81;
 margin: 10px 0;
 overflow: hidden;
}

#liste-sjt .un-sjt a,
#liste-sjt .un-sjt .gensmall,
#liste-sjt .un-sjt .dernier-msg .postdetails{
 color: #f1ae81 !important;
}

#liste-sjt .un-sjt a:hover{
 color: #000 !important;
}

/* Image + description */
#liste-sjt .header .sjt{
 text-align: center;
}

#liste-sjt .header .sjt,
#liste-sjt .un-sjt .sjt{
 flex: 0 0 50%;
 max-width: 50%;
}

#liste-sjt .un-sjt .sjt > img,
#liste-sjt .un-sjt .sjt > div{
 display: inline-block;
 vertical-align: top;
}

#liste-sjt .un-sjt .sjt > img{
 max-height: 50px;
}

#liste-sjt .un-sjt .sjt > div{
 padding:4px 15px;
}

#liste-sjt .un-sjt .sjt > div .topic-title{
 margin-left: 4px;
}

/* Réponses & Vues*/
#liste-sjt .header .reponses,
#liste-sjt .header .vues,
#liste-sjt .un-sjt .reponses,
#liste-sjt .un-sjt .vues{
 flex: 0 0 5%;
 max-width: 5%;
 text-align: center;
}

/* Auteur */
#liste-sjt .header .auteur,
#liste-sjt .un-sjt .auteur{
 flex: 0 0 10%;
 max-width: 10%;
 text-align: center;
}

/* Derniers Messages */
#liste-sjt .header .dernier-msg,
#liste-sjt .un-sjt .dernier-msg{
 flex: 0 0 30%;
 max-width: 30%;
 text-align: center;
}

J'essaie de finir au plus vite les messages


EDIT 18h :

Voilà ce que je te propose pour les messages :
http://test-miettes.exprimetoi.net/t1-votre-1er-sujet
Miettes
http://tambouille-raleuses.forumactif.com
Revenir en haut Aller en bas
Linoa
Créatrice Graphique ♔ Du talent jusqu'au bout des doigts
Linoa
♕ Inscription : 24/03/2019
♕ Messages : 103
♕ Référencé : Non
Une commande imposante pour Lino'... - Page 2 Flrs Une commande imposante pour Lino'... - Page 2 Yo9q

Ven 31 Mai 2019 - 12:07
Coucou ! :)

Merci pour les codes et pour ton travail !

Pour les messages, ça me semble bien ; la taille des avatars, c'est bien du 200x320 ?
Linoa
http://realm-enchanted.forumactif.com
Revenir en haut Aller en bas
Miettes
Esprit Libre ✪ Anciennement du Staff ★ L'herbe est plus verte ailleurs
Miettes
♕ Inscription : 27/03/2012
♕ Messages : 241
♕ Référencé : Oui
Une commande imposante pour Lino'... - Page 2 88x31-logo

Ven 31 Mai 2019 - 13:01
Je savais pas la taille. Du coup je ne l'ai pas indiqué.

Je vais modifier ca ce soir et je te tiens au courant :)

Envoyé depuis l'appli Topic'it
Miettes
http://tambouille-raleuses.forumactif.com
Revenir en haut Aller en bas
Linoa
Créatrice Graphique ♔ Du talent jusqu'au bout des doigts
Linoa
♕ Inscription : 24/03/2019
♕ Messages : 103
♕ Référencé : Non
Une commande imposante pour Lino'... - Page 2 Flrs Une commande imposante pour Lino'... - Page 2 Yo9q

Ven 31 Mai 2019 - 13:10
Ah, je n'ai pas dû le signaler, excuse-moi.
Pas de soucis, merci ! :)

EDIT > n'oublies pas le footer sur l'index aussi =o
Linoa
http://realm-enchanted.forumactif.com
Revenir en haut Aller en bas
Miettes
Esprit Libre ✪ Anciennement du Staff ★ L'herbe est plus verte ailleurs
Miettes
♕ Inscription : 27/03/2012
♕ Messages : 241
♕ Référencé : Oui
Une commande imposante pour Lino'... - Page 2 88x31-logo

Ven 31 Mai 2019 - 15:12
Et voilà :
http://test-miettes.exprimetoi.net/t1-votre-1er-sujet

La j'ai un petit avatar, mais en gros, la taille correspond au bloc violet.

J'ai aussi ajouté les partenaires sur toutes les pages du forum.

Si tout est bon pour toi, je te filerai les codes :)
Miettes
http://tambouille-raleuses.forumactif.com
Revenir en haut Aller en bas
Linoa
Créatrice Graphique ♔ Du talent jusqu'au bout des doigts
Linoa
♕ Inscription : 24/03/2019
♕ Messages : 103
♕ Référencé : Non
Une commande imposante pour Lino'... - Page 2 Flrs Une commande imposante pour Lino'... - Page 2 Yo9q

Ven 31 Mai 2019 - 15:26
Super ! :D
C'est tout bon ;)

J'attends d'avoir tous les codes pour te faire un retour de l'installation ^^

Linoa
http://realm-enchanted.forumactif.com
Revenir en haut Aller en bas
Miettes
Esprit Libre ✪ Anciennement du Staff ★ L'herbe est plus verte ailleurs
Miettes
♕ Inscription : 27/03/2012
♕ Messages : 241
♕ Référencé : Oui
Une commande imposante pour Lino'... - Page 2 88x31-logo

Sam 1 Juin 2019 - 0:44
Coucou :)

Ah bah super ; du coup, voici les derniers élements :

La CSS a remplacé :
Code:
body{
    background: #f1ae81;
    color: #25115e;
    font: normal 14px/1 Verdana, sans-serif;
}

#page-body{
   margin: auto;
   width: 1160px;
}

.julius{
  font-family: 'Julius Sans One', sans-serif;
}
.aclonica{
    font-family: 'Aclonica', sans-serif;
}
.dancing{
  font-family: 'Dancing Script', cursive;;
}

.d-none{
  display: none;
}

.d-flex{
  align-items: flex-start;
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-around;     
}

/*** ------- PA ------- ***/
#wrapper-pa{
    background: transparent url('https://i.servimg.com/u/f71/20/05/19/39/fond-p10.png') no-repeat center center;
    background-size: cover;
    border: 2px solid #25115e;
    box-sizing: border-box; 
    border-radius: 10px;
    font: normal 12px/1 Verdana, sans-serif;
    margin: auto;
    min-height: 502px;
    width: 1160px;
}

#wrapper-pa > .d-flex{
   justify-content: space-between;   
}

#wrapper-pa p,
#wrapper-pa ul{
  margin: 0;
  padding: 0;
}

/* Liens */
#wrapper-pa a{
    color: #25115e;
    text-decoration: none;
    transition: all ease-in-out .8s;
}

#wrapper-pa a:hover{
    color: #000;
    transition: all ease-in-out .8s;
}

#wrapper-pa .text-shadow{
  font-size: .8rem;
  text-shadow: 0 0 3px #fff;
}

#wrapper-pa .text-shadow::before{
  content:"~";
  padding-right: 2px;
}

/* Infobulle */
#wrapper-pa #pa-col-right #pa-staff .pa-mb-staff,
#wrapper-pa #pa-col-right #pa-clans .pa-clan,
#wrapper-pa #pa-col-right #pa-crea-mois div:not(.pa-ib){
  cursor: pointer;
  position: relative;
}

#wrapper-pa .pa-ib{
  background: #25115e;
  border:  4px solid #fff;
  border-radius: 5px;
  color: #f1ae81;
  font-size: 1.2rem;
  font-weight: bold;
  display: none;
  left: 0;
  padding: 10px;
  position: absolute;
  text-align: center;
  top: 20%;
  min-width: 100px;
  z-index: 999;
}

#wrapper-pa img:hover + .pa-ib,
#wrapper-pa .pa-ib:hover{
  display: block;
}

/*** --- HEADER --- ***/
#wrapper-pa #pa-plume a,
#wrapper-pa #pa-instagram a,
#wrapper-pa #pa-plume span,
#wrapper-pa #pa-instagram span{
  display: block;
}

#wrapper-pa #pa-plume a,
#wrapper-pa #pa-instagram a{
  font-size: 0.8rem;
  position: relative;
}

/*** Top Site ***/
#wrapper-pa #pa-plume{
  width: 15%;
}

#wrapper-pa #pa-plume span{
  bottom: -2%;
  left: 43%;
  position: absolute;
  width: 100%;
}


/*** Bienvenue ***/
#wrapper-pa #pa-bienvenue{
  width: 73%;
}

#wrapper-pa #pa-bienvenue img{
  max-width: 100%;
  position: relative;
  top: -5px;
}

/*** Instagram **/

#wrapper-pa #pa-instagram{
  width: 12%;
}

#wrapper-pa #pa-instagram span{
  position: absolute;
  top: 90%;
}

/*** --- COLONNES --- ***/
#wrapper-pa #pa-col-left,
#wrapper-pa #pa-col-center,
#wrapper-pa #pa-col-right{
   flex: 0 0 33.333%;
   max-width: 33.333%;
}

#wrapper-pa #pa-col-left{
  padding-top: 3%;
}

/*** Titre ***/
#wrapper-pa .pa-titre{
    font-size: 1.6rem;
    font-variant: small-caps;
    margin: 10px 0 5px;
    text-align: center;
}

/*** Colonne de gauche ***/

/* Liste de liens */
#wrapper-pa #pa-col-left #pa-link{
  font-variant: small-caps;
  list-style: none;
  text-align: center;
  }

#wrapper-pa #pa-col-left #pa-link li{
    font-size: 1.4rem;
}

/* Recrutement */
#wrapper-pa #pa-col-left #pa-recrutement{
    text-align: center;
}

#wrapper-pa #pa-col-left #pa-recrutement p{
  font-size: 1rem;
}

/* News */
#wrapper-pa #pa-col-left #pa-news p {
    font-size: 1rem;
    margin: 0 10px;
}

/*** Colonne du milieu ***/

/* Contexte */
#wrapper-pa #pa-col-center #pa-presentation{
  cursor: pointer;
  height: 242px;
  margin: auto;
  position: relative;
  overflow: hidden;
  width: 323px;
}

#wrapper-pa #pa-col-center #pa-presentation > img,
#wrapper-pa #pa-col-center #pa-presentation #pa-txt{
  width: 100%;
}

#wrapper-pa #pa-col-center #pa-presentation #pa-txt{
  left: 0;
  padding: 10px;
  position: absolute;
  top: 0;
  z-index: 90;
}

#wrapper-pa #pa-col-center #pa-presentation > img{
  position: relative;
  top: 0;
  z-index: 100;
}

#wrapper-pa #pa-col-center #pa-presentation:hover > img{
  animation-duration: 2s;
  animation-name: hideImage;
  top: 250px;
}

#wrapper-pa #pa-col-center #pa-presentation.out > img{
  animation-duration: 2s;
  animation-name: showImage;
  top: 250px;
}

@keyframes hideImage {
  from {
    top: 0;
  }

  to {
    top: 250px;
  }
}

@keyframes showImage {
  from {
    top: 250px;
  }

  to {
    top: 0;
  }
}

/* Partenaires */
#wrapper-pa #pa-col-center #pa-partenaires{
   margin: auto;
   width: 300px;
}

#wrapper-pa #pa-col-center #pa-partenaires .d-flex{
  justify-content: center;
}

#wrapper-pa #pa-col-center #pa-partenaires a{
  margin: 2px;
}

/* Crédits */
#wrapper-pa #pa-col-center #pa-credits p{
  font-size: 0.7rem;
  line-height: 1rem;
}

#wrapper-pa #pa-col-center #pa-credits a{
  color: #f1ae81;
  font-weight: bold;
  text-shadow: 1px 1px #25115e, -1px -1px #25115e, -1px 1px #25115e,1px -1px #25115e;
  transition: all ease-in-out .8s;
}

#wrapper-pa #pa-col-center #pa-credits a:hover{
  color: #25115e;
  text-shadow: 1px 1px #f1ae81, -1px -1px #f1ae81, -1px 1px #f1ae81,1px -1px #f1ae81;
  transition: all ease-in-out .8s;
}

/*** Colonne de droite ***/

/* Staff */
#wrapper-pa #pa-col-right #pa-staff .d-flex{
  justify-content: center;
}

#wrapper-pa #pa-col-right #pa-staff .pa-mb-staff{
   margin: 5px 10px;
}

#wrapper-pa #pa-col-right #pa-staff .pa-mb-staff .pseudo{
  font-size: 1.4rem;
}

#wrapper-pa #pa-col-right #pa-staff .pa-mb-staff .rang{
  font-size: 1rem;
}

/* Clans */
#wrapper-pa #pa-col-right #pa-clans > .d-flex{
   justify-content: center;
}

#wrapper-pa #pa-col-right #pa-clans .pa-clan{
  flex: 0 0 40%;
  max-width: 40%;
  text-align: center;
}

#wrapper-pa #pa-col-right #pa-clans .pa-clan > img{
  max-width: 100%;
}

/* Création du mois */

#wrapper-pa #pa-col-right #pa-crea-mois .d-flex{
  align-items: center;
}

#wrapper-pa #pa-col-right #pa-crea-mois a{
  color: #f1ae81;
  font-weight: bold;
  text-shadow: 1px 1px #25115e, -1px -1px #25115e, -1px 1px #25115e,1px -1px #25115e;
  transition: all ease-in-out .8s;
}

#wrapper-pa #pa-col-center #pa-crea-mois a:hover{
  color: #25115e;
  text-shadow: 1px 1px #f1ae81, -1px -1px #f1ae81, -1px 1px #f1ae81,1px -1px #f1ae81;
  transition: all ease-in-out .8s;
}

#wrapper-pa #pa-col-right #pa-crea-mois .pa-ib{
  top: inherit;
  bottom: 20%;
}

#wrapper-pa #pa-col-right #pa-crea-mois .pa-ib img{
  max-width: 200px;
}

/*** ------- QEEL ------- ***/
#wrapper-qeel{
    background: transparent url('https://i.servimg.com/u/f71/20/05/19/39/fond-p10.png') no-repeat center center;
    background-size: cover;
    border: 2px solid #25115e; 
    border-radius: 10px;
    padding: 5px;
    margin: 15px auto;   
    width: 80%;
}

#wrapper-qeel > img{
  display: block;
  margin: auto;
  position: relative;
  top: -11px;
  width: 800px;
}

#wrapper-qeel p{
  font-size: 1rem;
}

#wrapper-qeel #qeel-liste-mb-enligne,
#wrapper-qeel #qeel-liste-mb-recents,
#wrapper-qeel #qeel-stats,
#wrapper-qeel #qeel-anniversaires{
  border: 2px dashed #fff;
  border-radius: 5px;
  padding: 5px;
}

#wrapper-qeel #qeel-liste-mb-enligne,
#wrapper-qeel #qeel-liste-mb-recents{
  flex: 0 0 47%;
  max-width: 47%;
}

#wrapper-qeel #qeel-first-line{
  align-items: stretch;
  justify-content: space-between;
  margin-bottom: 20px;
}

/* Titres */
#wrapper-qeel .qeel-titre{
  font-size: 1.2rem;
  text-align: center;
}

/* Statistiques */
#wrapper-qeel #qeel-stats{
  margin: 0 auto 10px;
  text-align: center;
  width: 80%;
}

/* Groupes */
#wrapper-qeel #qeel-groupes{
  margin: 0 auto 10px;
  width: 80%;
}

/* Anniversaires */
#wrapper-qeel #qeel-anniversaires{
  margin: auto;
    text-align: center;
  width: 50%;
}

/*** ------- Catégories ------- ***/
#wrapper-categories{
  margin: auto;
  width: 800px;
}

#wrapper-categories .categorie{
  background: #25115e;
  border: 2px solid #fff;
  border-radius: 10px;
  margin: 10px 0;
  padding: 10px;
  position: relative;
}

#wrapper-categories .categorie .cate-header{
   position: absolute;
   text-align: center;
   top: 0;
   width: 100%;
}

#wrapper-categories .categorie .cate-header .tcat{
  display: none;
}

#wrapper-categories .categorie .wrapper-forum{
  border: 5px solid #fff;
  border-radius: 10px;
  margin: 50px auto 20px;
  padding: 155px 10px 20px;
  width: 80%;
}

#wrapper-categories .categorie .wrapper-forum .un-forum{
  align-items: stretch;
  border: 2px solid #fff;
  border-radius: 10px;
  flex-wrap: nowrap;
  font-size: 12px;
  height: 101px;
  margin: 10px auto;
  overflow: hidden;
  width: 98%;
}

/* Image */
#wrapper-categories .categorie .wrapper-forum .un-forum .img-etat{
  flex: 0 0 89px;
  height: 101px;
   margin: 0;
   max-width: 89px;
    flex-grow: 0;
    flex-shrink: 0;
}

#wrapper-categories .categorie .wrapper-forum .un-forum .img-etat img{
  width: 100%;
}

/* Description */
#wrapper-categories .categorie .wrapper-forum .un-forum .forum-description{
  color: #f1ae81;
  flex-grow: 1;
   flex-shrink: 1;
  padding: 6px;
  word-break: break-word;
}

#wrapper-categories .categorie .wrapper-forum .un-forum .forum-description .titre-forum a.forumlink{
  color: #25115e;
  font-size: 16px;
  text-shadow: 1px 1px 3px #fff;
}

#wrapper-categories .categorie .wrapper-forum .un-forum .forum-description .titre-forum + div{
  height: 100%;
  overflow: auto;
}

/* sous-forum */
#wrapper-categories .categorie .wrapper-forum .un-forum .sous-forum{
  background: #f1ae81;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  font-size: 0;
  flex: 0 0 20%;
  flex-grow: 0;
    flex-shrink: 0;
  text-align: center;
}

#wrapper-categories .categorie .wrapper-forum .un-forum .sous-forum a{
  border-bottom: 1px solid #fff;
  color: #25115e;
  display: block;
  font-size: 12px;
  padding: 3px 0;
}

#wrapper-categories .categorie .wrapper-forum .un-forum .sous-forum a:hover{
  background: #25115e;
  color: #f1ae81;
}

/* Dernier message */
#wrapper-categories .categorie .wrapper-forum .un-forum .stats-last-msg{
  flex: 0 0 30%;
  flex-grow: 0;
    flex-shrink: 0;
  max-width: 30%;
  text-align: center;
}

#wrapper-categories .categorie .wrapper-forum .un-forum .stats-last-msg .stats-forum{
   color: #f1ae81;
   border: 1px dashed #fff;
    margin: 4px auto;
   padding: 2px;
   width: 90%;
}

#wrapper-categories .categorie .wrapper-forum .un-forum .stats-last-msg .gensmall,
#wrapper-categories .categorie .wrapper-forum .un-forum .stats-last-msg .gensmall a{
   color: #f1ae81;
}

#wrapper-categories .categorie .wrapper-forum .un-forum .stats-last-msg .gensmall a{
   text-decoration: none;
}

/* Dans un forum */
.nav a.nav img{
   display: none;
}

#dans-forum #wrapper-categories .cate-header{
   top: 8px;
}

#dans-forum #wrapper-categories .cate-header h2{
   color: #25115e;
  font-size: 34px;
  text-shadow: 1px 1px 3px #fff;
}

#dans-forum #wrapper-categories .categorie{
   background: transparent;
   border: 0;
}

#dans-forum #wrapper-categories .wrapper-forum{
   background: #25115e;
   border: 2px solid #fff;
   padding-top: 20px;
}

/*** Liste des sujets ***/
#liste-sjt .header {
   font-weight: bold;
}

#liste-sjt .un-sjt{
   align-items: center;
   background: #25115e;
   border: 2px solid #fff;
   border-radius: 15px;
   color: #f1ae81;
   margin: 10px 0;
   overflow: hidden;
}

#liste-sjt .un-sjt a,
#liste-sjt .un-sjt .gensmall,
#liste-sjt .un-sjt .dernier-msg .postdetails{
   color: #f1ae81 !important;
}

#liste-sjt .un-sjt a:hover{
   color: #000 !important;
}

/* Image + description */
#liste-sjt .header .sjt{
   text-align: center;
}

#liste-sjt .header .sjt,
#liste-sjt .un-sjt .sjt{
   flex: 0 0 50%;
   max-width: 50%;
}

#liste-sjt .un-sjt .sjt > img,
#liste-sjt .un-sjt .sjt > div{
   display: inline-block;
   vertical-align: top;
}

#liste-sjt .un-sjt .sjt > img{
   max-height: 50px;
}

#liste-sjt .un-sjt .sjt > div{
   padding:4px 15px;
}

#liste-sjt .un-sjt .sjt > div .topic-title{
   margin-left: 4px;
}

/* Réponses & Vues*/
#liste-sjt .header .reponses,
#liste-sjt .header .vues,
#liste-sjt .un-sjt .reponses,
#liste-sjt .un-sjt .vues{
   flex: 0 0 5%;
   max-width: 5%;
   text-align: center;
}

/* Auteur */
#liste-sjt .header .auteur,
#liste-sjt .un-sjt .auteur{
   flex: 0 0 10%;
   max-width: 10%;
   text-align: center;
}

/* Derniers Messages */
#liste-sjt .header .dernier-msg,
#liste-sjt .un-sjt .dernier-msg{
   flex: 0 0 30%;
   max-width: 30%;
   text-align: center;
}

/*** ------- Liste des messages ------- ***/

.titre-sjt,
.un-msg .msg .postbody{
  background: #25115e;
  color: #f1ae81;
}

.titre-sjt,
.un-msg .msg .postbody,
.un-msg .infos-posteur{
  border: 2px solid #fff;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 10px;
}

/*** Titre + nav ***/
.titre-sjt{
  margin: 10px auto;
  text-align: center;
  width: 800px;
}

.titre-sjt .cattitle,
.titre-sjt .nav,
.titre-sjt .pagination{
  color: #f1ae81;
}

.titre-sjt .cattitle {
    font-size: 25px;
    line-height: 35px;
}

.titre-sjt .pagination{
    display: block;
    text-align: right;
}

.titre-sjt .pagination a{
  color: #fff;
}

/*** Un message ***/
.un-msg{
  margin: 10px auto 10px;
  width: 800px;
}

.un-msg .text-shadow{
  font-size: .8rem;
  text-shadow: 0 0 3px #fff;
}

/* Posteur */
.un-msg .infos-posteur{
  background: transparent url(https://i.servimg.com/u/f71/20/05/19/39/fond-p10.png) no-repeat center center;
  background-size: auto 100%;
  color: #25115e;
  font-weight: bold;
  margin-right: 10px;
  text-align: center;
  width: 250px;
}

.un-msg .infos-posteur .name{
  font-size: 16px;
}

.un-msg .infos-posteur .rang{
  color: #25115e;
}

.un-msg .infos-posteur .avatar-posteur{
  aligns-item: center;
  background: #25115e;
  border: 1px dotted #25115e;
  display: flex;
  height: 320px;
  justify-content: center;
  margin: 10px auto 0;
  width: 200px;
}

.un-msg .infos-posteur .avatar-posteur img{
    height: auto;
    max-height: 320px !important;
    max-width: 200px !important;
    width: auto;
}

/* Message */
.un-msg .msg{
  width: 540px;
}

.un-msg .msg > table:first-child{
  margin-bottom: 10px;
}

.un-msg .msg > table:first-child .postdetails{
  color: #25115e;
  display: inline-block;
  padding-left: 10px;
}

.un-msg .msg > table .post-options{
  text-align: right;
}

.un-msg .msg .postbody{
  min-height: 300px;
}

.un-msg .msg .postbody + .gensmall{
  display: inline-block;
  font-style: italic;
  margin: 4px 0;
}

.un-msg .msg .btn-contact{
  text-align: right;
    width: 100%;
}

/*** ------- Bloc footer partenaires ------- ***/
#wrapper-partenaires{
    background: #25115e;
    border: 2px solid #fff;
    box-sizing: border-box;
    border-radius: 10px;
    margin: 50px auto 20px;
    padding: 10px;
    position: relative;
    width: 1160px;
}

#wrapper-partenaires .titre{
    position: absolute;
    text-align: center;
    top: -15px;
    width: 100%;
}

#wrapper-partenaires .d-flex{
    flex-wrap: wrap;
    justify-content: center;
}

#wrapper-partenaires .d-flex > a{
    margin: 2px;
}

Le template overall_footer_begin :
Code:
<!-- BEGIN html_validation -->
<div>
   <div>
      <table>
         <tbody>
            <tr>
               <td>
<!-- END html_validation -->
               </td>
               <td valign="top" width="{C3SIZE}">
               <div id="{ID_RIGHT}">
                  <!-- BEGIN giefmod_index2 -->
                  {giefmod_index2.MODVAR}
                  <!-- BEGIN saut -->
                  <div style="height: {SPACE_ROW}px"></div>
                  <!-- END saut -->
                  <!-- END giefmod_index2 -->
               </div>
               </td>
            </tr>
         </tbody>
      </table>
   </div>
</div>
<!-- close div id="page-body" -->
<div id="wrapper-partenaires"></div>
<div id="page-footer">
   <div align="center">
      <div class="gen">
<!-- BEGIN html_validation -->
      </div>
   </div>
</div>
<!-- END html_validation -->

 Le template viewtopic_body :
Code:
<div class="titre-sjt">
   <h1 class="cattitle aclonica"> {TOPIC_TITLE}</h1>
   <div class="nav">
      <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
        <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
        {NAV_CAT_DESC_SECOND}
   </div>
   <!-- BEGIN topicpagination -->
   <span class="gensmall pagination">{PAGINATION}</span>
   <!-- END topicpagination -->
</div>

{POLL_DISPLAY}

<!-- BEGIN postrow -->
<!-- BEGIN hidden -->
{postrow.hidden.MESSAGE}
<!-- END hidden -->
<!-- BEGIN displayed -->
<div class="un-msg d-flex" class="post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
   <div class="infos-posteur">
      <span class="name aclonica">
         <a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong>
      </span>
         <br />
      <span class="postdetails poster-profile">
         <span class="rang text-shadow">{postrow.displayed.POSTER_RANK}</span><br />
         <span class="avatar-posteur">{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}</span>
         <!-- BEGIN profile_field -->
         {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
         <!-- END profile_field -->
         {postrow.displayed.POSTER_RPG}
      </span><br />
      <img src="https://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
   </div>
   <div class="msg">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
         <tr>
            <td><span class="postdetails">¤ {postrow.displayed.POST_DATE}</td>
            <td valign="top" nowrap="nowrap" class="post-options">
               {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
            </td>
         </tr>
         <tr>
            <td colspan="2">
               <!-- BEGIN switch_vote_active -->
               <div class="vote gensmall">
                  <!-- BEGIN switch_vote -->
                  <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                  <!-- END switch_vote -->

                  <!-- BEGIN switch_bar -->
                  <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                     <!-- BEGIN switch_vote_plus -->
                     <div class="vote-bar-plus" style="height:{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="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                     <!-- END switch_vote_minus -->
                  </div>
                  <!-- END switch_bar -->

                  <!-- BEGIN switch_no_bar -->
                  <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                  <!-- END switch_no_bar -->

                  <!-- BEGIN switch_vote -->
                  <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                  <!-- END switch_vote -->
               </div>
               <!-- END switch_vote_active -->
            </td>
         </tr>
      </table>
      <div class="postbody">
         <div>{postrow.displayed.MESSAGE}</div>

         <!-- BEGIN switch_attachments -->
         <dl class="attachbox">
            <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
            <dd>
               <!-- BEGIN switch_post_attachments -->
               <dl class="file">
                  <dt>
                     <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

                     <!-- BEGIN switch_dl_att -->
                     <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}
                     <!-- END switch_dl_att -->

                     <!-- BEGIN switch_no_dl_att -->
                     {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}
                     <!-- END switch_no_dl_att -->
                  </dt>

                  <!-- BEGIN switch_no_comment -->
                  <dd>
                     <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                  </dd>
                  <!-- END switch_no_comment -->

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

                  <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
               </dl>
               <!-- END switch_post_attachments -->
            </dd>
         </dl>
         <!-- END switch_attachments -->

         <div class="clear"></div>
         <!-- BEGIN switch_signature -->
         <div class="signature_div">
            {postrow.displayed.SIGNATURE}
         </div>
         <!-- END switch_signature -->

      </div>
      <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
      <table class="btn-contact" border="0" cellspacing="0" cellpadding="0">
         <tr>
            <td valign="middle">
               {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
            </td>
         </tr>
      </table>
   </div>
</div>
<!-- BEGIN first_post_br -->
<hr />
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
      <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
   </tr>
   <!-- END first_post_br -->
   <!-- END displayed -->
   <!-- END postrow -->
   <!-- BEGIN no_post -->
   <tr align="center">
      <td class="row1" colspan="2" height="28">
         <span class="genmed">{no_post.L_NO_POST}</span>
      </td>
   </tr>
   <!-- END no_post -->
   <tr align="right">
      <td class="catBottom" colspan="2" height="28">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td width="9%" class="noprint"> </td>
               <td align="center" class="t-title"><a name="bottomtitle"></a><div class="cattitle">{TOPIC_TITLE}</div></td>
               <td align="right" nowrap="nowrap" width="9%" class="browse-arrows">
                        <!-- BEGIN switch_isconnect -->
                        <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> 
                        <!-- END switch_isconnect -->
                        <a href="#top">{L_BACK_TO_TOP}</a> 
                    </td>
            </tr>
         </table>
      </td>
   </tr>
</table>
<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
   <tr>
      <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
      <!-- BEGIN topicpagination -->
      <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
      <!-- END topicpagination -->
   </tr>
   <!-- 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 promot_trafic -->
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
   <tr>
      <td class="catBottom" height="28">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="top"><div class="cattitle"> {PROMOT_TRAFIC_TITLE}</div></td>
               <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
            </tr>
         </table>
      </td>
   </tr>
</table>

<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">
   <tr>
      <td class="catBottom" height="28">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="top"><div class="cattitle"> {PROMOT_TRAFIC_TITLE}</div></td>
               <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
            </tr>
         </table>
      </td>
   </tr>
   <tr>
      <td class="row2 postbody" valign="top">
         <!-- BEGIN link -->
         » <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
         <!-- END link -->
      </td>
   </tr>
</table>
<!-- END promot_trafic -->

<!-- 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>

<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
         <span class="nav">
            <!-- BEGIN switch_user_authpost -->
            <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
            <!-- END switch_user_authpost -->
            <!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
            <!-- END switch_user_authreply -->
         </span>
      </td>

      <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>

      <!-- BEGIN moderation_panel -->
      <td align="center">
         <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
      </td>
      <td align="center" width="250">
         <span class="gensmall"> </span>
      </td>
      <!-- END moderation_panel -->
   </tr>
</table>
</form>

<!-- 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 -->
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>

La page html pour le footer à mettre dans [i]Panneau d'administration > modules > HTML & Javascript > Gestion des pages HTML[/B], création en mode avancé, cocher "non" et "non" :
Code:
<div class="titre"><img src="https://i.servimg.com/u/f41/11/39/65/70/en_lig10.png" alt="Nos partenaires" /></div>
<div class="d-flex">
    <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
    <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
    <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
    <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
    <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
    <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
    <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
    <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
    <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
    <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
    <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
    <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
    <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
    <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
    <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
    <a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>
</div>
Une commande imposante pour Lino'... - Page 2 5570927 Ici, il faut que tu remplaces l'image dans le titre ; je ne l'avais pas, voilà pourquoi j'en ai mis une "au hasard"


Le JS a remplacé :
Code:
;$(function(){
   
   // Charge en-tête
   $('#wrapper-pa').load('/h22-commande-linoa-pa');
   
    // Charge bloc footer partenaires
    $('#wrapper-partenaires').load('/h21-commande-linoa-partenaires');

   /*** Afficher / Cacher "s" pour les stats ***/
   $( ".stats .nb" ).each(function( index ) {
   var infos_stat = $(this).text();

   if( infos_stat * 1 <= 1){
     $(this).parents('.stats').find('.pluriel').addClass('d-none');
   }
   });

   $('body')
       .on('mouseleave', '#wrapper-pa #pa-col-center #pa-presentation', function(){
           var elt = $(this);
           elt.addClass('out');
           setInterval( function(){
               elt.removeClass('out');
           }, 2000);
       });

});
Une commande imposante pour Lino'... - Page 2 5570927 N'oublie pas de remplacer les url :
• pour la PA :
Code:
/h22-commande-linoa-pa
• pour le footer :
Code:
/h21-commande-linoa-partenaires


Je pense que c'est bon ^^

Je ne serai probablement pas présente dans la journée, mais logiquement, je serai en ligne ce soir :)
Miettes
http://tambouille-raleuses.forumactif.com
Revenir en haut Aller en bas
Linoa
Créatrice Graphique ♔ Du talent jusqu'au bout des doigts
Linoa
♕ Inscription : 24/03/2019
♕ Messages : 103
♕ Référencé : Non
Une commande imposante pour Lino'... - Page 2 Flrs Une commande imposante pour Lino'... - Page 2 Yo9q

Sam 1 Juin 2019 - 5:21
Coucou,

Merci pour les derniers codes ! :D
J'ai c/c tous les codes comme tu me l'as dit, et il n'y a pas d'erreurs, j'en suis sûre. Mais, j'ai un souci au niveau des catégories et au niveau du QEEL :/
Certaines catégories n'apparaissent pas bien alors que d'autres, si :/
Et pour le QEEL, je pense que le souci vient du template mais je n'y connais rien =x
Je te fais des screens :

Spoiler:

Spoiler:


EDIT : et ici, j'ai deux fois "présentations des membres" :/ et comme pour les catégories, tout est décalé.

Spoiler:
Linoa
http://realm-enchanted.forumactif.com
Revenir en haut Aller en bas
Miettes
Esprit Libre ✪ Anciennement du Staff ★ L'herbe est plus verte ailleurs
Miettes
♕ Inscription : 27/03/2012
♕ Messages : 241
♕ Référencé : Oui
Une commande imposante pour Lino'... - Page 2 88x31-logo

Sam 1 Juin 2019 - 7:24
Oh j'ai oublié de te donner une info...

Pour le QEEL, voici le template "index_body" à modifier (il manquait un appel de javascript)
Code:
{JAVASCRIPT}

<div id="wrapper-pa"></div>

<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <!-- BEGIN message_admin_titre -->
  <tr>
    <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
  </tr>
  <!-- END message_admin_titre -->
  <!-- BEGIN message_admin_txt -->
  <tr>
    <td class="row1" rowspan="3" align="center" valign="middle">
    <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
    </td>
  </tr>
  <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="{switch_user_login_form_header.V_ALIGN}" class="row1">

                <table>
                    <tr>
                        <td><span class="genmed">{L_USERNAME}:</span> </td>
                        <td><input class="post" type="text" size="10" name="username"/> </td>
                        <td>
                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                            <span class="gensmall">{L_AUTO_LOGIN}</span> 
                        </td>
                    </tr>

                    <tr>
                        <td><span class="genmed">{L_PASSWORD}:</span> </td>
                        <td><input class="post" type="password" size="10" name="password"/> </td>
                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                    </tr>
                </table>
            </td>

            <!-- BEGIN switch_social_login -->
            <td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_header.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
            </td>
            <!-- END switch_social_login -->

        </tr>
    </table>
</form>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50%" valign="top">
      <!-- BEGIN switch_user_logged_in -->
      <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
      <!-- END switch_user_logged_in -->
      <!-- BEGIN switch_delete_cookies -->
      <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
      <!-- END switch_delete_cookies -->
    </td>
    <td width="50%" align="right">
      <span class="gensmall">
        <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
        <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
        <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
        <!-- BEGIN switch_on_index -->
          <!-- BEGIN switch_delete_cookies -->
          <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
          <!-- END switch_delete_cookies -->
        <!-- END switch_on_index -->
      </span>
    </td>
  </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="right" class="row1">

                <table>
                    <tr>
                        <td><span class="genmed">{L_USERNAME}:</span> </td>
                        <td><input class="post" type="text" size="10" name="username"/> </td>
                        <td>
                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                            <span class="gensmall">{L_AUTO_LOGIN}</span> 
                        </td>
                    </tr>

                    <tr>
                        <td><span class="genmed">{L_PASSWORD}:</span> </td>
                        <td><input class="post" type="password" size="10" name="password"/> </td>
                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                    </tr>
                </table>
            </td>

            <!-- BEGIN switch_social_login -->
            <td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_footer.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
            </td>
            <!-- END switch_social_login -->

        </tr>
    </table>
</form>
<!-- END switch_user_login_form_footer -->

<script type="text/javascript" src="http://pvereecken.fr/zenpub/zp2017/js/fa_extraction_qeel.js"></script>
<!-- BEGIN disable_viewonline -->
<div id="mon-qeel" style="display:none">
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
    <td class="catHead" colspan="2" height="28">
    <!-- BEGIN switch_viewonline_link -->
    <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
    <!-- END switch_viewonline_link -->

    <!-- BEGIN switch_viewonline_nolink -->
    <span class="cattitle">{L_WHO_IS_ONLINE}</span>
    <!-- END switch_viewonline_nolink -->
    </td>
  </tr>
  <tr>
    <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
    <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
    {TOTAL_USERS}<br />
    {NEWEST_USER}</span></td>
  </tr>
  <tr>
    <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
    {RECORD_USERS}<br />
    <br />
    {LOGGED_IN_USER_LIST}</span></td>
  </tr>
  {L_CONNECTED_MEMBERS}
  {L_WHOSBIRTHDAY_TODAY}
  {L_WHOSBIRTHDAY_WEEK}
  <tr>
    <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
  </tr>
  <!-- BEGIN switch_chatbox_activate -->
  <tr>
    <td class="row1">
      <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
        <!-- BEGIN switch_chatbox_popup -->
        <div id="chatbox_popup"></div>
        <script type="text/javascript">
        //<![CDATA[
        insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
        //]]>
        </script>
        <!-- END switch_chatbox_popup -->
      </span>
    </td>
  </tr>
  <!-- END switch_chatbox_activate -->
</table>
</div>
<!-- END disable_viewonline -->


<!-- QEEL -->
<div id="wrapper-qeel" class="feq">
    <img src="https://i.servimg.com/u/f71/20/05/19/39/qeel10.png" alt="Qui se trouve parmi nous ?">
    <div class="d-flex" id="qeel-first-line">
        <div id="qeel-liste-mb-enligne">
            <div class="qeel-titre aclonica stats">Les membres en ligne</div>
            <p class="stats"><span class="nb d-none">@connectes_forum@</span>Membre<span class="pluriel">s</span> présent<span class="pluriel">s</span> : @membres_connectes$, @</p>
        </div>
        <div id="qeel-liste-mb-recents">
            <div class="qeel-titre aclonica">Les membres récents</div>
            <p>Membres connectés au cours des 24 dernières heures : @derniers_membres_connectes$, @</p>
        </div>
    </div>
   
    <div id="qeel-stats">
        <div class="qeel-titre aclonica">Les statistiques de Your Art</div>
        <p>
            Les membres de Your Art ont posté un total de <span class="stats"><span class="nb">@messages@</span> message<span class="pluriel">s</span></span>.
            <br />
            Actuellement, il y a <span class="stats"><span class="nb">@connectes_forum@</span> membre<span class="pluriel">s</span> enregistré<span class="pluriel">s</span></span>.
            <br />
            Le membre le plus récent est @dernier_membre@ ! Bienvenue sur Your Art !
            <br />
            Il y a, en tout, <span class="stats"><span class="nb">@enregistres@</span> membre<span class="pluriel">s</span></span> en ligne, <span class="stats"><span class="nb">@invisibles@</span> invisible<span class="pluriel">s</span></span> et <span class="stats"><span class="nb">@invites@</span> invité<span class="pluriel">s</span></span>.
        </p>
    </div>

    <div id="qeel-groupes">
        <div class="d-flex">
            <a href="#">
                <img src="https://i.servimg.com/u/f71/20/05/19/39/clan-f10.png" alt="Fondatrice">
            </a>
            <a href="#">
                <img src="https://i.servimg.com/u/f71/20/05/19/39/clan-s10.png" alt="Staff">
            </a>
            <a href="#">
                <img src="https://i.servimg.com/u/f71/20/05/19/39/clan-p10.png" alt="Phoenix Tears">
            </a>
            <a href="#">
                <img src="https://i.servimg.com/u/f71/20/05/19/39/clan-d10.png" alt="Dragons Flames">
            </a>
        </div>     
    </div>

    <div id="qeel-anniversaires">
        <div class="qeel-titre aclonica">Anniversaires des membres</div>
        <p>@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=<span>Il/Elle fête son anniversaire aujourd'hui :</span> @membres_anniversaire_aujourdhui$&@$<span>Ils fêtent leur anniversaire aujourd'hui :</span> @membres_anniversaire_aujourdhui$, @@$<span>Aucun membre ne fête son anniversaire aujourd'hui.</span> @@</p>
    </div>
   
</div>
<!-- Fin QEEL -->

{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
  <tr>
    <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
    <td><span class="gensmall">{L_NEW_POSTS}</span></td>
    <td></td>
    <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
    <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
    <td> &nbsp;</td>
    <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
    <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
  </tr>
</table>
<!-- END switch_legend -->

{AUTO_DST}

Pour les autres soucis, il faudrait que je vois "en vrai" le rendu :/ Tu pourrais m'envoyer le lien par MP stp ? :)
Miettes
http://tambouille-raleuses.forumactif.com
Revenir en haut Aller en bas
Linoa
Créatrice Graphique ♔ Du talent jusqu'au bout des doigts
Linoa
♕ Inscription : 24/03/2019
♕ Messages : 103
♕ Référencé : Non
Une commande imposante pour Lino'... - Page 2 Flrs Une commande imposante pour Lino'... - Page 2 Yo9q

Sam 1 Juin 2019 - 9:11
Ah, je te remercie ! Le souci du QEEL est arrangé ! :)
Je te MP le lien du forum.
Linoa
http://realm-enchanted.forumactif.com
Revenir en haut Aller en bas
Miettes
Esprit Libre ✪ Anciennement du Staff ★ L'herbe est plus verte ailleurs
Miettes
♕ Inscription : 27/03/2012
♕ Messages : 241
♕ Référencé : Oui
Une commande imposante pour Lino'... - Page 2 88x31-logo

Sam 1 Juin 2019 - 15:40
Coucou :)

Alors, pour les descriptions, c'est à cause du style en ligne qu'il y a dans tes descriptions. Par exemple :
Code:
<div style="width: 400px;height: 50px;overflow: auto;padding: 15px;" class="description">
             Vous retrouverez ici tous les renseignements utiles que contient le forum - notamment son règlement qui est à lire en priorité lorsque vous arrivez parmi nous ; les informations concernant le staff en place, les absences des membres ainsi que le recrutement.
</div>
Si tu enlèves le width de 400px, ça règle l'affichage.

Pour éviter d'avoir à repasser partout, tu peux ajouter ça dans la CSS :
Code:
forum-description .description {
    width: 100% !important;
}

Pour le soucis dans les sous-forum, regarde si le template "viewforum_body" ne commence pas par
Code:
{BOARD_INDEX}
Si c'est le cas, supprime la ligne ci-dessus.

Logiquement, ça devrait régler tes problèmes:)
Miettes
http://tambouille-raleuses.forumactif.com
Revenir en haut Aller en bas
Linoa
Créatrice Graphique ♔ Du talent jusqu'au bout des doigts
Linoa
♕ Inscription : 24/03/2019
♕ Messages : 103
♕ Référencé : Non
Une commande imposante pour Lino'... - Page 2 Flrs Une commande imposante pour Lino'... - Page 2 Yo9q

Sam 1 Juin 2019 - 17:07
Effectivement, c'était bien ça !
Je te remercie ! :D
Linoa
http://realm-enchanted.forumactif.com
Revenir en haut Aller en bas
Miettes
Esprit Libre ✪ Anciennement du Staff ★ L'herbe est plus verte ailleurs
Miettes
♕ Inscription : 27/03/2012
♕ Messages : 241
♕ Référencé : Oui
Une commande imposante pour Lino'... - Page 2 88x31-logo

Dim 2 Juin 2019 - 5:52
Tout est bon du coup ? :)
Miettes
http://tambouille-raleuses.forumactif.com
Revenir en haut Aller en bas
Linoa
Créatrice Graphique ♔ Du talent jusqu'au bout des doigts
Linoa
♕ Inscription : 24/03/2019
♕ Messages : 103
♕ Référencé : Non
Une commande imposante pour Lino'... - Page 2 Flrs Une commande imposante pour Lino'... - Page 2 Yo9q

Dim 2 Juin 2019 - 7:12
Juste une dernière question et après c'est tout bon ! :)
Saurais-tu pourquoi cette case est resté blanche sur le profil alors que toutes les autres sont devenues violettes ? :/

Une commande imposante pour Lino'... - Page 2 0pta
Linoa
http://realm-enchanted.forumactif.com
Revenir en haut Aller en bas
Miettes
Esprit Libre ✪ Anciennement du Staff ★ L'herbe est plus verte ailleurs
Miettes
♕ Inscription : 27/03/2012
♕ Messages : 241
♕ Référencé : Oui
Une commande imposante pour Lino'... - Page 2 88x31-logo

Dim 2 Juin 2019 - 7:18
c'est la case sur laquelle tu es ? Ou même quand elle n'est pas sélectionnée ça le fait ?
Miettes
http://tambouille-raleuses.forumactif.com
Revenir en haut Aller en bas
Linoa
Créatrice Graphique ♔ Du talent jusqu'au bout des doigts
Linoa
♕ Inscription : 24/03/2019
♕ Messages : 103
♕ Référencé : Non
Une commande imposante pour Lino'... - Page 2 Flrs Une commande imposante pour Lino'... - Page 2 Yo9q

Dim 2 Juin 2019 - 7:57
Ca le fait même quand elle n'est pas sélectionnée :/
Linoa
http://realm-enchanted.forumactif.com
Revenir en haut Aller en bas
Miettes
Esprit Libre ✪ Anciennement du Staff ★ L'herbe est plus verte ailleurs
Miettes
♕ Inscription : 27/03/2012
♕ Messages : 241
♕ Référencé : Oui
Une commande imposante pour Lino'... - Page 2 88x31-logo

Dim 2 Juin 2019 - 11:21
Coucou :)

Je me suis crée un compte pour voir, on le supprimera après ^^

Il faudra que tu changes la couleurs du texte dans les champs de saisi. Quand on se connecte on ne voit pas ce qu'on écrit.

Pour le fond blanc, c'est le navigateur qui le met comme ça par défaut :/ Ce que tu peux essayer de faire, c'est d'ajouter ça dans la CSS :
Code:
.inputbox{
    background-color: #26115e;
}


EDIT : Dans ta CSS, tu as ciblé les input.post, mais là c'est un input.inputbox :)
Miettes
http://tambouille-raleuses.forumactif.com
Revenir en haut Aller en bas
Linoa
Créatrice Graphique ♔ Du talent jusqu'au bout des doigts
Linoa
♕ Inscription : 24/03/2019
♕ Messages : 103
♕ Référencé : Non
Une commande imposante pour Lino'... - Page 2 Flrs Une commande imposante pour Lino'... - Page 2 Yo9q

Dim 2 Juin 2019 - 12:07
Ah super ! Tout est arrangé ! Y compris le souci pour la connexion ^^
Du coup, c'est tout bon, je te remercie encore pour tout ton travail !
Linoa
http://realm-enchanted.forumactif.com
Revenir en haut Aller en bas
Miettes
Esprit Libre ✪ Anciennement du Staff ★ L'herbe est plus verte ailleurs
Miettes
♕ Inscription : 27/03/2012
♕ Messages : 241
♕ Référencé : Oui
Une commande imposante pour Lino'... - Page 2 88x31-logo

Dim 2 Juin 2019 - 12:44
Ah bah super =) Du coup, on peut considérer que cette commande est terminée ?
Miettes
http://tambouille-raleuses.forumactif.com
Revenir en haut Aller en bas
Linoa
Créatrice Graphique ♔ Du talent jusqu'au bout des doigts
Linoa
♕ Inscription : 24/03/2019
♕ Messages : 103
♕ Référencé : Non
Une commande imposante pour Lino'... - Page 2 Flrs Une commande imposante pour Lino'... - Page 2 Yo9q

Dim 2 Juin 2019 - 16:01
Tout à fait ! :)
Encore merci !

PS : n'hésites pas à me dire si tu souhaites garder ton compte ou non sur mon forum ^^
Linoa
http://realm-enchanted.forumactif.com
Revenir en haut Aller en bas
Contenu sponsorisé
Contenu sponsorisé
Revenir en haut Aller en bas
Voir le sujet précédent Voir le sujet suivant Revenir en haut Page 2 sur 3Aller à la page : Précédent  1, 2, 3  Suivant
Sauter vers: