Designskola: Hur man enkelt gör ett färgschema

Vad är ett färgschema och varför ska man använda det?
Ett färgschema är ett par färger (max 5) som man i förväg bestämt att man vill använda i en design eller annat. Det underlättar rätt mycket när man satt ihop ett färgschema innan man börjar med designen; man vet vilka färger som passar ihop redan och man slipper sedan fundera "vilken färg ska jag välja här då?". Det finns ändå över 10 miljoner nyanser att välja mellan. Genom att sätta färgerna man valt bredvid varandra såsom jag gjort nedan, slipper man hålla alla färgkoder (#b2b88f t.ex) i huvudet. Istället tar man en pipett i photoshop eller paint exempelvis, och kollar vilken färgkod färgen i fråga har.
 
Här nedan är färgschemat jag gjorde till min nuvarande design. Jag valde att ha de mesta i grått men detaljer i blått. Ni ser även vad jag menar med att sätta färgerna bredvid varandra.
Från vänster: #3c3c3c, #c5c5c5, #f8f8f8, #7fade4
 
 
Istället för att ha massa olika, slumpvist valda färger, såsom det extrema färgschemat jag skrapat ihop nedanför..
..så bör man träna upp ögat för vilka färger som passar tillsammans. "Chockrosa" och brunt är ingen höjdare, enligt mig - men smaken är ju olika såklart och man måste testa för att bilda sin egna uppfattning om detta.
 
Hur vet man vilka färger som passar ihop?
Istället för att sitta med en färgväljare helt slumpvist och testa sig fram i år och dar så kan man fuska hur enkelt som helst!
Leta fram en bild ni tycker är behaglig för ögat och fin. Behaglig för ögat = inte för många eller för skrikiga färger.
Sådanna bilder kan ni hitta i we♥it t.ex. Sedan är det bara att sitta med en pipett och plocka ut både mörka och ljusa färger man tycker är fina och testa sig fram. Ett tips är att lägga färgerna bredvid varandra, som jag gjort ovan, för att enkelt avgöra om de passar ihop eller inte. Max 5 färger blir bäst.
 
Några färgscheman och dess färgkoder, feel free to use.
 


Responsivt med hjälp av media queries

Fick en fråga om jag kunde visa hur man gjorde sin blogg responsiv, och måste säga att jag är inte alls något proffs på detta utan dehär är helt nytt för mig, jag vet inte om mitt sätt är rätt eller fel - det verkar iallafall fungera någorlunda. Ska ni försöka er på detta, så bör ni göra detta i en testblogg eftersom de kan bli fullkomligt galet ibland.
 
Varför ska man mobilanpassa sin blogg/hemsida?
Jo, för att vi lever just nu i en tid där det är vanligare att surfa med mobilen eller surfplattan än med dator. Man vill ju att designen både ska vara bra funktionsmässigt och snygg, via mobil och dator. Tanken med media queries är att designen anpassar sig utefter vilken skärmupplösning användaren har!
 
Breakpoints.
Det finns massor av olika breakpoints, men eftersom jag är väldigt ny inom responsiv design så valde jag att bara använda en breakpoint för att lägga all energi på att få den att funka.
Den jag använde till stilmallen ser ut såhär: 
...och den betyder att ifall användaren i fråga har en skärm på max 800px så ska koder inom { och } gälla. Annars ska andra koder gälla; antingen andra breakpoints eller den ordinära stilmallen.
 
Hindra användare från att zooma. Gör designen användarvänlig istället så man slipper zooma in och ut för att kunna läsa texten i t.ex inläggen.
Denna kod ska läggas precis innan </head> i alla kodmallar:
 
Tänk på detta när ni kodar i @media queries:
 
Max-bredd istället för en fast bredd och procent istället för pixlar.
De är precis som de låter. Man vill ha relativa värden och inte fasta värden så att breddarna ska kunna ändras utifrån upplösningen på skärmen. Istället för att skriva:
wrapper {width: 1000px; } så skriver man wrapper {max-width: 1000px;}. Vilket direkt leder oss in på nästa bra-att-tänka-på grej.
 
När man gör en design till något som är max 800px bred så vet man ju inte om användarens skärm är 150px bred eller 800px bred. Därför vill man ha pixlar/avstånd/mått i procent så att t.ex en wrapper på 300px bred blir jätteliten på skärmen som är 800px bred men väldigt liten på skärmen som är 150px bred. Har man istället mått i procent så blir breddarna lika stora i förhållande till de olika skärmarna. Ni fattar!
 
När man handskas med så små utrymmen så gäller det att ta vara på varje liten del av skärmen. Därför gjorde jag min wrapper 100% bred, den ska alltså vara lika bred som hela skärmen den visas på. Jag använde sedan wrappern som en linjal ungefär, tex. content blev 90% bred för att jag inte ville att den skulle ta upp hela skärmen utan att det skulle finnas en viss marginal.
 
Meny-problemet.
Jag valde att ta bort menyn helt i min mobilanpassade design för att de var väldigt svårt att få den att se okej ut med dess udda dropdown. 
Har man däremot en sidomeny går det att lägga den nederst på sidan. 
Ett alternativ kan vara att göra en speciell meny som endast ska visas på den mobilanpassade designen, vilket man inte ska tveka på att göra ifall man har tålamod och kunskap.
 
Förhandsgranska.
Förhandsgranska kan man göra genom att öppna sin blogg/hemsida i en ny flik och förminska webbläsarfönstret/zooma in & ut. Annars kan ni leta rätt på en surfplatta eller en telefon och kolla!
 
Fler breakpoints.
 
Mina koder ifall de kan hjälpa er förstå: 
(kopiera inte dessa rakt av ifall ni tänkte de, koderna kommer röra till ordenligt i era designer eftersom mina koder hör till min design)
Mina koder är inte helt felfria, det är jag medveten om. men jag fick det att fungera, vilket var huvudsaken för min del!


Manuellt bildspel

Okej, nu har jag fått lite frågor om hur jag gjorde mitt manuella bildspel i headern jag hade förut, så tänkte visa nu.(Bildspelet styrs genom att man trycker på knappar som gör att man tar sig vidare i bildspelet som du ser på bilden ovan). 
 
Tänker inte gå igenom vad varenda rad kod betyder utan ni får läsa, tänka lite logiskt och prova er fram. Som en liten hjälp på traven har jag lämnat lite kommentarer i koderna om var man ändrar storlek och så. 
 
Bilderna jag lagt in som grund är tagna från we♥it: 1 / 2 / 3 / 4 och jag har använt blogg.se's tema "egen mall" när jag visat detta. Rekommenderar att man gör detta i en testblogg och det kommer underlätta såklart om du har lite förkunskaper inom koder, men det är inte nödvändigt.
 
Stilmallskoden kan läggas in vars som helst så länge det är i stilmallen/css'en, längst ner ifall du inte har så stor koll på koder:

Kodmallskoden ska ersätta <div id="header></div> i kodmallarna, glöm inte att lägga den i alla kodmallar om du inte använder blogg.se's nyare koder!
 
Har du några funderingar, lämna en kommentar så ska jag försöka svara så gott jag kan!


Hur jag lärde mig html & css och hur du kan lära dig


Varför började jag?
 
2010/2011 började jag blogga här på blogg.se för andra gången, fast inte med llii.blogg.se. Jag hade bloggat tidigare hos blogspot men tyckte att bordern längst upp på bloggen, där de stod blogspot, nästa blogg och sånt, var onödig och jag ville liksom inte ha den, så jag flyttade hit. När jag väl var här så tyckte jag att blogg.se's teman var så förskräckligt fula och jag förstod vekligen inte hur css&html fungerade då, men ville ändå ändra på utseéndet och göra det till min egna blogg.
 

Hur lärde jag mig?

Jag hade hållt på med photoshop ett tag innan, så jag förstod vad t.ex font var och att "arial" var ett typsnitt. Måttet "pixlar" (px) var även bekant. Läste sedan css'en och såg att de mesta var på engelska. Border, de är ju nån slags ram. Font-size, ja men font har ju med texten att göra och size betyder ju storlek. De var lite så jag började & var de något jag inte förstod så googlade jag. Google har hjälpt mig på många sätt och jag gav verkligen inte upp googlingen förrän jag hittat det jag sökte.
 
Css/stilmallen lärde jag mig relativt fort, jag visste vars jag skulle titta ifall jag ville lägga in en header osv.
Html/kodmallen tog längre tid innan jag förstod hur den och css'en hängde ihop. Men likadant där, jag läste i htmlkoderna för att få en överblick av vad den innehöll osv.
 

Hur ska du lära dig?
 
» Googla mycket! Kommer det inte fram något på svenska så googla på engelska (men då måste du ju såklart kunna lite engelska). 
» Ge inte upp. Hur ska du lära dig om du känner att allt är omöjligt och du är redo att ge upp när som helst ? Lär dig att det tar tid. Att lära sig ett språk gör man inte över en natt, det tar tid.
» Arbeta i testblogg. Experimentera aldrig med din riktiga blogg om du inte är säker på vad du gör. Går något fel kan det va svårt att rätta till det. Genom att använda testbloggar så är det bara att återställa från grunden ifall något går snett.
 

Kan jag hjälpa dig?
 
Jag tar gärna emot förslag på vad jag kan lära er via designskolan. 
Har dock inte möjlighet att logga in på era bloggar och göra saker åt er eller ha mailkontakt för att lära er något. Jag tar ju emot beställningar på designer etc. och det är självklart dom måste prioriteras framför allt annat som har med design att göra. Vill ni lära er något specifikt så gör jag gärna inlägg om det så alla kan se, istället för att jag ska förklara samma sak för en och en, gång på gång. Det blir effektivare då!


Ändra header i temat "Dotty" utan Pro

Detta kan man göra på två sätt. Första sättet bygger på att ändra de befintliga headrarna och de andra går ut på att ta bort alla headrar och göra en enda stor.
 
1.
Temat Dotty är uppbyggt på egentligen 7 headrar; en större och sex mindre. Dedär bilderna kan man ändra hur enkelt som helst ! Den största headern heter .header-big och de mindre är numrerade som du ser.
Den största headern är 253px bred och 290px hög och de mindre är 116px bred och 84px hög vardera, så tänk på det när du gör headrarna och laddar upp dom!
 
Ta bort detta i stilmallen:
.header-big { background-image: {{options.image.header.urlsrc}}; }
.header-small:first-of-type { background: #000;
.header-small:nth-of-type(2) { background-image: {{options.image.header2.urlsrc}}; }
.header-small:nth-of-type(3) { background-image: {{options.image.header3.urlsrc}}; }
.header-small:nth-of-type(4) { background-image: {{options.image.header4.urlsrc}}; }
.header-small:nth-of-type(5) { background-image: {{options.image.header5.urlsrc}}; }
.header-small:nth-of-type(6) { background-image: {{options.image.header6.urlsrc}}; }
 
Alltså från .header-big till .header-small:nth-of-type(6)
 
Och ersätt det med detta:
.header-big { background:url(här ska länken vara) }
.header-small:first-of-type { background: url(här ska länken vara); }
.header-small:nth-of-type(2) { background: url(här ska länken vara); }
.header-small:nth-of-type(3) { background: url(här ska länken vara); }
.header-small:nth-of-type(4) { background: url(här ska länken vara); }
.header-small:nth-of-type(5) { background: url(här ska länken vara); }
.header-small:nth-of-type(6) { background: url(här ska länken vara); }
 
Nu kan du ändra "här ska länken vara" mot länkarna som du fått när du laddat upp bilderna och spara! OBS! Förhandsgranskningen kan se väldigt knasig ut men spara iallafall och kolla på bloggen hur det ser ut. Ser de knasigt ut så återställ då temat och gör om allt igen.
 
2.
I dehär sättet ska du alltså göra en enda stor header som är 633px bred och 300px hög. När du gjort det och laddat upp den är det dags att ersätta stilmallens koder och startsidans koder med de som jag lagt i två boxar här nedanför. Precis som i första sättet så kan förhandsgranskningen se helt galen ut så spara och titta i själva bloggen för att se ett riktigt resultat. Ser de knasigt ut där så får du återställa temat och göra om.
 
Stilmallskoden, ersätt din stilmall med denna:
 
Kodmallskoden till startsidan, ersätt din startsidas kodmall med denna:
 
Lycka till och säg till ifall de är något du inte förstår!


Ändra header i de "nya" koderna

I samma veva som blogg.se gjorde en mer seriös grej av designeditorn så ändrades koderna, för att dom ska anpassas utifrån designeditorn. Förstår ni ? Är man inte pro- medlem så går det i många teman (kanske t.o.m alla) inte att ändra header via designeditorn. Men det går med hjälp av stilmallen, man gör ungefär på samma sätt som förut.
 
Man gör helt enkelt en header, som är exakt den storlek man vill att den sedan ska vara i på bloggen. T.ex 800px bred och 335px hög, det kan man göra i paint, photoshop eller annat bildbehandlingsprogram. Sedan laddar man upp bilden på blogg.se, Arkiv » Bilder. Kopiera url'en (länken) som tillhör fullstorlek och klistra in den i en ny flik, förslagsvis.
 
I stilmallen finns det oftast ett headerstycke som kan se ut ungefär såhär : (taget från temat Bokeh)
 

#header {
background-image: {{options.image.header.urlsrc}};
background-position: center center;
background-repeat: no-repeat;
height: 355px;
}

 
Kolla efter ett liknande stycke i din stilmall!
Nu ska man ersätta det jag fetstiltat, alltså {{options.image.header.urlsrc}}; till url(här ska url'en till din header vara);. Mellan paranteserna är det alltså meningen att en bildurl ska vara så klistra in den där. Förhandsgranska och spara! :)
 
Ex. på hur det kan se ut:
 

#header {
background-image: url(https://cdn3.cdnme.se/3398317/7-3/1k_5277c59ae087c3062d5b6073.png);
background-position: center center;
background-repeat: no-repeat;
height: 355px;
}

 


Koppla ihop din blogg med Bloglovin'

Bloglovin' är ett väldigt bra verktyg tycker jag, både för bloggaren och för läsarna. Nu tänkte jag förklara hur man kopplar ihop sin blogg med bloglovin så ens läsare kan börja följa ens blogg!
1. Skapa ett konto om du inte redan har ett & logga in. Sen trycker du på den där lilla ikonen bredvid där man kan söka efter bloggar. Då kommer en lista ner med en mängd alternativ men du ska gå till Your blog.
 
 
2. Nu kommer du till en sida som ser ut ungefär så ↑. Då ska du trycka på Den blåa knappen, Claim blog. Det innebär att du kan ta kontroll över din blogg, se hur många följare du har osv.
 
 
3. Nu kommer en sån ruta som är på bilden komma upp. Du gör precis som det står, du ska kopiera koden till ett nytt inlägg och publicera det men gör det i en ny flik så du fortfarande har bloglovin öppet! När du ser att inlägget är uppe på bloggen trycker du på Claim blog som är nedanför rutan med kod. Om du vill kan du sen ta bort inlägget med koden.
 
Inte svårare än så ! :)
 


Endast 3 inlägg visas på bloggen ?

Det verkar som många har problem med det så tänkte att jag kan förklara detta en gång för alla ! 
 
Varför har så många problem med detta och vad är det egentliga problemet?
Jo, när man skapar en blogg får man välja ett tema som grund. Väljer man inte ett tema då utan väljer att göra det längre fram så får man temat silentium som grund - oavsett om man vill eller inte - det är standardtemat, vad jag märkt. Eller så kanske man väljer silentium själv för att det är ett stilrent och ljust tema.(?) 
 
Temat silentium må vara ett ljust och kanske populärt tema men det har sina nackdelar.
{% entry in entries [:siffra] %} - så ser kodstycket ut där man ändrar antal inlägg som ska visas på startsidan. Har man temat silentium så fungerar inte det kodstycket oavsett om man skriver dit 100 eller 0 som siffra. Temat är förinställt på att visa 3 inlägg. Inte 4, inte 5, inte 11 utan 3 inlägg, punkt.
 
Vad kan jag göra åt det?
Byt tema som *grund.  Detta betyder INTE att man måste göra en helt ny design eller så, utan kopiera alla htmlkoder och stilmallen och klistra in i ett worddokument vardera, eller vilket textprogram som helst under tiden så har man sin design i tryggt förvar.
 
Nu, byt till vilket tema som helst huvudsaken det inte är silentium eftersom målet var att råda bot på problemet med 3 inlägg. Kugghjulet » design » byt tema och bläddra ner så hittar du några gratis teman.
Jag har testat några teman där jag garanterar att just det problemet inte finns på; Dusty Rose, Happy Blue, Plenitude och Basic.
 
...Om det inte fungerar då?
Testa med ett annat tema och var lite envis! Syns fortfarande bara tre inlägg? Då kan det helt enkelt vara så att de ligger ett fenomen i det hela, "never-ending-scroll". Bläddra då ner tills alla inlägg tar slut och vänta ½ sek, då dyker några fler inlägg upp.
 
Lycka till !
 
*Grundtemat är ett tema som ni har i bakgrunden men som inte behöver synas. Lägger ni in koder som inte har något med grundtemat att göra alls så syns grundtemat inte, men det finns fortfarande där i bakgrunden. 


Designskola: Ändra antal inlägg på startsidan

Funderar väldigt starkt på att göra videotutorials istället för skriftliga. Vad tycker ni är bäst?
 
Det första du gör är att klicka dig in till koderna, kugghjulet » design. Sen väljer du Startsidans kodmall i rullisten om den inte redan är förvald.
 
Bläddra sedan ner till  <div id="content">. Hittar du inte så ta hjälp av ctrl/cmd + F !
Precis under <div id="content"> bör du hitta något som ser ut såhär:  {% for entry in entries[:siffra] %}. Ändra "siffra"till antalet inlägg du vill ska synas på din blogg!
 
Stöter du på några problem eller vill se något annat här i designskolan så låt mig veta !
 
 
 
 


Desingskola: Radbrytning på htmlspråk

 Du kanske redan har märkt eller kommer och märka att för att göra en radbrytning (ny rad) i html så fungerar inte enter.
Enter i htmlkoderna fungerar för att göra själva htmlkoderna lite luftigare men i bloggen/webbsidan kommer inte några radbrytningar att visas.
 
Istället för enter
Det finns en kod för radbrytning, nämligen <br/>. Så istället för att trycka på enter så skriver man <br/> !
 
Ett exempel på hur det kan se ut i htmlkoderna:
<div class="presentationstext>
En text om dig själv. Vad du heter och hur gammal du är.
Lite om vad bloggen handlar om kanske.<br/>
Här kanske du skriver om dina intressen och vad du allra helst
gör på fritiden.
</div>
 
Hur det kommer se ut på bloggen:
En text om dig själv. Vad du heter och hur gammal du är.
Lite om vad bloggen handlar om kanske.
 
Här kanske du skriver om dina intressen och vad du allra helst
gör på fritiden.
 

Hoppas någon har nytta av detta. Har du några frågor så får du gärna fråga !


Designskola: Dropdowntips

Här kommer jag inte förklara hur du gör en dropdown utan mer hur du ska göra för att sätta den på det ställe du vill ha ! 
 
Vill man ha dropdownen ovanför headern så ska man placera sina koder precis ovanför <div id="header"> i kodmallen.
Såhär kan det då se ut i kodmallen:
 
<ul id="navbar"> « dropdownkoden börjar alltså här
<div id="header">
</div>
 
Vill man istället ha dropdownen under headern så ska man placera sina koder precis under <div id="header></div>
Såhär kan det se ut i kodmallen då:
 
<div id="header">
</div>
<ul id="navbar"> « dropdownkoden börjar alltså här


Designskola: Bild bakom datum och tid

Fått en hel del frågor om hur jag fick en 'boll/ruta/bild' bakom datum och tid. Jag googlade runt och testade en rad olika saker innan jag tillsist fick hjälp av Sannasrum.se. Det hela är mycket enkelt,  varför jag inte kom på det själv kan man ju fråga sig.
 
Kopiera och klistra in koderna ni hittar längst ner i inlägget.
Gör en bild i t.ex photoshop som är i den storlek ni vill ha den i, med genomskinlig bakgrund. Spara som .png ! Ladda upp bilden på din blogg (arkiv » bilder) och kopiera länken. Klistra in den i stilmallskoden, background: url(här);. Sen är det bara att trixa med padding och margin för att få den att passa där du vill ha den! 
 
Stilmallskoden,lägg längst ner: (jag har gått igenom vad de mesta betyder i stilmallen HÄR)
 
.datumbilden {

background: url(bildlänk) no-repeat;
color: #fff;
float: left; 
font-family: arial,calibri; 
font-size: 12px; 
height: 83px; 
width: 83px; 
padding-top: 23px; 
text-align: center;
margin: 45px 0px -50px 750px;

}

 

Koden till kodmallen (jag har lagt den precis under h3 eftersom jag vill ha den under rubriken):

<div class="datumbilden">Här ska datum- & tidkod vara</div>

 

 



Gör så sidomenyn (eller annat) sitter fast när man scrollar

Detta är otroligt enkelt. Samma metod kan man använda på många andra element också, så som dropdown, bakgrund och andra saker. Men i denna tutorial så använder jag mig av en sidomeny som exempel.
 
Det du gör är att gå till stilmallen och leta upp det stycke som hör till din sidomeny, alltså #side. (Ifall du inte hittar det så söker du på side med hjälp av ctrl/cmd+f. Var sökrutan kommer upp beror på vilken webbläsare du använder.)
 
Lägg till position: fixed; i stycket och sen är det klart !
 
ex. på hur det kan se ut:
 

#side {
margin-right:0;
padding: 8px 12px 0px;
background: #fff;
width: 316px;
position: fixed;
}


