Bunnyland

It's not your deeds that make you strong. It's your mind.

Hur du gör en Howrselayout

Innan jag börjar med det här inlägget vill jag säga att jag är bortrest (Frankrike) just nu och kommer antagligen bli aktiv när jag kommer hem. Sen vill jag också säga att det här är hur jag gör detta. Det finns flera sätt att göra det men såhär gör jag, och det finns folk som är mycket bättre på det här än mig. Jag är inte i något samarbete med sidorna jag rekommenderar. Det var The Book Of Howrse som lärde mig hur man gör!

Hur du gör en Howrselayout: Du som spelar Howrse vet nog att du har en presentation, och du kanske har sett att vissa har speciella layouts, alltså inte bara har skrivit vanligt utan har en bakgrundsbild, spalter osv. Jag trodde det skulle vara fullkomligt omöjligt att göra en sådan, men typ igår upptäckte jag att det inte är så himla svårt. Det finns fortfarande saker jag inte riktigt förstår, men jag får väl lära mig. Om du vill ha en layout kan du gå in här eller skicka PM till Stuteri Shetland på Howrse.
 
Steg 1: Hitta och sätt text på bilden. Ta ett foto, skapa en bild eller ta en från exempelvis Pixabay (se till så att du faktiskt får använda bilden). Sen vill du kanske fixa lite fin text där det t ex står ditt Howrse-namn eller "Välkommen" och så kanske du vill ha olika spalter att skriva i. Jag använder Ribbet, det är gratis (finns Premium) och jag tycker det är bra. Så om vi låtsas nu att du ska göra layouten på bilden nedan (det är min layout, ni får inte ta den) så började jag med att sätta in bilden. Sen skrev jag mitt Howrse-namn, fixade stil och färg osv. Jag skrev "Om mig", "Till salu" "Centret" och "Affix" och satte dem där jag ville ha dem.
Steg 2: Fortsätt redigera bilden. Jag satte lite stjärnor runt rubrikerna bara för att jag kände för det. Sen tog jag fram en rektangel (det finns en stickerfunktion i Ribbet som jag fick rektanglarna och stjärnorna ifrån) och la den under den första rubriken. Jag gjorde det på alla, satte lite färg och fade (du kommer antagligen se när du gör det), och sen ville jag skilja på dem. Så jag tog rektanglar igen men gjorde de mycket smalare, ändrade färg och satte dem som ramar runt spalterna, som du ser på bilden. Så gjorde jag i alla fall, men det finns ju fler saker man kan ändra.

Steg 3: Fixa en direktlänk. För att få in bilden i din HTML-kod behöver du ha en direktlänk. För att få den använde jag Tinypic, vilket är väldigt snabbt och enkelt, men igen så finns det ju fler program. Kopiera direktlänken och i nästa steg ska jag visa vad du ska göra med den.

Steg 4: Gör HTML-koden. Det här är det som jag trodde var sjukt svårt först, för det ser så komplicerat ut! Men man lär sig. Jag använde den här sidan för att fixa koden. Om du använder den, ta bort det som redan står där. Sen börjar vi koda, jag hjälper dig. Om du vill kolla hur det ser ut, klicka på "Display" så visas layouten. Du kan fortsätta ändra koden även efter det. Nu så visar jag vad du kan skriva. Det som är rött ska du ändra till din direktlänk, din färg osv.

<div style="background: url('direktlänk'); width: bredd; height: höjd;">
Bredden och höjden ska vara i pixlar och du ska skriva px efter. Till exempel om bredden är 1550 pixlar och höjden är 1100 så ska du skriva 1550px och 1100px. Sen går du ner ett steg (tryck på enter) och börja göra första textspalten. Om du bara har en textspalt ska du bara göra en, om du har fler kopierar du samma sak och klistrar in efter.

<div style="width: bredd; height: höjd; overflow: auto; text-align: left, right eller center; margin-top: avstånd till toppen; margin-left: avstånd till högerkanten; float: left;">
Bredd, höjd och avstånd ska vara i pixlar även här. Det kan ta ett tag innan du får bredden, höjden, avståndet och allt rätt, så fortsätt bara prova. Gå ner ett steg till.

<font color="textfärg" size="storlek" face="teckensnitt">
Textfärgen kan vara något så enkelt som "black", "white", "blue" osv, eller så kan det vara en färg med kod. Jag brukar använda storlek 2 eller 3, det är ganska litet men funkar på en layout. Mer än 3 funkar ju också men tar upp ganska stor plats. Några av teckensnitten som fungerar brukar vara Georgia, Palatino Linotype, Times New Roman, Arial osv. Ni får leta själva x) Gå ner ett till steg, och nu ska du skriva en lång text för att se till så att rullisten funkar. Jag och många andra brukar bara skriva "text text text text text" fast många fler gånger. Det kan du även göra tidigare för då blir det enklare att se höjden osv.

</font></div>
Skriv bara det där ett steg ner från all "text". Det avslutar texten. Om du nu vill ha fler textrutor så går du ner ett steg därifrån, kopierar allt från och med början på förra textrutan (ett steg ner från bakgrundsbilden, ett steg upp från font color) till font div, och klistrar in det under. Du kan behöva ändra marginalen, och om textrutorna är olika stora även bredden och höjden. När du är klar med det, gå ner ett steg till.

</div>
Det avslutar layouten. Klicka på "Display" och kolla om allt blev bra. Du kan ju alltid ändra om lite. Om du är nöjd, kopiera hela koden och klistra in den i HTML-läget på din presentation. Sedan kan du redigera texten i normalläget.
 
Jag hoppas att det var hjälpsamt! Det är inte så svårt som det ser ut, men om du inte vill göra det kan du ju alltid hitta gratislayouts ^^ Hej så länge!