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

Anonim

Vi börjar gräva i Photoshop här och utforma kommentarområdet. Vi börjar högst upp, vilket betyder att de enskilda kommentarerna själva (i motsats till kommentarformuläret).

Vi hakar på en avatar att arbeta med. Vi kommer säkert att använda Gravatar-tjänsten, eftersom den är skräddarsydd för detta och integreras perfekt i WordPress. Utöver det är jag ett stort fan av avatarer och känslan av personligt ägande som de ger dig på en webbplats.

En del av denna design faller enkelt på plats. Vi använder en vit ruta på grå som alla moduler på webbplatsen. Vi ploppar i avataren. Vi gör namnet till en länk och använder länken blå vi har använt överallt. Vi lägger in datumet för kommentaren med samma styling som alla datum på webbplatsen har. Under hela tiden håller vi oss så organiserade som möjligt i Photoshop.

För svar på kommentarer, drar vi in ​​kommentaren nedan lite och försöker hålla oss uppradade med det undernät vi har skapat. Vi behöver också en länk på toppnivå kommentarer för att skapa dessa svar, så vi placerar en länk uppe till höger om dessa kommentarer. Samma länkblå som alltid. Vi använder en pil från vår Entypo-ikonuppsättning - bara det var inte den perfekta pilen där, vi var tvungna att välja en som var nära och rotera den 180 grader. Det borde inte vara något problem i CSS.

För att klargöra att datumet för kommentaren också är en permalänk använder vi också en ikon för det.

Vi leker med var "funktionalitet" -länkarna ska gå, men dröjer inte länge med det. De enda som någonsin kommer att se dem är jag. För ordens skull är det här jag slutade med.