Ja, det var tydligen massor av folk som ville veta hur man gör som jag fixade det nu, nämligen bubblor runt varje kommentar. Jag ska försöka förklara på ett bra sätt.

Det första du ska göra, är att du ritar din egen bubbla, eller fyrkant. Det gör du med hjälp av photoshop eller nåt annat program.

Sen ska den delas upp i tre delar. Toppen, mitten och botten.

Toppen

Mitten

Botten

Tänk på att göra toppen så hög att du kan få in rubriken där. Sen ska mitten inte vara för hög, den kan vara några pixlar hög egentligen, för den kommer att upprepas neråt.
Botten skall vara så hög att länken till kommentarsidan, datum och liknande får plats.

För att få in det hela på bloggen, gör du så här:

1. Ladda upp de tre bilderna på din blogg, se till att du har rätt storlek på dem med. Kopiera adressen till varje bild med, för adresserna skall läggas in i stilmallen sen.

2. Gå nu in i din stilmall.

designa din blogg guide design blogga bakgrundsbild lägga in

3. Leta upp koden .commentheader

Kolla om det finns en kodsnutt som heter background, annars så skall du lägga till det. Och om det finns background, kan du ersätta det med följande kod:

Det skall alltså se ut så här:

.commentheader{
background: #ffffff url(adressen till bilden på toppen) no-repeat;
osv…

Där det står adressen till bilden på toppen, där skall du lägga in adressen till toppbilden du laddade upp innan. Så här ser det ut hos mig:

4. Nästa steg är att göra samma sak för texten, och då är det mittenbilden du ska lägga in.

Leta upp koden i stilmallen som heter .commenttext

Lägg till eller ersätt background med följande kod:

Observera att det ska stå repeat-y istället för no-repeat på denna. Detta innebär att den repeterar bakgrundsbilden hela tiden, dvs så länge det är text.
Lägg in adressen till mittenbilden som du laddade upp innan där det står adressen till bilden i mitten.

Nu ska det alltså se ut så här:

.commenttext{
background: #ffffff url(adressen till bilden i mitten) repeat-y;
osv…

Hos mig ser det ut så här:

5. Nu är det sista biten kvar, nämligen botten.
Leta upp kodraden som heter .commentmeta

Gör precis samma sak med den, lägg till eller ersätt background med följande kod:

Det skall alltså se ut så här:

.commentmeta{
background: #ffffff url(adressen till bilden i botten) no-repeat;
osv…

Lägg även här till adressen till bilden som du laddade upp innan där det står adressen till bilden i botten.
Hos mig ser det ut på följande sätt:

6. Nu ska du ha fått dit alla tre bilder, men det återstår lite finjusteringar för att texten skall få plats.

Det du måste göra på alla tre kodställen (commentheader, commenttext och commentmeta) är följande:

Om det finns en kodrad som heter margin, ställ in den till 0px
Sen skall du lägga till padding, för att kunna skjuta texten i olika led.

padding-top
padding-bottom
padding-left
padding-right

Det funkar på så vis att om du ställer in t ex padding-left: 10px; då kommer texten skjutas in 10 pixlar från vänster. Om du ställer in padding-top: 10px; så kommer texten att skjutas ner 10 pixlar.

Hos mig, så ser det ut på följande sätt (i commenttext):

Om det är så att du inte får in hela din bild på commentheader, så måste du lägga till kodraden height: Xpx;
Då väljer du att ställa in en fast höjd på det elementet. Så här ser det ut hos mig:

Man måste alltså hålla på att finjustera lite och pilla lite smått, men det är bara att testa er fram.

Lycka till!

Om Lari

Lari Salminen har skrivit 877 inlägg.

Grundare av Designa Din Blogg. Jobbar heltid som brandman på Medelpads Räddningstjänstförbund och driver den här sidan på fritiden som en hobby.