Några viktiga saker att tänka på:

» Har du en för lång sidomeny kommer inte hela menyn att synas, så det gäller att hålla sig kortfattad.

» Har du panorama- annons aktiverad så kommer det ställa till problem. Annonsen visas inte på alla sidvisningar som du får, bara på ungefär hälften har jag räknat ut. Det innebär att om du ställer in menyns avstånd från toppen avsett för när inte annonsen visas kommer menyn halka ner när annonsen väl visas och tvärt om, tyvärr. Jag har försökt åtgärda problemet med egna metoder men det funkar inte alltid eftersom annonserna är olika bred osv. 

» Det blir lätt jobbigt för ögat när nånting distraherar på sidan av inläggen, så tänk på att använda en enkel design med helhet och mjuka & behagliga färger för ögat så inte fler saker distraherar!

 

Är det något jag förklarat otydligt som du inte förstår eller övriga frågor så kommentera så svarar jag omedelbums. 



Designskola: Byt header/ lägg in en header

Du börjar med att klura ut en storlek du vill ha på din header. Min nuvarande header är 817px bred och 283px hög. För min design tyckte jag att det passade bra men det är ju förstås olika.
 
Efter du har kommit på en lämplig storlek så öppnar du ett nytt dokument t.ex i photoshop eller något annat redigeringsprogram där man helst kan hantera bilder och texter samtidigt.
Sen är det ju bara att göra en header, klistra in bilder, skriva texter osv som man vill ha !
 
