Un p'tit refuge codique

    le Ven 11 Aoû - 17:01

  • Me voici sur mon noble destrier, venue quémander un peu de votre talent gente dame. (Paraît qu'avec la courtoisie on obtient ce que l'on veut. /PAN/)

    Plus sérieusement, bonjouuuuur et d'avance un GRAAAAAND merci pour cette commande énormissime qui, j'en suis certaine, te rendra allergique à ma personne pendant trèèèèès longtemps. :'c (Enfin pas trop quand même, hein ?)
    J'espère que tout sera clair pour toi, auquel cas... je reste dans les parages. :nié:

    Forum : (J'le mets sous hide pour qu'on puisse le voir une fois qu'il sera tout beau tout propre ! :dummy: )

    Version : PHPBB2

    Taille du forum : 900 px

    Elément(s) demandé(s) : Alors... un portail (mais ça c'est pas le plus important si jamais le schéma te semble inconcevable), une page d'accueil, des catégories, un QEEL, la liste des sujets et la mise en forme des sujets. *reprend son souffle*

    Maquette :

    PORTAIL : www
    PAGE D'ACCUEIL : www
    CATÉGORIES : www
    QEEL : www
    LISTE SUJETS : www
    SUJETS : www

    Description :

    PORTAIL : Si possible, intégrer un lecteur de musique (caché, dans le meilleur des cas sinon pas grave) - enfin en vrai j'ai peur que ça saoule les gens à force donc j'avoue que j'aimerais bien ton avis. ;w; Les boutons "Entrer dans la caverne" et "Entrer en tant qu'invité" changent de couleur progressivement (d'un bleu semblable à celui des champs ID et MDP).

    PAGE D'ACCUEIL : Pour les liens j'avais pensé à deux idées : soit mettre un blur progressif sur le texte au passage du curseur, soit faire en sorte que les boutons liens utiles ("règles et jeu", "contexte", etc) se foncent progressivement. Les news qui défilent via les flèches, il faudrait que le texte sur les images soit du html ("titre de la news", "en savoir +/résumé" ainsi que la date) et que seule l'image en arrière plan soit graphée. Enfin, pour les images du staff, une opacité progressive avec le pseudo qui apparaît et les liens de contact. (J'ai zappé mais y'a aussi la barre de navigation, tu n'es pas obligée de la coder sachant qu'il y en a une similaire sur le site de CCCrush., donc à toi de voir :D).

    CATÉGORIES : Petite question : pour les illustrations de lieux dans les catégories, est-ce possible de les coder pour qu'elles prennent la même forme que sur la maquette ou faudra-t-il que je les rende triangulaires via mon logiciel photoshop ? Et enfin, est-il possible d'apposer un filtre sur les images descriptives pour faire en sorte qu'elles s'harmonisent davantage avec le design quelque soit leurs couleurs de base ? (Tu vois genre un filtre qui obscurcit un poil). Après j'dis ça mais osef si c'est pas possible. D: *la fille pas reloue dès le départ*

    QEEL : Juste mettre une opacité déprogressive lorsqu'on place le curseur sur les boutons de partenariats. Sinon, rien à signaler chef !

    LISTE SUJETS : Rien d'autre à ajouter en plus de la maquette.

    SUJETS : Idem.

    Polices à utiliser : Celles sur les maquettes ne se retrouvent pas sur Google fonts, mais tu as des équivalents :
    https://fonts.google.com/specimen/Caveat
    https://fonts.google.com/specimen/Nothing+You+Could+Do
    https://fonts.google.com/specimen/Reenie+Beanie
    https://fonts.google.com/specimen/Italianno
    https://fonts.google.com/specimen/Satisfy
    https://fonts.google.com/specimen/Calligraffitti

    Après très sincèrement, je sais me dépatouiller avec le CSS, héberger une police, etc. Donc ne t'embête pas avec cet aspect-là. :)

    Images à utiliser : Sygea avait eu la gentillesse de me donner un fichier avec toutes les images soigneusement classées, je te le fais donc parvenir : clique ! N'hésite pas à me dire si certaines manquent. :)

    Acceptez-vous que le code finisse en LS ? Boh, ça ne me dérange pas spécialement. Après, c'est davantage vos créations à toi et Sygea donc c'est à vous deux d'en décider. xD

    Mode de rendu : Via le sujet ma p'tite dame ! Je ne saurais profiter de vous davan... *regarde sa grosse commande et rougit* OUI BON. JE PROFITE. ;w;

    Autre chose à ajouter ? Encore merciiiii Hallo ! Si tu as la moindre question ou remarque par rapport à un truc qui te paraît irréalisable, n'hésite pas ! \o/



    Absente du 14 Août au 17 Août puis du 25 Août au 9 Septembre.
    Au poulpe barioléma boutique d'entraide ; écriture, atelier, analyse, correction ! Viendez. :pong:

    le Ven 11 Aoû - 17:24

  • Allergique à toi ? Jamais ♥
    Avec les maquettes parfaites de Sygea ce sera forcément top :aaaah:

    Alors.

    Pour le portail, il claque sa mère donc pas le choix, on y arrivera (même si j'ai jamais testé XD). En ce qui me concerne par contre, j'aime bien pouvoir choisir si je veux de la musique ou non. Même si tu peux bloquer le son de ton onglet, genre si t'as oublié de couper le son des haut-parleurs qui sont à 100% (ça sent le vécu :meow: ), bah t'as pas toujours le réflexe. Peut-être un lecteur un peu discret ? A toi de voir. Il me faudrait le lien de la chanson peut-être par contre, je vais me renseigner un peu sur le concept.

    Pour la page d'accueil j'avais déjà testé le slide en HTML + image et pour être honnête ça n'avait pas marché XD Je vais fouiner plus en détail. Après pas de difficulté particulière, juste c'est quoi du "blur" ? Un mot que je connais pas ou du "bleu" qui a foiré ? XD

    Pour les catégories pas de soucis pour le filtre. Pour les images de descriptions je réfléchis ... peut-être qu'en bidouillant un peu l'image "no news" y a moyen de ne pas tout te faire recadrer. Je regarde et je te dis ^^

    Pas de soucis pour le reste :) On verra avec Sygea à la fin pour le LS je pense, quand tu auras changé le tout une fois que ton forum cartonnera, dans pas longtemps 8D

    Profite Luciole, profite





    Absente du 13/08 au ... je sais pas quand, soyez mignons ♥

    le Ven 11 Aoû - 17:47

  • Cool. Cooool. COOOOOOOOL. Mici !

    Alors, pour le lecteur si tu veux, j'ai un code utilisé sur Thotho, ça pourrait éventuellement t'aider (par contre c'était sur l'index et non sur un portail). Le lecteur était celui du site Wikiplayer :

    CSS:
    Code:
    /* Boîte à musique */
    .music_box {
      background:rgba(255, 255, 255, 0.5);
      bottom: 25px;
      height: 50px;
      position: fixed;
      right: 25px;
      width: 50px;
      border-radius: 50px;
      padding: 5px;
      border: 1px solid #FFF;
      box-shadow: 0 0 5px #0B2F33;
    }

    .music_box_img {
      height:50px;
      width:50px;
    }

    Page HTLM:
    Code:
    <meta charset="UTF-8" />    <title>Boîte à musique de Thoronir</title>    <link href="http://image.noelshack.com/fichiers/2015/30/1437831526-quarter-note.png" type="image/png" rel="icon" />    <style>
          body {
          background:url(http://image.noelshack.com/fichiers/2015/30/1437828177-test-by-k04sk-d6v05ze.jpg) no-repeat top center;
          background-size:cover;
          }
        </style>           
    <div class="radio-content">
          
       <!--  Wikplayer http://www.wikplayer.com  --><script data-config="{'skin':'skins/wikfull/plainBlack/skin.css','volume':50,'autoplay':false,'shuffle':false,'repeat':0,'showcomment':false,'marqueetexton':true,'placement':'top','showplaylist':false,'playlist':[{'title':'Peter%20Crowley%20-%20The%20Campfire','url':'https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Ds8ZStQ_YSfs%26nohtml5%3DFalse'},{'title':'John%20Dreamer%20-%20Becoming%20a%20legend','url':'https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DtoPm-L7Ib44%26nohtml5%3DFalse'},{'title':'Howard%20Shore%20-%20Misty%20mountains','url':'https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DwC-JOW2YafM%26nohtml5%3DFalse'},{'title':'Inon%20Zur%20-%20Fallout%204%20main%20theme','url':'https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DkzvZE4BY0hY%26nohtml5%3DFalse'},{'title':'Two%20steps%20from%20hell%20-%20Winterspell','url':'https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DSjPtvKCrmoY%26nohtml5%3DFalse'},{'title':'Ivan%20Torrent%20-%20Human%20legacy','url':'https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DqD8OnPC1fLI%26nohtml5%3DFalse'},{'title':'John%20Dreamer%20-%20True%20strength','url':'https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DoVWBFkaXMyw%26nohtml5%3DFalse'},{'title':'Audiomachine%20-%20Ice%20of%20phoenix','url':'https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DXUeQ0Ew_Wh0%26nohtml5%3DFalse'},{'title':'Ori%20and%20the%20Blind%20Forest%20-%20Main%20Theme','url':'https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D76qRF5-qvZM%26nohtml5%3DFalse'},{'title':'Le%20ch%C3%A2teau%20dans%20le%20ciel%20-%20Theme','url':'https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D229K5n_PRJA%26nohtml5%3DFalse'},{'title':'Ballad%20of%20the%20goddess%20-%20The%20legend%20of%20Zelda','url':'https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dv4ReyoNpyrM%26nohtml5%3DFalse'},{'title':'Two%20steps%20from%20hell%20-%20Stay%20ft.%20Merethe%20Soltvedt','url':'https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DICYhocUr6aQ%26index%3D7%26list%3DPLIJA_pbjTkJc_E4WiwSwQ6QXf-a17qdZ8%26nohtml5%3DFalse'},{'title':'Two%20steps%20from%20hell%20-%20Heart%20of%20courage','url':'https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DXYKUeZQbMF0%26nohtml5%3DFalse'},{'title':'Hans%20Zimmer%20-%20Time','url':'https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D5WOcU7J9F3E%26nohtml5%3DFalse'},{'title':'Ramin%20Djawadi%20-%20Mhysa','url':'https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DOG55MPQjhwo%26nohtml5%3DFalse'},{'title':'Kindred%20-%20Stay','url':'https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dz_iiF0NNUXM'},{'title':'Dimatis%20et%20KISNOU%20-%20Beyond%20earth','url':'https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DdJFF9jJ6W34'},{'title':'Assassin%27s%20creed%20black%20flag%20-%20Main%20theme','url':'https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DUNREuwdJCw0'},{'title':'Peter%20Crowley%20-%20A%20tavern%20for%20the%20night','url':'https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DMmy9f2roRP4'},{'title':'The%20synthetic%20orchestra%20-%20Shovel%20knight','url':'https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DYHJtPpa5eXQ'}]}" src="http://www.wikplayer.com/code.js" type="text/javascript"></script>
       <!--  Wikplayer code end  -->         
    </div>

    overall_footer_end:
    Code:
    <!-- BEGIN html_validation -->
    <!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">
    <body>
    <table>
       <tr>
          <td>
             <div>
                <div>
                   <div>
    <!-- END html_validation -->
                   </div>
                </div>
                <!-- BEGIN switch_footer_links -->
                <div align="center">
                   <div class="gen">
                      <!-- BEGIN footer_link -->
                         <!-- BEGIN switch_separator --> |&nbsp;<!-- END switch_separator -->
                         <a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}</a>
                      <!-- END footer_link -->
                   </div>
                </div>
                <!-- END switch_footer_links -->
             </div>
             {PROTECT_FOOTER}
          </td>
       </tr>
    </table>

    <!-- BEGIN switch_facebook_login -->
    <div id="fb-root"></div>
    <script type="text/javascript">
        FB.init({
          appId      : {switch_facebook_login.FACEBOOK_APP_ID},
          cookie    : true,
          xfbml      : true,
          oauth      : true,
          version    : 'v2.3'
        });

      (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>
    <!-- END switch_facebook_login -->

    <!-- BEGIN switch_facebook_logout_TMP -->
    <script type="text/javascript">
    //<![CDATA[
    FB.Event.subscribe('auth.logout', function(response) {
       if ($('a#logout'))
       {
          var lien_redir = $('a#logout').attr('href');

          if ($('a#logout').attr('href') && $('a#logout').attr('href') != '')
          {
             document.location.href = 'https://{switch_facebook_logout.SERVER_NAME}/' + lien_redir;
          }
       }
    });

    $(document).ready( function() {
       $('a#logout').click( function() {
          FB.logout();
       } );
    });
    //]]>
    </script>
    <!-- END switch_facebook_logout_TMP -->

    <script type="text/javascript">
    //<![CDATA[
       fa_endpage();
    //]]>
    </script>
     
      <div class="music_box">
        <a href="http://thoronir.forumactif.org/h7-" target="blank" onclick="open('http://thoronir.forumactif.org/h7-', 'Popup', 'scrollbars=1,resizable=1,height=380,width=590'); return false;">
          <img src="http://img11.hostingpics.net/pics/4295201473441991iconmusic.png" class="music_box_img"/>
        </a>
      </div>
     
    </body>
    </html>

    Et pas de soucis pour la page d'accueil, sinon j'me dépatouillerai avec des images graphées, ne t'embête pas. :3

    Je vois ce que tu veux dire pour les catégories, tu me rediras ça. o/

    En tout cas, encore merci, j'ai hâte de voir tout ça. :blblbl:



    Absente du 14 Août au 17 Août puis du 25 Août au 9 Septembre.
    Au poulpe barioléma boutique d'entraide ; écriture, atelier, analyse, correction ! Viendez. :pong:

    le Sam 12 Aoû - 20:24

  • Pouet !

    J'ai avancé sur le footer, lentement mais sûrement. Tu peux t'installer au coin du feu si tu veux surveiller l'avancée :poke:

    Les Lucioles d'Ukrysis


    Je trouve que ça rend pas aussi bien avec les polices, je suis déception u3u Après je me demandais : les partenaires en footer doivent être visibles sur toutes les pages ou juste l'accueil ?

    EDIT :

    Liste des sujets
    Catégories
    Footer




    Absente du 13/08 au ... je sais pas quand, soyez mignons ♥

    le Dim 13 Aoû - 18:27

  • Re-coucou madame renarde ! :hellow:

    Je te l'ai déjà dit sur Discord mais tu avances vraiiiiment vite ! Par contre, je t'avais dit une largeur de 900 px, mais j'ai l'impression que les images de Sygea sont plus petites c'qui fait que les éléments sont pas alignés et que certaines images se répètent... serait-il possible d'ajuster la taille aux images, du coup ? ;w;

    Pour la liste des sujets, tout est bon sauf pour le "aller à la page 1,2,3" (et le futur bouton "nouveau" message) qui n'est pas sur la barre noire. (D'ailleurs la barre noire est légèrement séparée du titre de catégorie sur le schéma, ce serait possible d'avoir pareil ? :D)

    Pour les catégories, il serait possible de baisser les triangles inversés pour les aligner sur le bloc où y'a la description et l'image ? Ainsi que de baisser plus vers les petits blocs le bloc où figurent le dernier message posté et le posteur ? Et du coup pour les images descriptives je devrai les couper à gauche ? D:

    Pour le footer, les partenariats ne figurent que sur l'index, comme tu l'as déjà fait. Par contre ce serait possible de faire en sorte que les logos aient un filtre et quand on place le curseur dessus, les réelles couleurs apparaissent ?

    Voilàààà, désolée je chipote beaucoup, j'espère que mes demandes sont pas trop reloues. Prends ton temps en tout cas, et mille mercis pour ces beaux résultats. Ne t'en fais pas pour la police, j'essaierai d'en trouver une qui rende bien et je m'occuperai des modifications du css. :D

    Orevoooooooar ! ♥




    Absente du 14 Août au 17 Août puis du 25 Août au 9 Septembre.
    Au poulpe barioléma boutique d'entraide ; écriture, atelier, analyse, correction ! Viendez. :pong:

    le Lun 14 Aoû - 2:09

  • Pouet !

    Tout est corrigé (sauf les descriptions comme on en a discuté).

    J'ai avancé la mise en forme de sujet, j'essaie de voir comment agencer le bas de page pour la modération et je t'envoie une capture d'écran.

    EDIT : Vuala.





    Absente du 13/08 au ... je sais pas quand, soyez mignons ♥

      La date/heure actuelle est Jeu 17 Aoû - 3:57