Nydesignat

Precis fått iväg en design till Emelie
En himla lätt person att jobba med tycker jag ! 
 
Vill du också beställa ? Kolla då Här !
 


Nedladdningsbar design #2

 
En design för den som vill hålla det enkelt och stilrent. Förhandsgranskning: http://lliigratisddesign.blogg.se
 
Användarvillkor:
* Du får inte ta bort länken som berättar att det är jag som gjort designen.
* Du får inte påstå att du gjort designen.
* Du får ändra små saker i designen, t.ex header, bakgrund och färgtema osv. men du får inte ändra något som förstör grund-uppbyggnaden.
* Du får inte sälja vidare designen.
 
Info om designen:
» Headern består i den här designen av bloggaddress. (När du lägger in den på din blogg kommer din address att stå där)
» Vill du ha en bild istället för addressen i headern så kontaktar du mig via llii.blogg.se så hjälper jag dig.
» Profilbilden är 245 x 160px bred. Men höjden kan du bestämma själv.
» I designen följer det med tre sociala ikoner som är insatta. Det följer med en instruktion om hur du länkar dom till dina sociala medier när du laddar ner koderna.
 
Ladda ner #2 här

Undrar du något så kan du mejla eller kommentera. :)



the bitter winds are coming in

två snabba sen jag kom hem idag
Det börjar verkligen vara kallt på riktigt nu. Längtar nästan efter dunjackan alltså, brrr.
 
Imorgon blir det helg. Ska bli så himla skönt ! För första gången på rätt många helger så har jag nog inte så hemskt mycket för mig. Men det ändras snabbt, finns alltid något som måste göras, varelse man vill eller inte.
 


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!


är med i en fototävling

 
är med och tävlar HÄR om 200 kr hos kamda.se. Mitt bidrag är ovan ↑. 
ifall jag vann så skulle jag vilja ha DETTA och DETTA,alltså ett close up-filter +10 och ett uv-filter till mitt 50mm. :)
 


Fullt ös

bilderna tog jag efter skolan i torsdags tror jag, solen var påväg ner men gömdes av granar o grejjer. finfint
 
Den här helgen har gått riktigt fort, tyvärr. Imorgon är det skola och då har jag nästan inte en minut utan något att göra. Skolan rullar bara på - man gör klart saker samtidigt som ogjorda saker fylls på, ja ni kanske förstår.
Har ju så otroligt mycket utanför skolan nu också. Har två designer + en nedladdningsbar pågång,designskolan som jag får fler och fler idéer till, fotandet, konfa, spelningar osv. Listan tar nästan aldrig slut, och det är ju iofs bra för då har jag inte så mycket tid att fundera på ! :)


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.

 


autumn

Nu är det bara att säga hejdå till sommaren för nu är det verkligen höst.
 


hatar måndagar.

Första gången i mitt liv jag tar kort på en fjäril 
 
Dagen har varit segare än kola, något så sjukt drygt är inte ofta man är med om alltså. 
Imorse när jag precis klivit upp så gick solen upp så tänkte att ja, varför inte fotografera den för, jag kan berätta för er att den var pretty amazing. Och nu när jag för in bilderna i datorn.. Så är det två solar som sitter ihop. Glömde ta av uv-filtret på objektivet så det ser verkligen hemskt ut. aaaargh
 
Nu ska jag iallafall äta pannkakor och bli gladare ! 


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 !
 
 
 
 
 


universeum, bättre sent än aldrig

garanterar inga 100%-liga bilder eftersom ljusförhållandena var dåliga och kunde inte välja på så många perspektiv där inne, tyvärr
 


helt magiskt

lämnade rasmus på bussen för en och en halv timme sen och när jag kom hem var jag bara tvungen att gå ut med kameran. det är dimmigt och fuktigt, så spindelnät med vattendroppar fanns överallt och syndes ganska väl om man bara tittade, helt otroligt väder även fast klockan är typ 12..