Spara bilden någonstans där du vet att du hittar den. Har du gjort en header med genomskinlig bakgrund så spara den som .png.
Ladda upp den på din blogg (Arkiv » bilder). Var noga med att du väljer rätt bredd. Min använder jag som exempel nu; min är 817px bred. Skulle jag ladda upp den i 800px så skulle inte hela headern komma med, alltså måste jag ladda upp den så hela kommer med, i det fallet skulle det bli 900px som jag skulle laddat upp den i.
 
När den är uppladdad klickar du på headern och kopierar länken som hör ihop med fullstor.
Gå in i din stilmall, scrolla ner till headerstycket. Skriv in background: url(); om det inte redan finns och klistra in länken till din header mellan paranteserna !
 
Ex. 
header {
background: url(HÄR ÄR LÄNKEN);
margin: 0px;
padding: 0px;
float: left;
}
 
klaaart!


Designskola: Vad allt i stilmallen betyder (del 2)

I del 1 förklarade jag vad alla rubriker till de olika styckena står för. Du hittar del 1 HÄR.Här i del 2 så ska jag förklara vad allt i de olika styckena betyder.

 Ett stycke som styr en header kan se ut såhär:

header { « Ett stycke börjar alltid med rubrik & en vänsterklammer som berättar att härifrån börjar stycket.
background: #FFFFFF url(); «Background är bakgrunden på headern,alltså headerbilden. Url:en klistrar man in mellan paranteserna.
float: center; « float berättar vars "saken" ska vara, om det ska vara åt vänster, höger eller i mitten.
margin: -10px 5px 10px; 540px; « margin berättar hur "saken" ska vara placerad. Kan göra ett inlägg om padding & margin men isf måste ni kommentera så jag vet !
border: 1px #000000 solid; « border är en ram. den talar i dethär fallet om att ramen/bordern ska vara 1px bred och vara svart (#000000). Solid betyder att den ska vara heldragen och inte prickad, streckad eller något annat.
« Stycket avslutas med en högerklammer som berättar att stycket är slut nu.

Ett stycke som styr en inläggsrubrik kan se ut såhär:

h3 { « ett stycke börjas alltid, som sagt, med en rubrik och en vänsterklammer för att berätta att härifrån börjar det.

font-family: Georgia, "Times New Roman", Times, serif; « font-family berättar vilket typsnitt som ska vara på rubriken. Först prioriteras Georgia och om de inte finns på datorn (eller annat) man läser bloggen med så ska det vara Times New Roman som visas. Finns inte det typsnittet så ska det vara Times, och efter det serif.

font-size: 14px; « font-size är storleken på texten eller rubriken. Texten ska vara 14px hög.

font-weight: 100; « font-weight berättar om texten ska vara tjock (bold), normal eller italic (snedstilt)

background:#FFFFFF; « background betyder ju bakgrund och i dehär fallet talar den om att bakgrunden ska vara vit. Man kan såklart lägga till en bild om man vill det.

padding:14px 10px 10px 15px; « padding berättar hur "saken" innuti ska vara placerad. Kan göra ett inlägg om padding & margin men isf måste ni kommentera så jag vet !

margin: 0px 0px 10px; « margin berättar hur "saken" ska vara placerad. Kan göra ett inlägg om padding & margin men isf måste ni kommentera så jag vet !

height: 14px; « detta är höjden på området som rubriken finns i, alltså inte själva texten.

vertical-align: top; « Vertical-align:top; betyder att texten ska ligga i toppen av området det ligger i.

text-align: left; « text-align styr om texten ska vara centrerad, vänsterjusterad eller högerjusterad.

color: #000000; « detta berättar att färgen på texten ska vara svart. (Mer om färgkoder nedan)

« Stycket avslutas med en högerklammer som berättar att stycket är slut nu.



Färgkoder:
#FFFFFF » Vit
#000000 » Svart
#cccccc » En grå ton 
#c780f3 » En lavendellila nyans

Om du vill ha nånting kritvitt / rött / svart så kan man skriva white/red/black etc istället för färgkoden men för att få ut olika nyanser av t.ex rött så måste du ha en färgkod. Och hur vet man då vilka färgkoder som hör till vad ? Det vet man inte. Har man hållt på ett tag med en viss nyans så lär man sig den utantill men man använder helt enkelt en färgväljare. Man kan hitta sånna i photoshop, paint osv och dom ser ut såhär:
 
Det är nästan omöjligt att ta med allt som finns i stilmallar. Hittar du något eller redan vet något obekant så är det bara att kommentera så svarar jag.


Designskola: Vad allt i stilmallen betyder (del 1)

I del 1 ska jag förklara vad alla rubriker till dom olika styckena i stilmallen står för så gott jag kan !  (Har använt mig av blogg.se's design Retro Blue då jag tycker den är ren och enkel.) Allt är logiskt, de mesta går att översätta från engelska.   I del 2 ska jag försöka förklara innehållet i styckena. T.ex #000000, font-family m.m

  

body » Body heter det stycke som styr bakgrundens utséende. 

 a & a:hover »A betyder länk på css- och htmlspråk. Där kan man ändra hur man vill att överblivna länkar (som inte hör till nånstans) ska se ut. A:hover berättar vad som händer när vi håller muspekaren över länkar.

#wrapper » Wrapper heter på svenska omslag. Det är precis som de låter, nånting som sluter om någonting. Det är den som bestämmer hur bred bloggen ska vara. I wrappern ska en ev. meny få plats och inläggen. Det är superviktigt (!!!) att wrappern är nog stor annars blir det galet. Tänk er själva en bok/tidning med ett omslag som är mindre än innehållet, blir ju helknasigt.

p » P betyder text. Men detta brukar inte användas så de kan vi hoppa över helt enkelt.

#header » Header är ja, en header. Alltså bilden som många bloggar har längst upp på sin blogg. Header är alltså liksom top-bilden.

#side » Side är sidomenyn, alltså menyn som många har på sidan av inläggen. Men en del har bort den och har en nångon annan slags meny.

#content » Content betyder innehåll och i css&html världen så är det inläggen man syftar på, kort och gott.

#header a » Header a, ja, där kommer dedär a:et in i bilden igen. Header betyder header och a betyder länk, alltså är detta till för om man t.ex väljer att ta bort headern och vill ha sin bloggaddress där istället. Precis som dom gjort i Retro Blue.

 

h1 » H1 är bloggtiteln. Blogg.se användare: du går in under kugghjulet » inställningar så ser du nog vad jag menar.

h2 »H2 är bloggbeskrivning, ifall du har någon sån eller vill att den ska synas. Blogg.se användare: du går in under kugghjulet » inställningar så ser du nog vad jag menar.

h3  » H3 eller entry headers. Det är inläggsrubriken.

.navheader »Navheader är rubrikerna i sidomenyn, t.ex Kategorier, Akriv etc.

.nav » Nav är all text i sidomenyn. I mitt fall skulle det kunna vara min presentation som jag har, som varken är någon länk eller en rubrik.

.nav ul » Nav ul är egna texter som inte är någon länk eller så. Ett ex. är numret 2013 i min sidomeny. Det styrs av nav ul.

.nav li » Nav li är egna texter med en länk i sig. En sådan länk kan vara "Tillbaka till start" eller något. Detta är inte samma sak som nav ul eller nav !

.nav a & .nav a:hover » Nav a och nav a:hover. A vet ni ju betyder länk och nav betyder texten i sidoemenyn, alltså är detta länkar i sidomenyn. Hover är ju när man håller muspekaren över länken.

 

.entrybody »Entrybody är texten i inläggen. Alltså texten jag skriver nu är entrybody helt enkelt.

.entrymeta & .entrymeta a & .entrymeta a:hover » Entrymeta finns i inläggen. Entrymeta tar hand om datumet som står, kategorin inlägget publicerats i och antal kommentarer. Entrymeta a är länkar i datumsremsan, tillexempel kategorin som inlägget är i. Entrymeta a:hover styr vad som händer när man håller muspekaren över kategorin eller länken.

 .commentheader »Commentheader är rubriken på en kommentar. Rubriken på en kommentar brukar ju vara ett namn, så namnet på den som kommenterat kan vi säga.

.commenttext, .response, .response-by » Anledningen till varför man slagit ihop tre saker till en är för att istället för att ha tre stycken som det står likadant i så har man slagit ihop dom till ett stycke. Commenttext är texten i en kommentar. Response är texten som finns i ett svar på en kommentar och response-by brukar vara en signatur av bloggaren under svaret.

.commentmeta & commentmeta a & .commentmeta a:hover » Commentmeta är datumet i en kommentar som talar om när kommentaren skrevs eller publicerades. commentmeta a och commentmeta a:hover antar jag att ni förstår nu !

.commentform »Commentform är rutan som man kommenterar i !

 

.separator »Separator är som de låter.

.default » Default är saker som inte visas men som finns i htmlkoder ändå för olika anledningar.

.subside »Har för mig att detta är RSS-ikon men är inte säker så lovar inget.

.xmlButton »Aldrig använt.

.image » Hur bilderna ska se ut. Ska de vara någon border, hur långt från sidan ska dom va osv.

.thumbnail »Thumbnail är miniatyrer av bilder.

.video »Videos såklart. 

.fieldName »Aldrig använt..

select »Aldrig använt..

 

I Retro Blue's stilmall fanns en massa Calendar- och profile- stycken härifrån och ner men tog bort dom eftersom dom inte används längre och tar bara en massa plats ! 

 


Jag är medveten om att detta inlägg blev rörigt osv. Letar du efter något speciellt så tryck på ctrl + F. En sökruta kommer upp någonstans, beroende på webbläsare. Skriv in t.ex wrapper så hittar du det enkelt ! 

Har jag glömt att skriva något eller tycker du jag förklarar något dåligt så kommentera så hjälper jag dig.

 


Designskola: Skillnaden mellan kodmall & stilmall

Jag vet många som har problem med vars man ska gå in och titta ifall man vill ändra något eller ifall de gått snett någonstans i designen. Så här ska jag försöka att reda ut skillnaden mellan kodmallarna och stilmallen; 
 
Stilmall (css): Stilmallen handlar bara om design/utseende. Man kan säga att stilmallen används för att presentera saker och visa saker. 
 
Kodmall (html): I kodmallen ska själva innehållet till bloggen/sidan finnas.
 
T.ex ska man ha en textremsa av något slag så ska man lägga till det i kodmallen för att den ska överhuvudtaget synas, vill man sen ändra utseénde på textremsan så ska man vända sig till stilmallen. 
Stilmallen och kodmallen läser alltså varandra.
 
(man kan ändra utseende på något i kodmallen, men det ska man undvika eftersom målet med stilmall är att få en så enkel och ren källkod som möjligt.)
 

Undrar ni något eller inte förstod något så fråga !
 
 
 
 
 


Scroll to top- knapp.

Fick en fråga i en kommentar om hur man lägger in en scroll to top- knapp på sin blogg och tänkte att det är fler som kanske undrar så jag gör ett inlägg. (om du inte förstår vad jag pratar om så scrolla ner lite på min blogg och titta i högra hörnet.)
 
1. Du går in på http://www.scrolltotop.com/
 
2. Leta åt en kapp du tycker är fin & som matchar din bloggs utseende.
 
3. Kopiera koden som hör till knappen och klistra in nästan längst ner i ALLA kodmallar, precis ovanför </body>.
 
Förstår du inte något eller undrar något så kommentera.