Jeu 18 Mai - 15:06

Bonjour Halloween ^^ Voilà je viens vers toi parce que je voudrais adapter un de tes LS à mon forum. D'habitude je le fait moi mais là c'est un petit peu plus compliquer car je voudrais ajouter des image en haut et en bas ainsi qu' adapter la largeur par rapport a mes catégories. J'ai trouver que ton LS était le mieux adapter en faite au style du forum.  Donc voilà :

Forum : www
Version : PHPBB2
Taille du forum : 800pixel (mais les catégorie font 850)
Elément(s) demandé(s) : QEEL
Maquette : http://www.neverminddreams.com/t346-phpbb2-qeel-reposant-opaque-et-clair
Description des groupes + changement de phrases éventuels :
Nos Bibliothécaires ont vécu un total de x aventures.
Nous avons X Bibliothécaires qui sauvent le monde.
Notre dernier Bibliothécaire  à nous avoir rejoint est X
Il y a en tout X Bibliothécaire(s) X Serpents et X Indécis

Groupes:
#AD4F09 Le Maître du Jeu : "The Library" signifie tout simplement "La bibliothèque" en anglais. Sachant qu'elle est douée de conscience et envoie des invitations à tout va, il est normal qu'elle devienne le "Maître du jeu". Ce compte sera manipulé par le staff, le plus souvent par sa fondatrice.

#4F0000 La Bibliothèque : Ce sont tous ceux qui travaillent pour elle dans le but de préserver la magie sous toutes ses formes. Il y a d'abord les bibliothécaires qui sont au nombre de quatre. Ce sont des gens comme vous et moi, à ceci près que la Bibliothèque les a choisis car ils ont ce petit quelque chose en plus qui font d'eux des êtres plus exceptionnels que la moyenne, et donc plus susceptibles de protéger ce lieu magique.

#00B0F0 Les Protecteurs : Les Protecteurs sont des "bibliothécaires" qui s'ignorent; d'ailleurs ils ne connaissent absolument pas la bibliothèque et son contenu et encore moins les bibliothécaires. Pourtant ils sont répartis le plus souvent en petits groupes de 5 ou 6 individus et peuvent chercher des artefacts et protéger la magie comme des bibliothécaires!

#004200 La Confrérie du Serpent: Sans rentrer dans les détails, la Confrérie du Serpent est en fait l’ennemi déclaré de la Bibliothèque. C'est une organisation qui cherche à tout prix à avoir la mainmise sur ce que la Bibliothèque renferme de plus précieux.

#FF0000 Les Dieux : Comme vous le savez ce sont des êtres exceptionnels. Ils sont immortels, ont des pouvoirs magiques puissants, mais peuvent se confondre dans le monde réel comme n'importe quel être humain. Pour les douze élus qui ont élu domicile dans des corps, la vie risque de se compliquer.

#004085 Les Immortels: À l'image de certains personnages de la série, les Immortels sont des personnes avec ou sans pouvoirs. Jenkins ou bien Judson,veillent non seulement à la bonne marche de l'équipe des bibliothécaires, mais aussi leur partagent leur sagesse. Mais il n'y a pas qu'eux!


#7CAD3B Les êtres Surnaturels: Qu'ils soient fées ou dragons, la Bibliothèque fait partie de ces lieux que les êtres surnaturels côtoient, mais aussi se réfugient quand quelque chose ne va pas.

#666666 Autres Ennemis: Bien que la Confrérie du Serpent ait une place prépondérante dans le forum, la Bibliothèque suscitant toutes les convoitises a également d'autres ennemis.

#944CFF Alliés : Qu'ils soient des hauts placés dans notre société ou l'un des membres d'une famille d'une personne en lien avec la Bibliothèque, ils en sont devenus les alliés.

#FFD500 PNJ: Les PNJ sont des personnages manipulés par le staff. Ils sont là généralement quand le Maître du jeu ne peut pas suffire.

