Att ändra färg och storlek på rubrikerna

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;

}



3) Ändra färg på bakgrund


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;

}

13

Att ladda upp en header

a) Ladda upp en bild

- Skapa ett nytt inlägg och lägg upp den bild du vill ha som header.

- Klicka på HTML rutan och kopiera texten

image202



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;

image208



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!

36

Att ladda upp en bakgrund.

Klicka in på design och välj sedan "redigera stilmall"



Del 1. Ändra färg på bakgrund


Leta upp en den del i stilmallen som ser ut såhär(brukar vara överst/högt upp i stilmallen;


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.





Del 2 Lägg till en bakgrund

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


image202



Klistra in länken såhär, (den feta texten är länken);



 

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;


Men för att länken skall fungera måste du även lägga till detta ( markerat med fetstil);


body {

background: #F5DFB1 url(<img class="image" src="http://lindablom.blogg.se/princess/images/bakgrund0436_1192436592.jpg" alt="image12" />);



I färdigt resultat skall det alltså se ut såhär:


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.

14
Powered by Jasper Roberts - Blog