Fick en önskan från Isabell om en förklaring på hur man fixar runda kanter i sin bloggdesign! Och som den goda människa jag är ställer jag självklart upp :}

Det finns minst två olika varianter av detta, båda med för och nackdelar.
Den första är helt kodbaserad, relativt enkel men syns tyvärr inte i alla webbläsare, bl.a. inte i Internet explorer (som ingen borde ha för övrigt, men min arm sträcker sig tyvärr inte såpass långt att jag kan påverka varenda en).

Den andra är att man helt enkelt skapar bildfiler i photoshop som man med lite trix lägger in i sin design. En metod som är ganska tidskrävande och mycket krångligare men som fungerar i alla webbläsare. (Det är dock inte säkert att man kan få det att fungera ordentligt med sammanfogandet av bildfilerna i andra webbläsare än den man designar för).

Jag börjar kort och gott med den enklare varianten.

Oavsett vilken del av sin blogg som ska ha runda kanter är det följande kodsnutt man ska klistra in i sin Stilmall.


Där det nu står "15px" är det man ska ändra, det är dem som gäller i firefox.  Siffran bestämmer hur rund kanten blir. Ju högre tal desto mer rundning på kanten. Mellan 5 och 30 är bra skulle jag vilja påstå och det är bara att ändra på egen hand. Som ni ser står det även vilket hörn koden syftar på ("topleft", "bottomright" osv), vill man bara ha runda kanter på t.ex, bara översidan av något, sätter man 0px på "bottomleft" och "bottomright".

Var ska då denna kod placeras? Jo, det beror ju helt på vilken del eller vilken ruta i din blogg som ska ha runda hörn! Om vi kollar på min design har vi ju sidomenyn helt fristående och förutsatt att man inte har några komplicerade anordningar där räcker det att man sätter kodsnutten under #side i stillmallen, för att få runda kanter i sidomenyn. För att få det på delen där inläggen finns lägger man koden i #content.

Sen finns det ju lite andra anordningar, man kanske vill ha en bubbla runt varje inlägg eller göra en bubbla för varje del av sidomenyn osv, då måste man lägga till saker i själva kodmallen och hur man gör det i sidomenyn  har jag förklarat HÄR. Om man vill ha det så måste man bara se till att lägga runda-kanter-koden ihop med rätt sak i stilmallen, men det är lite mer komplicerat och om man inte är van vid att koda kan det vara lite krångligt.

I detta inlägg kommer jag inte gå igenom hur man gör runda kanter med hjälp av bildfiler, men det kommer säkert senare. Men ni vet väl att ni kan hitta det mesta på Designadinblogg.se!

Lycka till :)