AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

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


    [HTML5 & CSS3] - Boutons 'Nouveau' & 'Répondre' originaux

    Partagez
    Fangs
    MasculinAge : 99Messages : 91

    le Ven 3 Juil 2015 - 16:23




    Boutons 'Nouveau' & 'Répondre" originaux


    Bonjour à tous ! Alors voici un petit ls concernant les boutons 'Nouveau' et 'Répondre' qui servent respectivement à créer un nouveau sujet et à répondre à un autre, mais ça, vous le saviez déjà.

    C'est pourquoi j'ai choisi aujourd'hui de les placer un peu comme des widgets sur la page de visualisation des sujets et des messages.


    Pour avoir un petit aperçu je vous invite à checker ce lien où les boutons sont en position fixe sur le côté du forum et où les boutons bougent pour se dévoiler à 100% quand on les survole.



    Nous n'allons utiliser dans ce ls que les template 'viewforum_body' et 'viewtopic_body' ainsi que nos CSS.


    Je vous rappelle que, vu que nous modifions les templates il sera necessaire que votre forum tourne sous PHPBB2.

    Je tiens à rapeler aussi que les codeurs qui créent les ls et les tutoriels font ça bénévolement, il est donc normal que nous attention un crédit de Never Utopia sur vos forums. Merci  :toto:



    Occupons-nous donc tout d'abord de nos deux templates. Dans le premier qui est 'viewforum_body' nous allons supprimer ce code qui apparaît deux fois:


    Code:

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


    Nous allons maintenant tout simplement intégrer ce code:


    Code:

    <span class="new_topic"><a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" alt="{L_POST_NEW_TOPIC}" class="new_topic_img"/></a></span>


    Que vous pouvez placer n'importe ou dans votre template. Le mieux étant de le mettre à la première ou à la dernière ligne pour s'y retrouver.
    Passons maintenant au second template, 'viewtopic_body'. Nous allons procéder de la même manière. Vous allez rechercher ce code qui apparaît deux fois également et que vous allez supprimer.


    Code:

    <td align="left" valign="middle" nowrap="nowrap">
       <span class="nav">
       <!-- BEGIN switch_user_authpost -->
       <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>  &nbsp;
       <!-- END switch_user_authpost -->
       <!-- BEGIN switch_user_authreply -->
       <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
       <!-- END switch_user_authreply -->
       </span>
    </td>   


    Et nous allons ensuite intégrer ce code que vous pouvez placer également n'importe où SAUF entre les balises et présentes dans ce template.


    Code:

    <span class="new_topic"><a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" alt="{L_POST_NEW_TOPIC}" class="new_topic_img"/></a></span>
    <span class="reply"><a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" class="reply_img"/></a></span>


    Vous pouvez maintenant enregistrer et publier vos templates, et nous allons s'occuper des CSS à présent. Un CSS ici qui n'est pas très compliqué et qui fait appel aux propriétés 'transform' et 'transition' de CSS3.


    Code:
    /* DEBUT MISE EN PAGE BOUTONS NEW ET REPLY - FANGS */

    .new_topic {
      position: fixed;
      top: 15px;
      left: -20px;
      -webkit-transition: 1s;
      transition: 1s;
    }

    .new_topic:hover {
      left: 0px;
    }

    .reply {
      position: fixed;
      top: 75px;
      left: -20px;
      -webkit-transition: 1s;
      transition: 1s;
    }

    .reply:hover {
      left: 0px;
    }

    /* FIN MISE EN PAGE BOUTONS NEW ET REPLY - FANGS */


    Une dernière chose avant de vous laisser personnaliser. Pour vos images 'Nouveau' et 'Répondre' que vous pouvez bien évidemment modifier dans les réglages de votre forum.
    Et bien sur vous pouvez personnaliser ces codes à l'infini, mais je vous conseille d'avoir quelques notions en codage pour ne pas... tout casser ?



    Si vous avez une question, je vous rappelle que cette section est disponible !


    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Ven 4 Mar 2016 - 21:20

    Hello et désolée du retard! ^^"
    Vu que les boutons nouveau et répondre ne sont pas visible pour les invités sur les forums, tu pourrais nus faire une capture d'écran pour qu'on puisse voir ce que ça donne? ^^

    Cela me permet aussi de vérifier que le LS marche comme il le faut/comme tu l'as pensé avant de le valider Wink


    Dernière édition par NyoTheNeko le Sam 5 Mar 2016 - 11:42, édité 1 fois



    Kelalin
    FémininAge : 24Messages : 1401

    le Ven 4 Mar 2016 - 22:16

    Merci pour le partage !
    Onyx
    FémininAge : 23Messages : 2596

    le Dim 2 Oct 2016 - 3:29

    Salut!

    L'aperçu a été ajouté et le code vérifié, je valide donc Wink



    Contenu sponsorisé

    Aujourd'hui à 21:20


      La date/heure actuelle est Dim 4 Déc 2016 - 21:20