Boutons 'Editer' et 'Supprimer' CSS3?

[Snaky<3]

Hey

Je demande votre aide car je ne sais pas trop comment faire pour transformer mes boutons Editer et Supprimer en boutons full CSS3 (avec hover) comme je l'ai fait pour les boutons Nouveau et Répondre:



J'ai essayé de procéder de la même manière que pour ces 2 boutons Nouveau et Répondre, où j'allais dans le template viewtopic_body et dont j'avais bidouillé le code de la façon suivante:

Code:

<span class="nav">
         <!-- BEGIN switch_user_authpost -->
                          <a href="{U_POST_NEW_TOPIC}" id="nouveausujet" align="middle" border="0">Nouveau sujet</a>   
         <!-- END switch_user_authpost -->
         <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}" id="repondre" align="middle" border="0">Répondre</a>
         <!-- END switch_user_authreply -->
         </span>

Pour les boutons Citer/Editer/Multiquote etc., j'ai repéré le passage suivant, mais je sais pas du tout comment procéder vu que ce n'est pas identique à ce que je vous ai mis plus haut^^:

Code:

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

Merci d'avance!

PS: lien du forum, au cas où: http://saphireteam.purforum.com

[Tech]

Bonjour,

Vous pourrez entourer les balises de ce genre {postrow.displayed.THANK_IMG} par un span avec une classe.
Vous aurez donc en théorie (je n'ai pas testé), deux parties pour le CSS :

Code:

.classe img {

}

.classe a {

}

Et cela devrait suffire pour avoir le même résultat.

Cordialement.

[Snaky<3]

Merci de ta réponse!

Comme tu me l'as proposé, j'ai fait ceci:

Code:

   <td valign="top" nowrap="nowrap" class="post-options">
          {postrow.displayed.THANK_IMG}
          {postrow.displayed.MULTIQUOTE_IMG}
          <span class="citer"><a href="{postrow.displayed.QUOTE_IMG}">Citer</a></span>
          {postrow.displayed.EDIT_IMG}
          {postrow.displayed.DELETE_IMG}
          {postrow.displayed.IP_IMG}
          {postrow.displayed.REPORT_IMG}
        </td>

J'obtiens un résultat assez bizarre malheureusement (le 'Citer' apparait bien mais n'est pas cliquable, et il y a quelques caractères à sa gauche, pour l'instant je ne m'occupe pas du CSS. Ne te fies pas aux images, tout de façon je vais les supprimer):



J'ai aussi essayé ça mais ça rend presque pareil:

Code:

 <td valign="top" nowrap="nowrap" class="post-options">
          {postrow.displayed.THANK_IMG}
          {postrow.displayed.MULTIQUOTE_IMG}
          <a href="{postrow.displayed.QUOTE_IMG}" id="citer">Citer</a>
          {postrow.displayed.EDIT_IMG}
          {postrow.displayed.DELETE_IMG}
          {postrow.displayed.IP_IMG}
          {postrow.displayed.REPORT_IMG}
        </td>   

Vu son nom, j'ai l'impression que postrow.displayed.QUOTE_IMG désigne plutot l'image et non pas l'action de citer, non?

[MlleAlys]

Bonjour !
Pour modifier mes boutons "Editer" et "Supprimer", je n'étais pas du tout passée par les templates, mais par les class .i_icon_edit et .i_icon_delete déjà existantes =)

[Snaky<3]

Oui effectivement j'étais tombé sur ces classes après mes 1ères recherches, toutes les modifs que tu feras dans le CSS sur ces classes ça sera sur des images/icones  ^^

Or, ce que je souhaite c'est pour faire simple remplacer cette image par un lien Editer ou Citer par exemple, et le transformer en bouton avec le CSS, comme j'ai fait pour les boutons Nouveau et Répondre^^
A moins qu'on puisse écrire du texte "dans" un bouton ou une image en CSS3, auquel cas ça serait le top

[Tech]

J'ai pensé à une autre solution, on va devoir faire du bricolage

Donc on peut remplacer complètement la partie {postrow.displayed.QUOTE_IMG} par :

Code:

<span class="citer"><a href="/post?p={postrow.displayed.U_POST_ID}&mode=quote">Citer</a></span>

Et là, le tour est joué. A vous de modifier comme voulu

[Snaky<3]

Bien vuuuuuuuuu

Effectivement ça marche! Pareil pour le bouton Editer vu qu'ils utilisent tous les 2 l'ID du post en question. Voilà donc ce que ça donne (toujours la même portion de code), pour ceux que ça interesse:

Code:

<td valign="top" nowrap="nowrap" class="post-options">
          {postrow.displayed.THANK_IMG}
          {postrow.displayed.MULTIQUOTE_IMG}
          <span class="citer"><a href="/post?p={postrow.displayed.U_POST_ID}&mode=quote">Citer</a></span>   
          <span class="editer"><a href="/post?p={postrow.displayed.U_POST_ID}&mode=editpost">Editer</a></span>
          {postrow.displayed.DELETE_IMG}
          {postrow.displayed.IP_IMG}
          {postrow.displayed.REPORT_IMG}
        </td>

Par contre il me reste plus que le bouton Supprimer qui a l'air de faire un "tid" dont je ne connais absolument pas l'identifiant^^. Pour supprimer un post j'ai donc un lien comme ça:

......purforum.com/post?p=XXXXXX&tid=65c7e8b92b6d046d834b1b06ce86ef1b&mode=delete

Saurais-tu à quoi correspond ce fameux tid?

[Tech]

Bonsoir,

Cela fonctionne sans le tid. Donc ça donne quelque chose de ce genre :

Code:

<span class="supprimer"><a href="/post?p={postrow.displayed.U_POST_ID}&mode=delete">Supprimer</a></span>

Cordialement.

[Snaky<3]

Génial! Merci encore pour votre aider, du coup j'ai pu obtenir exactement ce que je voulais à savoir des boutons sans images avec hover et dans le même veine que le style de mon forum



Problème résolu donc, à bientot!

[AenigmA]

Je vais utiliser ceci je pense, merci à vous deux