#000000 Non Initiés: Ne vous inquiétez pas. Si vous êtes dans ce groupe, c'est que vous venez de vous inscrire et que votre présentation n'a pas encore été validée. Donc, pas de panique !

Couleurs (si pas de maquette graphique) : Titres > #d3b876
Couleur du font de page du forum > #915A38
Couleur intérieur du forum > #583520
Les deux couleur sur les catégories si besoin > vert des sujet > #384226
Rouge des message > #943a26
A toi d'essayer d'harmoniser les couleurs au mieux ^^
Polices à utiliser :font-family:'IM fell english',serif (pour les titres uniquement)  
Images à utiliser : Le haut > https://2img.net/h/oi65.tinypic.com/2qs8705.png
Le fond > https://2img.net/h/oi64.tinypic.com/29wn621.png
Le bas > https://2img.net/h/oi65.tinypic.com/29vf70p.png
Le Bandeau >https://am23.akamaized.net/tms/cnt/uploads/2015/03/libs_article.jpg
Acceptez-vous que le code finisse en LS ? c'est déjà un LS XD
Mode de rendu : intégration directe comme ça tu peut corriger directement les fautes éventuelles
Autre chose à ajouter ? Je pense avoir donner tout alors si jamais j'ai oublier quoique ce soit dit le moi et merci de ton aide ^^

Ven 19 Mai - 8:26

Yoh !

Ca devrait être faisable ^^

Je commence ce soir.

Ven 19 Mai - 11:17

Merci beaucoup j'attends sagement alors ^^

Sam 20 Mai - 19:26

Voila le rendu : www.
Pour l'image, elle était trop petite en largeur, et trop grande en hauteur donc j'ai modifié un peu.

Lun 22 Mai - 1:44

bonsoir halloween...

je comprend ce qu'il ne va pas tu a mis l'image pour encadrer le le titre mais met le simplement au dessus normalement  c'est pas possible ? avec tout le fond avec le parchemin ?

Lun 22 Mai - 8:23

Non non, je te parle du fond des groupes ^^

Du coup je change quand même l'image d'en-tête ?

Lun 22 Mai - 8:39

haaaa du font des groupe ... je suis désolé u_u j'avais compris que le problème venais de l'image du haut vu que cela n'allais pas c'est pour ça. Mais si tu veux corriger ça oui tu peut pas de problème , l'image de font j'ai pris une image comme ça de librarians j'était pas sur de moi au pire je changerais si cela ne me convient pas .

Lun 22 Mai - 10:58

Le CSS :

Code:

