In questo screencast entreremo nella creazione del modulo di commento in HTML / CSS. Il markup per il modulo di commento risiede nel file comments.php nel nostro tema. Cerchiamo l' elemento per trovarlo.
Disegniamo ciascuno dei tre input (nome, e-mail, url) utilizzando il sistema a griglia che abbiamo in atto. Ragazzo, ci siamo riusciti bene, eh?
Abbiamo già un file CSS esclusivamente per le cose relative ai commenti, quindi è lì che lavoreremo. La prima cosa che scriviamo è rendere gli input nella nostra piccola griglia larghi al 100% in modo che si adattino alla colonna. I div lo farebbero naturalmente, ma gli input si comportano più come inline-block e non riempiono automaticamente la larghezza dei contenitori principali. Giochiamo anche un po 'con l'area di testo principale rendendola larga al 100% e non alta come era. Decidiamo di non pasticciare con la capacità di ridimensionamento della textarea. Non rompe davvero nulla.
Quindi otteniamo il collegamento di risposta funzionante. JavaScript funziona già bene, perché non abbiamo modificato l'ID del modulo su cui si basa JavaScript. Tuttavia, dobbiamo apportare un sacco di modifiche, come dare al modulo uno sfondo grigio in modo che il design funzioni.
Passiamo il resto del tempo a modificare alcune cose con le query multimediali in modo che il modulo appaia OK su schermi piccoli.