Ny profilbild
Den profilbilden som är just nu är den som blir när blogg.se inte har någon bild på dig. Men jag tänkte lägga upp en egen bild. Jag kan alltid lägga upp en bild på mitt konto, men om jag gör på det här sättet kan jag ha en större bild om jag vill.
Följande redigeras i kodmallen
klistra in de här koden:
<img class="image" src="http://bildadressen.se" alt="det du vill" width="bilden bredd" height="bildenshöjd" />
istället för:
<a href="${AppUrl}index.bd?fa=pf.view&pf_id=${ProfileID}"><img class="thumbnail" src="${AppUrl}shared/img/profiles/${ProfileImage}" alt="Min profilbild" /></a>
EXEMPEL
Ändra på de olika texterna
Nu ska jag ändra på de olika rubrikerna, länkarna osv. Men eftersom det är rätt så många så kan jag ju inte göra en bild för varje, utan jag visar de olika sakerna man kan ändra och berättar vad de olika koderna står för istället.
Här är några exempel på vad som kan ändras
font-family: verdana, arial, sans-serif;
Vilken font man använder, om inte den första finns så används den andra osv
font-size: 10px;
Text storlek
font-weight: bold;
Med denna kod blir texten fet
text-transform: uppercase;
Med denna kod används bara STORA bokstäver
color: #FFF;
text färgen
margin-top:4px;
margin-bottom:0px;
margin-left: 0px;
marginalerna
padding:0px;
Utfyllnaden
Här är exempel på olika texter på sidan och vad de heter i stilmallen
.entrybody
texten i inläggen, jag använder geneva
h3
inläggsrubrikerna
.navheader
rubrikerna i sidomenyn
.nav a
länkarna i sidomenyn
.commentheader
rubrikerna i kommentarerna
.commenttext
texten i kommentarerna
.commentmeta a
länkarna i kommentarerna
a
länkarna i texten
.entrymeta
datum och tid under inlägget
.entrymeta a
länkarna under inläggen, kommentarer, trackbacks osv
OBS! Alla koder som har :hover efter sig är samma som det som står innan fast när man för musen över, tex .entrymeta a:hover
Ta bort den gamla Bloggdesign texten
Nu kommer vi för första gången att ändra någonting i Kodmallarna.
Gå in på kodmallar och leta upp följande text och ta bort den:
<h1><a href="${BlogUrl}">${BlogTitle}</a></h1> <h2>${BlogDescription}</h2>
GLÖM EJ ATT TA BORT KODEN I ALLA KODMALLAR UTOM XML-SYNDIKERING!
Klart
Ny header
Med tanke på att bakgrunden drar många ögon till sig så tänkte jag att headern kunde vara väldigt enkel.
1) Jag klistrar in koden för den nya headern och ändrar höjden så att den passar in med bilden.
2) KLART! Det var inte svårare än så.
Men som ni ser så står den gamla fula bloggdesign texten över. Det måste såklart ändras.
Steg för Steg, den nya bakgrunden
1) Jag klistrar in koden för den nya bakgrunden och ändrar dess positioning 
2) Jag ändrar bredden på wrappern
3) Jag ändrar bredden på content
4) Jag ändrar padding och bredd på side
5) Jag ändrar margin och padding på header
6) KLART
Mer avancerad bakgrund
Jag har nu bestämt att jag vill att min blogg ska ha den bakgrunden som Bild 1 har. Och då blir det genast lite mer komplicerat. Jag måste bla anpassa alla bloggens delars bredd för att passa in. Men jag ska göra mitt bäsra för att förklara.
En mer sammanhängande blogg!
Med min nya bloggdesign så vill jag inte ha så många olika färger. Sidomenyn ska till exempel vara i samma färg som det andra och jag vill inte ha en massa ramar. För att ändra det så gör jag så här:
Sidomenyn
Jag vill inte att min sidomeny ska vara orange, och eftersom det är färgen jag vill ändra så gör jag det i stilmallen. Där letar jag upp koden för sidomenyn (se bild 1) och när jag ändå håller på så tar jag bort ramen också. Efter: bild 2 och 3
Men efter att jag gjorde det så synns ju inte texten i menyn, för tillfället så ska vi ignorera det. Men senare så kommer det självklart att fixas.
Resten av Ramarna
Nu ska jag ta bort de andra ramarna, de som är till header och själva innehållet. Se bild 1 och 2. Efter: bild 3, 4 och 5
Bakgrund
Det första vi ska göra är att göra om bakgrunden. Som det är nu så har vi en färgkod som bakgrund (Se bild 1). Men om du vill så kan du även lägga in en bild. Då klistrar du bara in:
url(http://bildadressen.se)
Efter det som redan står (Se bild 2), och får då ett helt annat resultat! (Se bild 3)
Men just nu så ska jag bara ha en röd/rosa bakgrund (se bild 4), vi kan göra fler ändringar på den senare.
url(http://bildadressen.se)
Efter det som redan står (Se bild 2), och får då ett helt annat resultat! (Se bild 3)
Men just nu så ska jag bara ha en röd/rosa bakgrund (se bild 4), vi kan göra fler ändringar på den senare.
Du har bestämt dig för att börja designa...
Som jag har sagt innan så måste man ju absolut inte designa sin blogg. På bild 1 här nedan så har jag valt det som iallafall jag tycker är den snyggaste stimallen som Blogg.se erbjuder, och visst skulle jag kunna ha kvar bloggen så. Men nu har jag alltså bestämt att jag vill göra någonting eget och ska börja min resa mot min alldeles egna bloggdesign. Som jag har sagt tidigare så redigera bloggen i Stilmmalen och Kodmallarna, för att redigera Stilmallen så klickar du på design och sen Redigera Stilmallen och klicka på Kodmallar för att redigera dem (bild 2).
Varför designa sin blogg?
Man kan ju klart välja en av blogg.se´s stilmallar (bild här under). Men jag tycker att det kan vara mycker roligare att göra någonting själv. Då får man ju någonting som ingen annan har och man kan känna sig stolt för att man har gjort någonting själv.
Välkomen
Det här är alltså mitt blockarbete, här ska jag visa hur jag gör när jag gör om min bloggdesign här på blogg.se och göra mitt bästa för att förklara.
Jag kommer att använda Photoshop Elements 4.0 för att göra mina bilder. Jag tycker att det är det lättaste sättet. Man kan klart använda andra program eller andra versioner av Photoshop, t.ex CS-versionerna. Men jag tycker att Elements har allt som man behöver.
