Boutons 'Editer' et 'Supprimer' CSS3?

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Boutons 'Editer' et 'Supprimer' CSS3?

Message par Snaky<3 le Dim 4 Aoû 2013 - 12:09

Hey Smile

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


Dernière édition par Snaky<3 le Mar 6 Aoû 2013 - 10:17, édité 1 fois

Snaky<3
Nouveau membre

Messages : 10
Inscrit(e) le : 27/02/2013

http://saphireteam.purforum.com
Snaky<3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons 'Editer' et 'Supprimer' CSS3?

Message par Tech le Dim 4 Aoû 2013 - 12:13

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.



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

Masculin
Messages : 21129
Inscrit(e) le : 01/12/2007

http://forum.forumactif.com
Tech a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons 'Editer' et 'Supprimer' CSS3?

Message par Snaky<3 le Dim 4 Aoû 2013 - 12:57

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?

Snaky<3
Nouveau membre

Messages : 10
Inscrit(e) le : 27/02/2013

http://saphireteam.purforum.com
Snaky<3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons 'Editer' et 'Supprimer' CSS3?

Message par MlleAlys le Dim 4 Aoû 2013 - 13:05

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

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons 'Editer' et 'Supprimer' CSS3?

Message par Snaky<3 le Dim 4 Aoû 2013 - 13:23

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

Snaky<3
Nouveau membre

Messages : 10
Inscrit(e) le : 27/02/2013

http://saphireteam.purforum.com
Snaky<3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons 'Editer' et 'Supprimer' CSS3?

Message par Tech le Dim 4 Aoû 2013 - 15:08

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

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 Smile



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

Masculin
Messages : 21129
Inscrit(e) le : 01/12/2007

http://forum.forumactif.com
Tech a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons 'Editer' et 'Supprimer' CSS3?

Message par Snaky<3 le Lun 5 Aoû 2013 - 22:10

Bien vuuuuuuuuu Very Happy

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?



Snaky<3
Nouveau membre

Messages : 10
Inscrit(e) le : 27/02/2013

http://saphireteam.purforum.com
Snaky<3 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Boutons 'Editer' et 'Supprimer' CSS3?

Message par Tech le Lun 5 Aoû 2013 - 22:23

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.



{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

Masculin
Messages : 21129
Inscrit(e) le : 01/12/2007

http://forum.forumactif.com
Tech a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Boutons 'Editer' et 'Supprimer' CSS3?

Message par Snaky<3 le Mar 6 Aoû 2013 - 10:16

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 Smile



Problème résolu donc, à bientot!

Snaky<3
Nouveau membre

Messages : 10
Inscrit(e) le : 27/02/2013

http://saphireteam.purforum.com
Snaky<3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Boutons 'Editer' et 'Supprimer' CSS3?

Message par AenigmA le Mar 6 Aoû 2013 - 10:44

Je vais utiliser ceci je pense, merci à vous deux

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum