Det lättaste man kan göra är att förminska headern och flytta upp sidomenyn. Det man ska göra är följande:
- göra om headern (förkorta bakgrundsbilden) { hur man redigerar en befintlig headerbild }
- ta bort bakgrundsfärgen under #header i stilmallen { exempelbild }
- flytta upp sidomenyn { hur man flyttar upp sidomenyn }
Hjälpbild:
1 ). Gå till design > redigera stilmall och leta upp (ctrl + f): #header
2 ). Ersätt bakgrundsadressen (vid background) mot koden i boxen nedan:
Så här kommer resultatet se ut (det markerade har vi bytt ut mot koden ovan):
3 ). Gå längre ner i stilmallen till side & content. Redigera avsnittet float vid båda kodavsnitten dvs byta ut float:left; till float:right; och tvärtom. Se hjälpbild nedan:
4 ). Förhandsgranska och se om du har gjort rätt. Spara stilmallen.
1 ). Det finns en kod för transparent bakgrund men jag rekommenderar istället att man gör en transparent bakgrundsbild. Läs mer om det här: [ länk ]
2 ). Jag har tyvärr inte tid att hjälpa ”privat”. Det du ska göra är att radera allt från <div id="side"> till näst sista </div>. Hjälpbild:
3 ). När det gäller blogg.se så kan man ha en blogg som startsida och sen en underblogg som blogg. Jag har skrivit om detta och det går att finna under webbdesign & tutorials > besvarade frågor (guide om underbloggar och dess funktion).
1 ). Först måste man redigera headern. Hämta hem den genom att gå in på design > redigera stilmall och leta upp (ctrl + f): header. Vid background finns en bildadress (som börjar med http://…) den kopierar du och öppnar ett nytt fönster + klistra in och tryck enter. Du ser nu headerbilden. Högerklicka på den och spara den på din dator. Öppna den sen i valfritt bildprogram och radera rutan samt den yttersta början av sidomenyn [ hjälpbild ] Glöm inte att spara den i .png-format. Ladda sen upp den ”nya” headerbilden och kopiera bildadressen.
OBS! Kom ihåg att du inte får ändra storleken på headerbilden. Du ska alltså inte förminska den när du redigerar den. Blogg.se tillåter endast headers som är max 1000px breda så du måste ladda upp denna header på ett annat ställe. Info om det finns under webbdesign & tutorials > besvarade frågor.
2 ). Gå in på design > redigera stilmall
3 ). Leta upp (ctrl + f): header och byt ut den tidigare bildadressen mot den nya. Det jag har markerat här nedan ska bytas ut:
4 ). Spara stilmallen och gå till design > kodmallar.
5 ). Eftersom du inte vill ha rutan antar jag att info-texten ska bort. Följ därför dessa instruktioner (hoppa till nr 7 om du vill ha kvar info): Leta upp (ctrl + f): meny
6 ). Ta bort det jag har markerat här nedan:
7 ). Leta upp (ctrl + f): side2 och ta bort allting jag har markerat här nedan:
8 ). Spara kodmallen ”framsida” (som du är inne på) och gör samma sak i resterande kodmallar [ hjälpbild ]
1 ). Gå in på design > redigera stilmall
2 ). Leta upp (ctrl + f): side
3 ). Lägg in den här koden precis under #side {
KODFÖRKLARING:
1px = tjockleken på ramen. Byt ut 1 till större tal om du vill ha tjockare.
solid = utseendet på ramen. Byt ut solid mot dashed, dotted eller annat om du vill ha annat utseende på ramen.
#000000 = färgkoden (byt ut mot annan färgkod om du inte vill ha svart.
4 ). Leta upp (ctrl + f): content (runt alla inlägg) eller entrybody (runt varje enskilt inlägg) och lägg in samma kod direkt under precis som punkt nr 3.
5 ). Förhandsgranska och spara sen stilmallen om du är nöjd.
Som ni ser så har denna tjej skrivit kommentar om och om igen om hur man separerar sidomeny från inläggen. Jag passar på att säga att det hjälper inte att posta frågan om och om igen. Jag kontaktar er när frågan är besvarad. Om ni tjatar så blir det bara tröttsamt för mig, vilket inte alls ska vara meningen med designdagar. Det ska vara roligt att lära och lära ut. Mitt tips: Om ni vill att jag ska fortsätta med detta – sluta tjata. Alla frågor besvaras vid nästa designdag-tillfälle.
1 ). Gå in på design > redigera stilmall
2 ). Leta upp (ctrl + f): wrapper och ta bort det jag har markerat här nedan:
3 ). Leta upp (ctrl + f): side och lägg till koden nedan ovanför ”float: left;”
4 ). Leta upp (ctrl + f): content och lägg in koden ovan (background-koden) ovanför ”overflow: hidden;” och redigera margin. Så här ska det se ut:
5 ). Leta upp (ctrl + f): entrybody och redigera padding (ta bort och skriv likadant som på bilden nedan):
6 ). Förhandsgranska och se om du har gjort rätt. Spara sen stilmallen.
Obs! Om man vill ha mindre mellanrum kan man öka bredden på content. Öka i så fall det jag har markerat (byt 600 till högre tal) lika mycket på båda.
Jag rekommenderar att man sätter in dessa koder [ länk till ett inlägg ]
De koderna ger en sidomeny på vardera sida. Sen kan man ta bort den högra sidomenyn. Följ instruktioner nedan ang hur man tar bort den högra menyn:
1 ). Gå in på design > kodmallar
2 ). Ta bort det jag har markerat med rött i varje kodmall.
3 ). Spara kodmallen och ta bort samma stycke i resterande kodmallar (entry page, category page & archive page).
4 ). Sen kan du gå tillbaka och redigera innehållet som finns under ”sidomeny1″ i varje kodmall. Du ska alltså ändra byta ut ”Sidomeny nr 1″ & ”Valfritt innehåll, t ex text, bilder m.m.” till det du vill ha det.
5 ). Spara kodmallen och gör samma redigering i resterande kodmallar (entry page, category page & archive page).
Tack så jättemycket. Det gör mig glad :)
Svar på fråga 1:
Det handlar om att positionera sidomenyn. Antingen kan kan flytta upp den, vilket jag har förklarat här: [ länk ]
Man kan även göra hälften i headern och resten i sidomenyn, dvs att man gör så att en del av headerbilden är som en sidomeny som ligger ovanför sidomenyn (som jag har).
Svar på fråga 2:
Man gör bakgrundsbilder och positionerar dem. Jag har gjort ett inlägg ang padding & margin (positionering) samt ett inlägg där jag samlat vad som betyder vad i stilmallen. Du ska alltså positionera bakgrundsbilderna i stilmallen.
När man flyttar upp sidomenyn lägger den sig över headern. Tänk på detta när du ska göra en headerbakgrund.
1 ). Gå in på design > redigera kodmall
2 ). Leta upp (ctrl + f): side
3 ). Om det finns en margin-kod tar du bort den och lägger till denna:
4 ). Redigera talet -300 till det du vill ha. Desto större tal desto längre upp hamnar sidomenyn.
5 ). Förhandsgranska och spara stilmallen.
