gratis bloggdesign

När kommer det en ny gratismall?

Den här kommentaren kom in på sidan ”Önskemål – gratismallar” (under Webbdesign & tutorials). Om man läser igenom vad som just står på den sidan så finner man svaret, nämligen:

”Jag vill bara säga det att jag har ett jobb, jag håller på att starta upp ett företag inom webbdesign, jag har en 2 hundar och jag vill även ha fritid. Därav kan jag inte spotta ur mig gratismallar. Men så fort jag får tid över – då sätter jag mig ner och fibblar på det!”

När det gäller bilder i headern så finns det en liknande tutorial (under webbdesign & tutorials > besvarade frågor) om hur man sätter in det där, nämligen mellan <div id=”header”>HÄR</div> i varje kodmall. Det jag vill komma fram till är att om man gillar en gratis-design, men saknar en funktion i den, då är det bara att posta en fråga. Den besvaras nästa designdag. Det är omöjligt för mig att göra ca 5 olika versioner av en design – även fast jag skulle vilja göra det så räcker inte tiden till.

Jag vill att ni designintresserade ska lära er – inte få allt serverat på ett silverfat. Livet fungerar inte så. Det ska vara roligt att lära sig någonting och därav får ni en rivstart med hjälp av de gratismallar jag delar med mig utav :yes:

Psst, nästa gratismall är faktiskt påbörjad. Mer info under ”Önskemål – gratismallar”.

Bli först att gilla

En överraskning

Wiho. Jag håller på att fixa ihop en design för varje årstid [ nr 11 = vinterdesign ] och på tur var vårdesignen (kanske lite väl tidigt att lansera den). Man kan dock inte ladda ner den ännu då jag är för trött för att fixa med det nu…….men man kan tjuvkika. Jag kommer lägga upp designen imorgon så fort jag har tid (på förmiddagen). Bra avslut på en designdag va?

Nästa gratismall som du kan ladda ner kommer vara en med starka färger vilket önskas. Jag är dock ganska dålig på det. Ni som vill ha starka färger – vilken kombination vill ni ha? (Jag pausar årstids-designerna då jag tycker att det är på tok för tidigt sommar + höst -design)

Nu ska jag ta ut vovven Uniquie på en sista kiss och sen natta kudden. :love:

Bli först att gilla

Fråga: Byt bakgrund på sidomenyn (design 2)

Vi börjar med en lite förklaring av bilden ovan:

1 = en bakgrundsbild (http://gratisbloggdesigners.blogg.se/andra/images/2009/sidebarbg_43290572.jpg)  som sitter under #side i stilmallen. Den upprepas inte (no-repeat).

2 = detta är också bakgrund som kodas i stilmallen under #side. Summa sumarum: En bakgrundsbild längst upp och resten är vitt (#ffffff).

3 = detta är ingenting som finns i stilmallen. Eftersom det inte går att ha 2 bakgrunder är detta en vanlig bild (http://gratisbloggdesigners.blogg.se/andra/images/2009/sidebg2_43311550.jpg) som sitter längst ner i sidomenyn (<div id=”side”>). Vi kallar den botten-bild.

Så här gör du för att enbart byta färg på bakgrunden:

1 ). Spara ner denna bild: http://gratisbloggdesigners.blogg.se/andra/images/2009/sidebarbg_43290572.jpg och redigera den till den färgen du vill ha. Nu är den vit som du ser. Ladda upp den och kopiera bildadressen.

2 ). Gå in på design > redigera stilmall

3 ). Leta upp (ctrl + f): #side

4 ). Lägg in den nya bildadressen där under vid background (fet stil):

#side {
float: right;
width: 242px;
margin-top: 5px;
margin-right: 80px;
padding-top: 5px;
background: url(http://gratisbloggdesigners.blogg.se/andra/images/2009/sidebarbg_43290572.jpg) no-repeat;
}

5 ). Leta upp (ctrl + f): nav och byt ut färgkoden (fet stil) mot den nya färgen:

.nav {
background: #ffffff;
font-family: tahoma, arial;
font-size: 11px;
font-weight: normal;
color: #333333;
margin-right: 0px;
margin-left: 0px;
text-transform: none;
text-align: left;
}

6 ). Leta upp (ctrl + f): navheader och gör samma sak där, dvs lägg in den nya färgkoden:

.navheader {
background: #ffffff;
font-family: tahoma, arial;
font-size: 13px;
font-weight: normal;
font-weight:bold;
color: #a1a1a1;
width:232px;
padding-left: 10px;
margin-top:11px;
margin-right: 10px;
margin-left: 0px;
text-align: left;
text-transform: uppercase;
}

7 ). Spara stilmallen.

8 ). Spara hem den här bilden: http://gratisbloggdesigners.blogg.se/andra/images/2009/sidebg2_43311550.jpg och redigera den till den färgen du vill ha. Nu är den vit som du ser. Ladda upp den och kopiera bildadressen.

9 ). Gå in på design > kodmallar och leta upp (ctrl + f): http://gratisbloggdesigners.blogg.se/andra/images/2009/sidebg2_43311550.jpg. Den ska du byta ut mot den nya botten-bild-adressen som du precis laddat upp.

10 ). Spara kodmallen och glöm inte att göra detta i alla kodmallar dvs byta ut botten-bilden mot den nya adressen. Det ska alltså göras resterande kodmallar vilket är entry page, category page & archive page. Du hittar de olika sidorna genom att scrolla i dropdownen där det står ”Redigera:” i högra hörnet.

Så här gör du för att ha en bakgrund med mönster dvs ej enfärgad:

