Design skola med Bilja Del 3







Nu ska vi göra en ram runt menyn, jag vill ha en svart ram eftersom jag kommer ha en vit meny.
Så nu gäller det att tänka vad ni vill ha för färger.

Hur får man upp koder för en färg? Detta måste ni kunna!




Nu går vi in i stilmall

Letar upp #side {


Klistra in så det ser ut så här

#side {
float: left;
width: 160px;
margin: 0px;
padding: 24px 18px 0px 12px;
left:-30px;
border-right-width: 6px;
border-right-style: solid;
border-right-color: #f4cee3;
border-bottom: 2px solid #000000;
     
border-left: 2px solid #000000;
border-right: 2px solid #000000;
}

Här stoppar du vilken färg du vill ha på ramen & bred

2px solid betyder att jag vill ha ramen 2px bred & #000000 betyder att jag vill ha den svart.  Här kan ni ändra färgen till den färg ni vill ha. Men behåll 2px för annars kommer inte min mall till headern passa i hop med menyn.

Så, har ni en ram runt menyn nu? Dock ska det inte vara någon överst. Den gör vi i headern.

Bra!

Nu ska vi gå in och ändra i #wrapper { så det ser ut så här

#wrapper {
clear:none;
margin: 0px auto;
padding: 0px;
width: 830px;
background-color: #FFFFFF;
}

Nu ser min design ut så här! www.biljaochtessisen.blogg.se/designskola ser eran samma ut!? Bra!


//Bilja

Design skola med Bilja Del 2




Ja nu är det dags för del 2! Vi kör i gång med bakgrund



Gå in på Design och Alternativ redigera din befintliga stilmall.

Då får vi upp massa koder.

Leta upp detta!

#wrapper {
clear:none;
margin: 30px auto;
padding: 20px;
width: 830px;
background-color: #FFFFFF;

wrapper står för bakgrund, det vi egentligen ska göra här är bara att ta en titt hur bred bloggen är 830px fint! då vet vi det.

Nu är det dags att hitta en bakgrund ni vill ha. så här ser den ut som jag kommer använda. http://biljaochtessisen.blogg.se/designskola/images/2010/paper_68954875.jpg Ni får gärna använda samma om ni vill bara höger klicka och spara.

Det viktiga för mig är att den måste vara mer än 830px eftersom jag vill köra samma stuk som det är på min & Tessisens vanliga blogg. Min bakgrund är 930px. Du kan öppna upp en bild i photoshop, höger klicka och välja image size för att ta reda på hur stor din bild/bakgrund är.

Om du bara vill ha en vanlig bakgrund, som ska vara över hela bakgrunden på bloggen så behöver du bara tänka på att mönstret måste kunna upprepas utan att det ser ful ut. Alltså inget som går över någon kant (om det nu inte är exakt samma i alla kantar. För då kommer det passa in av sig själv.)


Nu ska vi ladda upp en bild, så här gör du.


Nu kommer du få upp en liten bild. Klicka på den tills den är lika stor som min! Tror det behövs två klick =)


Adressen till din bild kommer du behöva! kopiera den.


Nu gjorde jag min bakgrund i 4 lika färger som ni får använda om ni vill.


Blå/lila
rosa
Grön/blå
blå/grå

Glöm inte klicka på bilden en gång så dn blir stor innan du sparar

Som sagt kopiera adressen till din bild och gå sen in i stilmall





Sen ska vi lägga till en kod under background

background-repeat: repeat-y ;
background-position: center center;
background-attachment: fixed;


Så här ska det se ut

body {
margin: 0px;
padding:0px;
background: #FFFFFF url(adressen till din bild);
background-repeat: repeat-y ;
background-position: center center;
background-attachment: fixed;
}

De här betyder det!

body {
margin: 0px; Margin & padding står för "typ" mellan rum
padding:0px;
background: #FFFFFF url(adressen till din bild);
background-repeat: repeat-y ; repeat y betyder ett bilden upprepas nedåt
background-position: center center;  Detta betyder att vi vill ha bilden i mitten
background-attachment: fixed; Detta betyder att bilden sitter fast
}

Klicka på spara och kolla in om det ser ut samma för dig som mig.

www.biljaochtessisen.blogg.se/designskola

Lämna gärna en kommentar när ni gjort detta så jag inte börjar med del 3 för fort!



Lär dig göra en snygg design! Design skola del1



Nu ska vi lära oss att göra en snygg design, steg för steg. Jag kommer ta lite gran i varje del. Men du behöver absolut inte vara ett photoshop proffs men du måste kunna lite enkla grejer. Resten tar jag upp! =) Jag gjorde en kategori just för detta så det är lätt att gå tillbaka och titta på alla delar. Design skola med Bilja!

Jag hoppas det är många som vill vara med och självklart vill jag se era snygga designer när vi är klara! =)


Då börjar vi!



Logga in på din blogg och skapa en ny blogg.



välj tema Fashion

Så här ser min test blogg ut! http://biljaochtessisen.blogg.se/designskola 
Ser eran samma ut!? BRA!

Då kan ni börja fundera vad ni vill ha för bilder färger m.m tills det är dags för del 2!

Lämna gärna en kommentar om ni tänker hänga med i Design skola med Bilja vad ni tycker om iden, bra dålig ovs!

Hugs



RSS 2.0