Att ändra färg och storlek på rubrikerna
2007-10-17kl:15:43:54 | Kategori: Design Guide
Bläddra ned tills du hittar detta stycke;
/** Entry headers **/
h3 {
font-family: arial, verdana, sans-serif;
font-size: 14px;
font-weight: medium;
color: #CBCBCB;
background:#CBCBCB;
padding:14px 10px 10px 75px;
margin: 0px 0px 10px;
height: 14px;
vertical-align: top;
}
?1) Storlek
Det jag markerar med fetstil motsvarar storleken, ändra detta för att ändra storlek.
/** Entry headers **/
h3 {
font-family: arial, verdana, sans-serif;
font-size: 14px;
font-weight: medium;
color: #CBCBCB;
background:#CBCBCB;
padding:14px 10px 10px 75px;
margin: 0px 0px 10px;
height: 14px;
vertical-align: top;
}
?2) Färg på rubrik
Det jag markerat med fetstil motsvarar färgen på rubriken, leta upp en färgkod och klistra in den, för att ändra färg.
/** Entry headers **/
h3 {
font-family: arial, verdana, sans-serif;
font-size: 14px;
font-weight: medium;
color: #CBCBCB;
background:#FFFFFF;
padding:14px 10px 10px 75px;
margin: 0px 0px 10px;
height: 14px;
vertical-align: top;
}
Den text jag markerat med fetstil motsvarar rubrikens bakgrundsfärg, leta upp en färgkod och klistra in den istället, för att ändra färg.
/** Entry headers **/
h3 {
font-family: arial, verdana, sans-serif;
font-size: 14px;
font-weight: medium;
color: #CBCBCB;
background:#FFFFFF;
padding:14px 10px 10px 75px;
margin: 0px 0px 10px;
height: 14px;
vertical-align: top;
}
Att ladda upp en header
2007-10-15kl:20:37:19 | Kategori: Design Guide
- Skapa ett nytt inlägg och lägg upp den bild du vill ha som header.
- Klicka på HTML rutan och kopiera texten
Gå in på Design, sedan redigera stilmall.
Bläddra ned tills du ser detta och byt ut de jag markerat med fetstil mot det du just kopierade
#header {
background: #000000 url(http://static.blogg.se/shared/img/css/orangecity_top.jpg) no-repeat left top;
margin: 0px;
padding: 37px 0px 0px 100px;
height: 90px;
text-align: left;
border-top: 0px none;
border-right: 5px solid #000000;
border-bottom: 5px solid #000000;
border-left: 5px solid #000000;
b) Är headern för stor för rutan?
Det är enkelt att ändra storlek på rutan som din header hamnar i, gör såhär;
Siffrorna i fetstil motsvarar höjden på din header, ändra den efter storleken du vill ha.
#header {
background: #000000 url(http://static.blogg.se/shared/img/css/orangecity_top.jpg) no-repeat left top;
margin: 0px;
padding: 37px 0px 0px 100px;
height: 90px;
text-align: left;
border-top: 0px none;
border-right: 5px solid #000000;
border-bottom: 5px solid #000000;
border-left: 5px solid #000000;
Förhandsvisa och spara!
Att ladda upp en bakgrund.
2007-10-15kl:10:43:40 | Kategori: Design Guide
Klicka in på design och välj sedan "redigera stilmall"
body {
background: #F5DFB1;
margin:0;
padding:0px 0 14px;
text-align:center;
color:#000000;
Den kod som är markerad med fet stil är koden som beskriver färgen. Färgkoder kan du bl.a hitta i photoshop eller på denna sidan.
Förhandsvisa och spara om färgen blir bra.
Börja med att välja en bakgrund (sök på google.se eller designa din egen i exempelvis photoshop)
a) Har du designat en egen bakgrund eller bara har bilden sparad på din dator, gör såhär;
?- Skapa ett nytt inlägg
?- Ladda upp bilden i sin naturliga storlek
?- Öppna HTML-rutan och kopiera koden för bilden
body {
background: #F5DFB1 <img class="image" src="http://lindablom.blogg.se/princess/images/bakgrund0436_1192436592.jpg" alt="image12" />;
margin:0;
padding:0px 0 14px;
text-align:center;
color:#000000;
body {
background: #F5DFB1 url(<img class="image" src="http://lindablom.blogg.se/princess/images/bakgrund0436_1192436592.jpg" alt="image12" />);
body {
background: #F5DFB1 url(<img class="image" src="http://lindablom.blogg.se/princess/images/bakgrund0436_1192436592.jpg" alt="image12" />);
margin:0;
padding:0px 0 14px;
text-align:center;
color:#000000;
Förhandsvisa och spara om det stammer.
b) Har du hittat en länk på Internet
Klistra in länken till bilden på samma sätt som ovan, dock behöver du inte spara den.
Att påbörja sig personliga design
2007-10-15kl:10:07:55 | Kategori: Design Guide
Det du bör göra först och främst är att välja en av de färdiga designerna som utgångspunkt.
Vilket upplägg passar dina idéer bäst?
Jag kommer bygga denna design guide med "Orange City" som utgångsläge.
Nu kör vi!
2007-10-15kl:10:02:22 | Kategori: Design Guide
Nu börjar jag med design guiden! Skall försöka göra den så enkel som möjligt! : )