/* -------------------------------- QEEL -------------------------------- */

        /*** MISE EN FORME LIENS AU SURVOL ***/
        a:hover {
          text-decoration: none !important;
        }

        /*** MISE EN FORME FONT DU QEEL ***/
        .fond_qeel {
          width: 850px;
          background: url('http://i64.tinypic.com/29wn621.png');
          margin: auto;
          font-family: arial;
          height: 670px;
          position: relative;
        }

        /*** MISE EN FORME TITRE PRINCIPAL ***/
        .titre_principal {
          color: #583520;
          font-family: 'IM Fell English', serif;
          font-size: 28;
          letter-spacing: 5px;
          text-align: center;
        }

        /*** MISE EN FORME SOUS-TITRE "Et à qui se fier ?" ***/
        .titre_secondaire {
          color: #9e8c62;
          font-family: georgia;
          font-size: 14px;
          text-align: center;
        }

        /*** MISE EN FORME BLOC STATISTIQUES ***/
        .bloc_stat {
          background-color: #F0F0F0;
          padding: 15px;
          width: 200px;
          height: 210px;
          overflow: auto;
          font-size: 11px;
          border: 2px solid #9e8c62;
          text-align: justify;
          color: #515151;
          position: absolute;
          left: 5em;
          z-index: 1;
        }

        /*** MISE EN FORME BLOC DES GROUPES ***/
        .bloc_groupes {
          background-color: #F0F0F0;
          padding: 15px;
          width: 420px;
          height: 100px;
          overflow: auto;
          font-size: 20px;
          border: 2px solid #9e8c62;
          text-align: center;
          font-family: 'Six Caps', sans-serif;
          position: absolute;
          left: 17em;
          z-index: 1;
        }

        /*** MISE EN FORME BLOC DES CONNECTES LES 24H ***/
        .bloc_connectes {
          background-color: #F0F0F0;
          padding: 15px;
          width: 420px;
          height: 50px;
          overflow: auto;
          font-size: 20px;
          border: 2px solid #9e8c62;
          text-align: center;
          font-family: 'Six Caps', sans-serif;
          position: absolute;
          left: 17em;
          z-index: 1;
        }

        /*** DECALAGE BLOC CONNECTES ***/
        .bloc_perigrination {
          margin-top: 1em;
        }


        /*** COULEUR ET TRANSPARENCE DU FOND DES 24H ***/
        #kaboum .row1 {
          background-color : transparent;
        }

        #kaboum span.gensmall {
          color: #515151;
       font-family: arial;
        }

        /*** MISE EN FORME DES TITRES (simple + survol) ***/
        .titre_bloc {
          font-family: 'IM Fell English', serif;
          font-size: 24px;
          font-weight: bold;
          color: #583520;
          position: absolute;
          z-index: 2;
          margin-top: -18px;
        }

        .titre_bloc:hover {
          color: #9e8c62;
        }

        /*** GROUPES A ONGLETS ***/
        /* Mise en forme des noms de groupe */
        .groupe_onglet {
          display: inline-block;
          padding: 10px;
        }

        /* Mise en forme du bloc en transparence de description */
        .contenu_groupe_onglet {
          padding: 15px;
          display: none;
          width: 315px;
          height: 115px;
          overflow: auto;
          font-size: 11px;
          color: #583520;
          text-align: justify;
          background-color: #CBC4C2;
          position: absolute;
          top: 14em;
          left: 21em;
          filter: alpha(opacity = 80);
          opacity: 0.8;
        }

        /* Mise en forme des liens */
        .contenu_groupe_onglet a{
          text-decoration: none !important;
        }
        /* -------------------------------- FIN QEEL -------------------------------- */

Et dans index_body tu remplaces ceci :

Code:

