Discussion :

[Ushuango]

Bonsoir,

je voudrais styler un peu mon formulaire de contact ( contact form 7).
sur le première ligne, d'un côté les infos( du type email, nom, prenom, ...), puis sur une deuxième colonne: le message.
En dessous de cette première ligne, la case à cocher ( vous acceptez, ...etc )
Enfin la dernière ligne: le bouton submit

Alors , j'ai en html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<div class="contact-form-wrapper">
   <div class="contact-infos">...</div>
   <div class="contact-message">...</div>
   <div class="acceptance">...</div
   <div class="submit"></div>
</div>

J'ai rajouté les div dans mon code de wordpress: il y a dans ces div toutes les balises et classes de wordpress du contact form 7


Et en css:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
.contact-infos {
        grid-area: contact_infos;
    }
    .contact-message {
        grid-area: contact_message;
    }
    .acceptance {
        grid-area: acceptance;
    }
    .submit {
        grid-area: submit;
    }
    .contact-form-wrapper {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
            "contact_infos contact_message"
            "acceptance acceptance"
            "submit submit";
    }

Résultat: quelques défauts !
La ligne acceptance est plus large que les deux blocs au-dessus ( elle dépasse de chaque côté )
Et les infos ne prennent pas toutes la place: je voudrais que le dernier bloc () soit aligné avec la fin du bloc message
Je pense que j'ai plus vite fais de modifier la taille du bloc message( ça je sais le faire !)
Je vais aussi redéfinir la grille: plutôt 1fr 1fr 1Fr , pour que la partie message soit plus grande.

J'avoue , mes compétences en grid s'arrètent là.
S'il y a moyen de faire simple: c'est le but de mon post.
J'ai posté sur le forum wordpress car, je me dis que d'autres que moi ont essayé avec wordpress et donc savent mieux que moi comment faire !
Je vous mets des photos ( plus parlant )

Merci,
Bonne soirée,

Laurent.

[mathieu]

le forum wordpress est plutôt là pour les soucis de développement en php des extensions ou des thèmes.
pour vous j'ai l'impression que ça peut se régler directement avec du css donc demandez peut-être à un modérateur de déplacer votre message là :
https://www.developpez.net/forums/f4...mise-page-css/

[darkstar123456]

Bonjour,

Je n'aime pas trop CSS Grid dans ce cas.
C'est redondant, pas facile à écrire et pas souple.

Je trouve que Flexbox serait beaucoup plus approprié. Voici un petit guide (en Anglais) : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Et voici un exemple que j'ai réalisé vite fait (j'ai mis des background-color afin qu'on voit mieux les colonnes ) https://codepen.io/DarkStar123456/pen/VwWVGgQ
Les noms des classes est basé sur Bootstrap, et au moins il est réutilisable ^^

C'est basé sur une grille à 12 colonnes. Donc si on veut la moitié du containeur, on écrit donc class="col-6".
Dans les captures d'écran, j'imagine qu'il s'agit plutôt de 2/3 - 1/3
Soit : col-8 (12 /3 = 4 * 2 = 8) & col-4 (12 /3 = 4 * 1 = 4)

[Ushuango]

Bonsoir,

j'ai finalement réussi: un problème de gap ou chose dans le genre (j'ai tellement fait de choses aujourd'hui que je ne me souvient déjà plus ce que j'ai fait ce matin )
Mais finalement , tout est rentré dans l'ordre ( comme j'imaginais que ça devait fonctionner ! )

Ta solution est bien aussi, mais comme je suis sur wordpress et que je ne connais pas très bien bootstrap ( je débute alors je fais plus de CSS et HTML pour l'instant ).
Après, wordpress rajoute déjà plein de balises et class de son cru, alors je préfère en rajouter le moins possible pour m'y retrouver

Merci quand même, je ferais ça à l'avenir si je ne suis pas sous wordpress.

P.S: effectivement , je ne suis pas sur le bon forum, mais j'ai toujours tendance à croire que si ça marche pas , c'est la faute de Wordpress plutôt que la mienne...

[darkstar123456]

Bonjour,

J'ai dit que les noms des classes étaient inspirés par Bootstrap mais j'ai écrit toute la CSS nécessaire donc pas de connaissances supplémentaires à avoir ;-)
Flexbox est une fonctionnalité des navigateurs et non pas de Bootstrap

Et vu que le CSS autant que l'HTML est rédigé par toi, ce n'est pas la faute de Wordpress :p

Cependant, certains plugins viennent avec leur propre CSS qu'il est parfois plus simple de désactiver plutôt que d'écrire par dessus

[laurentSc]

Bonjour,
faisant une recherche sur les post grid de wordpress, je suis tombé sur cette discussion. darkstar123456, j'ai vu ton codepen avec flex et en ai déduit que c'est une alternative aux post-grid, si jamais on ne les maitrise pas (ce qui est mon cas). Exact ?

De plus, ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.row > .col,
.row > class*=col- {
  padding-left: 15px;
  padding-right: 15px;
}

1- selon moi, il ne sert à rien
2- je ne le comprends pas : à quelles classes s'applique-t-il ?