Designtips - Ändra utseende på länkar i inlägg
Tänkte att vi kör på ett till roligt designtips :). Som ni vet så kan man ändra utseende på sina länkar i sina inlägg och även i menyn och så vidare, men idag fokuserar vi på länkar i inlägg.
Börja med att öppna stilmallen och leta under stycket body { (det är det översta du ser på stilmallen).
Leta sedan upp stycket, ser olika ut i olika stilmallar, men det är a{ du ska leta efter. a{ är själva färgen och utseendet på länken när man inte har muspekaren över länken. a:hover{ är utseendet på länken när man har muspekaren över länken. Om det inte står med text-decoration:none; i din stilmall (kan även stå text-decoration;underline) så kan du lägga tll det, men kom ihåg att ha ; för att separera alla funktioner.
a {color: #ce6ee7;text-decoration:none;}
a:hover {color: #821993;text-decoration:none;
font-size: 14px;
font-weight: bold;
}
Om det står underline så betyder det att du har understreckade länkar, om du vill ta bort det skriv none istället.
Så då kan du börja med att ändra color till den färg du vill ha, det finns en färgkarta på Designa Din Blogg som du kan använda. Du kan även ta bort # och skriva white, black eller någon annan färg.
Om du vill ha en annan textstil på alla dina länkar lägg till kodraden font-style; och skriv den textstil du vill ha och sen ett; för att separera.
Font-weight är hur länken ska se ut, om du vill ha den i fetstil hela tiden, lägg till font-weight: bold;
Storleken kan ändras om du lägger till font-size; och sen den px du vill ha;
Jag har valt att bara göra detta på mina länkar när man har muspekaren över länknamnet.
Länk i inlägg:
a {color: #ce6ee7;text-decoration:none;
font-size: 12px;
font-weight: bold;
font-style; georgia;
}
Länk i inlägg när muspekaren är över den:
a:hover {color: #821993;text-decoration:none;
font-size: 14px;
font-weight: bold;
}
När du ändrar på a:hover så syns länken mer när man för muspekaren över den :). Superlätt och det är bara att testa sig fram, men kom ihåg att spara din stilmall i ett annat dokument ifall du råkar ta bort något som inte borde tas bort. Kom ihåg } i slutet på varje designstycke du ändrar.
Så här ser mina länkar ut!
Börja med att öppna stilmallen och leta under stycket body { (det är det översta du ser på stilmallen).
Leta sedan upp stycket, ser olika ut i olika stilmallar, men det är a{ du ska leta efter. a{ är själva färgen och utseendet på länken när man inte har muspekaren över länken. a:hover{ är utseendet på länken när man har muspekaren över länken. Om det inte står med text-decoration:none; i din stilmall (kan även stå text-decoration;underline) så kan du lägga tll det, men kom ihåg att ha ; för att separera alla funktioner.
a {color: #ce6ee7;text-decoration:none;}
a:hover {color: #821993;text-decoration:none;
font-size: 14px;
font-weight: bold;
}
Om det står underline så betyder det att du har understreckade länkar, om du vill ta bort det skriv none istället.
Så då kan du börja med att ändra color till den färg du vill ha, det finns en färgkarta på Designa Din Blogg som du kan använda. Du kan även ta bort # och skriva white, black eller någon annan färg.
Om du vill ha en annan textstil på alla dina länkar lägg till kodraden font-style; och skriv den textstil du vill ha och sen ett; för att separera.
Font-weight är hur länken ska se ut, om du vill ha den i fetstil hela tiden, lägg till font-weight: bold;
Storleken kan ändras om du lägger till font-size; och sen den px du vill ha;
Jag har valt att bara göra detta på mina länkar när man har muspekaren över länknamnet.
Länk i inlägg:
a {color: #ce6ee7;text-decoration:none;
font-size: 12px;
font-weight: bold;
font-style; georgia;
}
Länk i inlägg när muspekaren är över den:
a:hover {color: #821993;text-decoration:none;
font-size: 14px;
font-weight: bold;
}
När du ändrar på a:hover så syns länken mer när man för muspekaren över den :). Superlätt och det är bara att testa sig fram, men kom ihåg att spara din stilmall i ett annat dokument ifall du råkar ta bort något som inte borde tas bort. Kom ihåg } i slutet på varje designstycke du ändrar.
Så här ser mina länkar ut!
Tips för bloggdesign.
Jag hittade nyss en väldigt användbar funktion om man gillar runda hörn. Som ni ser så har jag numera runda hörn på bloggen :). Det är inte svårt! Hittade detta hos DesignaDinBlogg.se, otroligt användbar sida för dig som vill göra om på bloggen. På de ställen man vill ha rundade hörn. Till exempel #content är där blogginläggen är och #side är menyn :). Så prova på om du vill ha runda hörn!
Det enda man ska göra är att lägga in följande kod i slutet på till exempel #content och #side i stilmallen (där jag valt att ha runda hörn, det går ju såklart även få det på kommentarsrutorna, kom ihåg att ha kvar } i slutet där du ändrar, det är skiljetecken som måste vara kvar):
Det enda man ska göra är att lägga in följande kod i slutet på till exempel #content och #side i stilmallen (där jag valt att ha runda hörn, det går ju såklart även få det på kommentarsrutorna, kom ihåg att ha kvar } i slutet där du ändrar, det är skiljetecken som måste vara kvar):


Gäller t.o.m 31/3-13




