1 ). Spara ner denna bild: http://gratisbloggdesigners.blogg.se/andra/images/2009/sidebarbg_43290572.jpg och redigera den till en längre variant. Se exempel här: [ länk ] (du får använda exemplet) Ladda upp den nya bilden och kopiera bildadressen.

Obs! Gör helst en mönster-bakgrund som kan avslutas med vit botten-bild. Det är enklast.

2 ). Gå till design > redigera stilmall och leta upp (ctrl + f): #side

3 ). Byt ut bakgrunden mot den nya adressen (fet stil). Om jag skulle ta exempelbilden ovan skulle det se ut så här i stilmallen:

#side
float: right;
width: 242px;
margin-top: 5px;
margin-right: 80px;
padding-top: 5px;
background: url(http://gratisbloggdesigners.blogg.se/andra/images/2009/exempel_59070664.jpg) no-repeat;
}

4 ). Leta upp (ctrl + f) nav + navheader och byt ut bakgrunden (#ffffff) mot ”none”. Det skulle se ut så här i stilmallen:

.navheader {
background: none;
font-family: tahoma, arial;
font-size: 13px;
font-weight: normal;
font-weight:bold;
color: #a1a1a1;
width:232px;
padding-left: 10px;
margin-top:11px;
margin-right: 10px;
margin-left: 0px;
text-align: left;
text-transform: uppercase;
}

.nav {
background: none;
font-family: tahoma, arial;
font-size: 11px;
font-weight: normal;
color: #333333;
margin-right: 0px;
margin-left: 0px;
text-transform: none;
text-align: left;
}

5 ). Spara stilmallen. Om du nu har gjort en bakgrundsbild som passar ihop med ett vitt avslut (som exempelbilden som du hittar vid nr 1) så är du klar här. Annars går du in i kodmallarna och redigerar botten-bilden på samma sätt som jag har beskrivit under ”Så här gör du för att enbart byta färg på bakgrunden:” på nr 8, 9, 10.

Bli först att gilla

Rundade hörn vid rubriken (design 8)

Detta är en fortsättning på inlägget: Redigera inläggsrubriken ( design 8 )

Jag har tidigare förklarat hur man kan göra rundade hörn utan bilder här: [ länk ] Nu ska jag istället förklara hur man kan byta bakgrunden i inläggsrubriken (så att det blir rundade hörn) på design nr 8.

1 ). Gå in på design > redigera stilmall

2 ). Leta upp (ctrl + f): h3

3 ). Byt ut background:#b4035e; till:

4 ). Spara stilmallen.

Hjälpbild:

Bli först att gilla

Fråga: Redigera inläggsrubriken (design 8)

1 ). Gå ni på design > redigera stilmall

2 ). Leta upp (ctrl + f): h3. Där under ligger kodsnittet som du ska redigera. Titta på bilden nedan där jag förklarar vad som är vad.

3 ). Scrolla längst ner i stilmallen där du hittar kodavsinttet #tid. Det är det som ligger till höger i rubriken och personligen tycker jag att det ska vara i samma färg som rubriken. Titta på bilden för att hitta det du ska ändra på.

4 ). Förhandsgranska och spara stilmallen!

Bli först att gilla

Fråga: Ändra header + textstil (design 3)

Ändra headern:
Gör likadant som jag har beskrivit här: [ länk ]

Däremot finns det saker du bör tänka på när det gäller headern på design 3. Den är transparent till en viss del och därav måste headern vara i .png. Spara ner http://tescho.se/header3.png (som är headeradressen) och redigera det du vill i t ex photoshop. Headern är även 1070 px bred och blogg esse tillåter max 1000px bred. Därav måste du ladda upp bilden på annat ställe, t ex deviantart.

Redigera textstilen:
1 ). Gå in på design > redigera stilmall

2 ). Leta upp (ctrl + f): div#content div.entrybody

3 ). Följ instruktionerna på bilden. Om det är någon mer inställning du undrar över är det bara att kommentera.

4 ). Förhandsgranska + spara stilmallen.

Bli först att gilla

Fråga: Lägg till profilbild (design 8)

1 ). Ladda upp din bild (max 160px bred) som du vill ha som profilbild och kopiera bildadressen (instruktioner)

2 ). Gå in på design > kodmallar. Leta upp (ctrl + f): http://gratisbloggdesigners.blogg.se/attonde/images/2009/profilbild_57956457.jpg

3 ). Den länken är bildadressen som sitter där nu. Den ska du byta ut mot den nya som du kopierade när du laddade upp nya bilden.

4 ). Spara kodmallen och gör samma sak (byt ut gamla bildadressen mot nya) i resterande kodmallar dvs entry page, category page & archive page.

Bli först att gilla

Fråga: Positionera horisontella menyn (design 7)

1 ). Gå in på design > redigera stilmall

2 ). Leta upp (ctrl + f): #dropdown

Så här ser hela kodsnittet ut:
#dropdown {
padding-top:284px;
padding-left:10px;
}

3 ). Öka 284px – feta typsnttet (desto mer du ökar desto längre ner hamnar menyn & tvärtom)

4 ). Förhandsgranska resultatet för att se hur pass mycket du behöver lägga till. Spara stilmallen när du är nöjd!

Bli först att gilla

Gratis bloggdesign nr 8

Gratis mall nr 8 är uppladdad! Wiho. För att ladda hem den går du in här: [ länk ]

Haha, jag måste erkänna att jag är sämst på skrikiga färger. Jag har försökt i alla fall. Men kom ihåg, det går alltid att ändra på färgerna :yes:

Bli först att gilla

1 2 3 4  Till toppen