[HTML5 & CSS3] - 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 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  

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 ?