<!-- BEGIN disable_viewonline -->
<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} :&nbsp; {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>
<!-- END disable_viewonline -->

Par cela :

Code:

<!-- BEGIN disable_viewonline -->
        <link href='http://fonts.googleapis.com/css?family=Dancing+Script|Six+Caps|IM+Fell+English' rel='stylesheet' type='text/css'>
          <img src="http://i65.tinypic.com/2qs8705.png" style="margin: auto; display: block;" />
        <div class="fond_qeel"><br /><br /><div class="titre_principal">Qui est en ligne ?</div>
          <div class="titre_secondaire">Et avec qui parler ?</div>
    <br /><img src="https://img4.hostingpics.net/pics/185540Sanstitre2.jpg" style="width: 100%; border-top: 2px solid #9e8c62; border-bottom: 2px solid #9e8c62;" />
 
          <br /><br />
            <br />
          <div class="titre_bloc" style="left: 3em;">Statistiques</div>
            <div class="bloc_stat"><span id="bert">{TOTAL_POSTS}</span>
                <script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/Nos membres ont posté un total de/,"Nos Bibliothécaires ont vécu un total de").replace(/messages/,"aventures.");
              </script> <br />
              <span id="matt">{TOTAL_USERS}</span>
                <script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/Nous avons/,"Nous avons").replace(/membre enregistré/,"Bibliothécaires qui sauvent le monde.");
              </script><br />
              <span id="yosh">{NEWEST_USER}</span>
                <script type="text/javascript">document.getElementById('yosh').innerHTML=document.getElementById('yosh').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Notre dernier Bibliothécaire  à nous avoir rejoint est");
              </script><br />
            <span id="celine">{TOTAL_USERS_ONLINE}</span>
                  <script type="text/javascript">document.getElementById('celine').innerHTML=document.getElementById('celine').innerHTML.replace(/Il y a en tout/,"Il y a en tout").replace(/utilisateur(s?) en ligne/,"personnes dans la bibliothèque").replace(/::/,":").replace(/Enregistré(s?)/,"Bibliothécaire(s)").replace(/Invisible(s?) et/,"Serpent(s),").replace(/Invité(s?)/,"Indéci(s)");
              </script><br /><br />
              {LOGGED_IN_USER_LIST}</div>
          <div class="titre_bloc" style="left: 15em;">Groupes</div>
            <div class="bloc_groupes"><div class="groupe_onglets">
              <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_mdj" onmouseover="javascript:change_groupe_onglet('mdj');"><font color="#AD4F09">Le Maître du Jeu</font></span>
              <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_bibliotheque" onmouseover="javascript:change_groupe_onglet('bibliotheque');"><font color="#4F0000">La Bibliothèque</font></span>
              <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_protecteurs" onmouseover="javascript:change_groupe_onglet('protecteurs');"><font color="#00B0F0">Les Protecteurs</font></span>
              <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_serpents" onmouseover="javascript:change_groupe_onglet('serpents');"><font color="#004200">La Confrérie du Serpent</font></span>
              <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_dieux" onmouseover="javascript:change_groupe_onglet('dieux');"><font color="#FF0000">Les Dieux</font></span>
              <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_immortels" onmouseover="javascript:change_groupe_onglet('immortels');"><font color="#004085">Les Immortels</font></span>
              <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_surnaturels" onmouseover="javascript:change_groupe_onglet('surnaturels');"><font color="#7CAD3B">Les êtres Surnaturels</font></span>
              <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_ennemis" onmouseover="javascript:change_groupe_onglet('ennemis');"><font color="#666666">Autres Ennemis</font></span>
              <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_allies" onmouseover="javascript:change_groupe_onglet('allies');"><font color="#944CFF">Alliés</font></span>
              <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_pnj" onmouseover="javascript:change_groupe_onglet('pnj');"><font color="#FFD500">PNJ</font></span>
              <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_noninities" onmouseover="javascript:change_groupe_onglet('noninities');"><font color="#000000">Non Initiés</font></span>
              </div></div><br /><br /><br /><br /><br /><br /><br /><br />
          <div class="bloc_perigrination"><div class="titre_bloc" style="left: 15em;">Périgrination</div>
            <div class="bloc_connectes"><table id="kaboum">{L_CONNECTED_MEMBERS}</table></div></div>
     
          <script type="text/javascript">
                    //<!--
                            function change_groupe_onglet(name)
                            {
                                    document.getElementById('groupe_onglet_'+anc_groupe_onglet).className = 'groupe_onglet_0 groupe_onglet';
                                    document.getElementById('groupe_onglet_'+name).className = 'groupe_onglet_1 groupe_onglet';
                                    document.getElementById('contenu_groupe_onglet_'+anc_groupe_onglet).style.display = 'none';
                                    document.getElementById('contenu_groupe_onglet_'+name).style.display = 'block';
                                    anc_groupe_onglet = name;
                            }
                    //-->
                    </script>
          <br />
          <div class="contenu_groupe_onglets">
           
            <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_mdj"><span style="color: #AD4F09; font-weight: bold;">Le Maître du Jeu</span> • "The Library" signifie tout simplement "La bibliothèque" en anglais. Sachant qu'elle est douée de conscience et envoie des invitations à tout va, il est normal qu'elle devienne le "Maître du jeu". Ce compte sera manipulé par le staff, le plus souvent par sa fondatrice.</div>
           
            <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_bibliotheque"><span style="color: #4F0000; font-weight: bold;">La Bibliothèque</span> • Ce sont tous ceux qui travaillent pour elle dans le but de préserver la magie sous toutes ses formes. Il y a d'abord les bibliothécaires qui sont au nombre de quatre. Ce sont des gens comme vous et moi, à ceci près que la Bibliothèque les a choisis car ils ont ce petit quelque chose en plus qui font d'eux des êtres plus exceptionnels que la moyenne, et donc plus susceptibles de protéger ce lieu magique.</div>
           
            <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_protecteurs"><span style="color: #00B0F0; font-weight: bold;">Les Protecteurs</span> • Les Protecteurs sont des "bibliothécaires" qui s'ignorent; d'ailleurs ils ne connaissent absolument pas la bibliothèque et son contenu et encore moins les bibliothécaires. Pourtant ils sont répartis le plus souvent en petits groupes de 5 ou 6 individus et peuvent chercher des artefacts et protéger la magie comme des bibliothécaires!</div>
           
            <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_serpents"><span style="color: #004200; font-weight: bold;">La Confrérie du Serpent</span> • La Confrérie du Serpent: Sans rentrer dans les détails, la Confrérie du Serpent est en fait l’ennemi déclaré de la Bibliothèque. C'est une organisation qui cherche à tout prix à avoir la mainmise sur ce que la Bibliothèque renferme de plus précieux.</div>
           
            <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_dieux"><span style="color: #FF0000; font-weight: bold;">Les Dieux</span> • Comme vous le savez ce sont des êtres exceptionnels. Ils sont immortels, ont des pouvoirs magiques puissants, mais peuvent se confondre dans le monde réel comme n'importe quel être humain. Pour les douze élus qui ont élu domicile dans des corps, la vie risque de se compliquer.</div>
           
            <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_immortels"><span style="color: #004085; font-weight: bold;">Les Immortels</span> • À l'image de certains personnages de la série, les Immortels sont des personnes avec ou sans pouvoirs. Jenkins ou bien Judson,veillent non seulement à la bonne marche de l'équipe des bibliothécaires, mais aussi leur partagent leur sagesse. Mais il n'y a pas qu'eux!</div>
           
            <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_surnaturels"><span style="color: #7CAD3B; font-weight: bold;">Les êtres Surnaturels</span> • Qu'ils soient fées ou dragons, la Bibliothèque fait partie de ces lieux que les êtres surnaturels côtoient, mais aussi se réfugient quand quelque chose ne va pas.</div>
           
            <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_ennemis"><span style="color: #666666; font-weight: bold;">Autres Ennemis</span> • Bien que la Confrérie du Serpent ait une place prépondérante dans le forum, la Bibliothèque suscitant toutes les convoitises a également d'autres ennemis.</div>
           
            <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_allies"><span style="color: #944CFF; font-weight: bold;">Alliés</span> • Qu'ils soient des hauts placés dans notre société ou l'un des membres d'une famille d'une personne en lien avec la Bibliothèque, ils en sont devenus les alliés.</div>
           
            <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_pnj"><span style="color: #FFD500; font-weight: bold;">PNJ</span> • Les PNJ sont des personnages manipulés par le staff. Ils sont là généralement quand le Maître du jeu ne peut pas suffire.</div>
           
            <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_noninities"><span style="color: #000000; font-weight: bold;">Non Initiés</span> • Ne vous inquiétez pas. Si vous êtes dans ce groupe, c'est que vous venez de vous inscrire et que votre présentation n'a pas encore été validée. Donc, pas de panique !</div>
            </div>
       
            <script type="text/javascript">
                    //<!--
                            var anc_groupe_onglet = 'mdj';
                            change_groupe_onglet(anc_groupe_onglet);
                    //-->
          </script><br /><br /></div>
          <img src="http://i65.tinypic.com/29vf70p.png" style="margin: auto; display: block;">

            <!-- END disable_viewonline -->

Lun 22 Mai - 12:43

Merci c'est super ^^ pour moi c'est tout bon ^^