[Résolu] Problèmes de CSS pour des boutons

Information importante

En raison d'un grand nombre d'inscriptions de spammers sur notre site, polluant sans relache notre forum, nous suspendons la création de compte via le formulaire de "sign up".

Il est néanmoins toujours possible de devenir adhérent•e en faisant la demande sur cette page, rubrique "Inscription" : https://www.drupal.fr/contact


De plus, le forum est désormais "interdit en écriture". Il n'est plus autorisé d'y écrire un sujet/billet/commentaire.

Pour contacter la communauté, merci de rejoindre le slack "drupalfrance".

Si vous voulez contacter le bureau de l'association, utilisez le formulaire disponible ici, ou envoyez-nous un DM sur twitter.

Bonjour tout le monde !

J'ai le problème suivant.

Sur la même page de mon site, j'ai le module simplenews actif, qui a dans son bloc un bouton permettant de s'abonner à la newsletter. Dans le code source, son id est : edit-submit.

Quand on visite certaines pages du sites qui ne comportent pas d'autres boutons, tout va bien.

Néanmoins, quand je visite la page du livre d'or, avec le module guestbook, qui elle contient également avec un autre bouton pour valider l'envoi d'un message, je me retrouve avec 2 boutons sur la même page.

Le edit-submit de mon bouton simplenews devient alors dans le code source : edit-submit-1.
Le edit-submit de mon bouton guestbook est dans le code source : edit-submit.

Néanmoins, j'aimerai changer la position de ce bouton guestbook.

Le problème est que lorsque je touche ce edit-submit, cela ne change pas le bouton simplenews car sur cette page, il a l'id : edit-submit-1, mais change sur toutes les autres pages car il a l'id : edit-submit.

Dès idées pour changer l'id du bouton du guestbook ? J'ai essayé de trafiquer le code du module guestbook sans succès, de même pour celui de simplenews...

Merci d'avance pour votre aide !

Xavier

Version de Drupal : 

Oui j'ai mis les id qui étaient données, mais elles ont l'air d'être modifiées par drupal quand il y en a 2 du même type (donc une prendre l'extension 1) vu qu'il n'est pas possible d'avoir 2 même id sur une page.

Je pense pouvoir faire cela en modifiant le code du module guestbook et d'ajouter un div + class pour modifier la position comme je le veux !

Merci de la réponse en tout cas.

Xavier

Salut Xavier,

Je pense que tofu t'a indiqué la bonne piste, mais pas sûr que tu aies compris ce qu'il a voulu dire.

Plutôt que de cibler les boutons submit directement via leur id, il te conseille de les cibler en passant par le formulaire dans lequel ils se trouvent. Dans le HTML, chaque balise <form> a un identifiant unique, et cet identifiant ne change jamais.

Supposons que ton code source ressemble à ça :

<form id="simplenews">
  <input type="submit" class="form-submit" id="pas-important" />
</form>
...
<form id="guestbook">
  <input type="submit" class="form-submit" id="pas-important" />
</form>

Tu peux cibler le bouton de chaque formulaire en tirant partie de l'héritage CSS et en écrivant :

#simplenews .form-submit {
  // mettre tes styles ici
}
#guestbook .form-submit {
  // mettre tes styles ici
}

La limite de cette solution, c'est si un de tes formulaires contient plusieurs boutons submit, auquel cas la classe .form-submit ne sera pas assez spécifique pour cibler un bouton précis.

Merci pour le coup de main, c'est résolu ;-)

Pour ceux qui auraient le même problème, la solution de Vincent et Tofu est parfaite, mais vous pouvez également faire comme moi en modifiant le fichier "guestbook.module" et en ajoutant un id : '#id' => 'boutonguestbook'

Les deux méthodes marchent.

A bientôt !

Xavier

Ca fonctionne, mais si tu updtate ton "guestbook" module, ton id va disparaitre, il faudra pas oublier de le rajouter :). Donc bon c'est déconseillé ... mais ça a la mérite de fonctionner :)

+1 sur la remarque de tofu, c'est carrément déconseillé !

Pour implémenter ta solution proprement, il faudrait créer ton propre module avec un hook_form_alter() dedans, mais quel intérêt si tu peux déjà utiliser les id existants pour faire ce que tu veux.