# 110: Photoshopping kommentar tråd - CSS-tricks

Anonim

Vi begynder at grave i Photoshop her og designe kommentarområdet. Vi starter øverst, hvilket betyder de enkelte kommentarer selv (i modsætning til kommentarformularen).

Vi hænger en avatar at arbejde med. Vi bruger helt sikkert Gravatar-tjenesten, da det er skræddersyet til dette og integreret perfekt i WordPress. Ud over det er jeg en stor fan af avatarer og den følelse af personlig ejerskab, de giver dig på et websted.

Noget af dette design falder bare let på plads. Vi bruger en hvid kasse på grå som alle moduler på webstedet. Vi plopper i avataren. Vi gør navnet til et link og bruger det link blå, vi har brugt overalt. Vi indsætter datoen for kommentaren ved hjælp af den samme styling, som alle datoer på webstedet har. Hele tiden forbliver vi så organiserede som vi kan i Photoshop.

For svar på kommentarer indrykker vi kommentaren nedenfor en smule og forsøger at være på linje med det undergitter, vi har oprettet. Vi har også brug for et link til kommentarer på øverste niveau, hvor vi kan oprette disse svar, så vi placerer et link øverst til højre for disse kommentarer. Samme link-blå som altid. Vi bruger en pil fra vores Entypo-ikon sæt - kun der var ikke den perfekte pil der, vi var nødt til at vælge en, der var tæt og dreje den 180 grader. Det burde ikke være noget problem i CSS.

For at gøre det klart, at datoen for kommentaren også er en permalink, bruger vi også et ikon til det.

Vi leger med, hvor "funktionalitets" -linkene skal gå, men dvæler ikke ved det for længe. De eneste mennesker, der nogensinde vil se dem, er mig. For ordens skyld er dette, hvad jeg endte med at gå med.