Alt har en begynnelse…

5 apr 2010

Design: Hjelp til fargevalg

Hvis du er slik som meg så har jeg alltid problem med å finne farger som passer sammen. Derfor er jeg glad for at det finnes sider som dette på nettet.

ColorJack - En side som hjelper deg med å finne farger som passer sammen.

Color Palette Generator - Her kan du laste opp headern din også vil du få fager som passer til den.

Det finnes mange slike sider der ute som gjør det enklere å få finere design. Besøk google eller følg med her så kommer det flere etter hvert.

5 april, 2010 klokken 13:16

I kategorien: Design, Onlinetools | 16 Kommentarer »

4 apr 2010

Design: Del opp bloggen i egne “bokser”

Er mange som lurer på hvordan det er mulig å få delt opp sidemenyen i egne “bokser”. Vel det er ikke spesielt vanskelig. Så sant du ikke har gjort veldig store forandringer på malene så er det bare å lime inn koden under nederst i stilsettfilen din så vil alt ordne seg selv.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

/* kode som gjør alt gjennomsiktig */

#doc2, #wrapper{

background: transparent;

}

#wrapper{

padding: 0; /* gjør bloggen like bredd som headeren */

margin-top: 25px;  /* mellomrom mellom header og innleggsdelen */

}

/* gjør sidemenyen litt smalere */

#side{

width: 30%;  /* hvor bredd siden skal være i forhold til resten av bloggen */

}

/* forandrer de forskjellige delene i sidemeneyen */

#side div{

background: #fff;  /* backgrunn på boksene */

padding: 5px; /* hvor langt inn teksten skal flyttes */

border: 2px solid #8a8a8a; /* ramme rundt boksen */

}

/* vi vil ikke ha egne bokser inni profildelen, derfor fjerner vi border og bakgrunsfarge på dem */

#profile div{

background: transparent;

border: 0;

}

/* innleggsdelen */

.entry{

padding: 10px; /* hvor langt inn teksten skal flyttes */

border: 2px solid #8a8a8a;  /*  ramme rundt bloggen */

}

/* fjerner navigasjonlinjen til blogg.no som er under headeren */

.breadcrumbs{ display: none;}

Hvis noen har problem med dette så rop ut.

Fikk du det til?

4 april, 2010 klokken 13:30

I kategorien: CSS, Design, Forbedringer | 10 Kommentarer »

2 apr 2010

Design: Forandre utsende på kommentarer Del 1

Det er en del der ute som er veldig flink til å designe bloggen sin, får farge til å gå fint sammen. Header bildet er på plass. MEN når du går inn for å kommentere hvor fint design de har så blir du møtt av samme gamle fargene på kommentar “boksene”. Derfor tenke jeg at jeg kunne skrive en litt grunnlegende “oppskrift” på hvordan du kan få bedre design der også. Denne tar bare for seg hvordan du forandrer farger og gjør det helt grunnlegende. Del 2 av denne posten, som forhåpentligvis kommer om ikke så veldig lenge. Vil ta for seg hvordan du kan forandre layouten helt på kommentarene.

Kommentarene er delt opp i tre forskjellige layout. “owner” som er den som eier bloggen får, “user” som er er de som er innlogget på bloggen sin når de kommenterer hos deg og til slutt “other” som er alle andre.

Denne koden her vil virke på alle som kommenterer, med å legge inn denne har du muligheten til forandre skriftstørrelse og fargen på “navnet” på dem som legger igjen en kommentar.

1
2
3
4
5
6
7
8
9
10

/* her forandrer du hvordan "navnet" til den som kommentarer skal se ut */

#comments h4{

font-size: 16px; /* hvor stor skriften skal være */

color: #000000; /* fargen skriften skal ha. Bare hvis det IKKE er en link til hjemmesiden */

}

/* forandrer hvordan skriften på "NAVNET" skal se ut når noen har lagt igjen en bloggadresse */

#comments h4 a{

color: #000000; /* fagre på skriften */

}

De tre neste delene tar for seg “owner”, “user” og “other”. Alle delene er like bortsett fra navnet. Hvis du limer inn alle tre etter hverandre vil du se at alle kommentarene vil bli helt like. Kanskje ikke det du ønsker? derfor limer du inn en del også forandrer du den til du er fornøyd så tar du neste del. Problemet med å forandre på dette er at det ikke hjelper å “forhåndsvise” designet. Du må lagre også gå inn på et innlegg med mange kommentarer på for å se resultatet.

Først skal vi ta de kommentarene du legger igjen på din egen blogg (”owner”). så er det bare å lese kommentarene og tilpasse det slik du ønsker det.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/* Her er delen som forandre på hvordan dine kommentarer skal se ut */

#comments .owner{

border: 3px solid #000;

background-color: #333333;

color: #;

}

/* Forandrer hvordan "navn" og "dato" feltet skal se ut */

#comments .owner .meta{

border: 0px solid #000; /* ramme rundt */

background-color: transparent; /* bakgrunsfarge, bare sett i koden i stedefor "transparent" */

color: #000000; /* farge på skriften */

}

#comments .owner .content{

background-color: transparent;

border: 0px solid #000000;

color: #000000;

}

Her er delen som forandrer på “user” dvs. andre blogg.no brukere som er innlogget på bloggen sin.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/* Her er delen som forandre på hvordan kommentarene til andre blogg.no brukere skal se ut */

#comments .user{

border: 3px solid #000;

background-color: #333333;

color: #;

}

/* Forandrer hvordan "navn" og "dato" feltet skal se ut */

#comments .user .meta{

border: 0px solid #000; /* ramme rundt */

background-color: transparent; /* bakgrunsfarge, bare sett i koden i  stedefor "transparent" */

color: #000000; /* farge på skriften */

}

#comments .user .content{

background-color: transparent;

border: 0px solid #000000;

color: #000000;

}

Til slutt de som ikke er innlogget:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/* Her er delen som forandre på hvordan dine  kommentarer skal se ut */

#comments other{

border: 3px solid #000;

background-color: #333333;

color: #;

}

/* Forandrer hvordan "navn" og "dato" feltet skal se ut */

#comments .other .meta{

border: 0px solid #000; /* ramme rundt */

background-color: transparent; /* bakgrunsfarge, bare sett i koden i  stedefor "transparent" */

color: #000000; /* farge på skriften */

}

#comments .other .content{

background-color: transparent;

border: 0px solid #000000;

color: #000000;

}

istede for å bruker:

border: 1px solid #000;

som vil gi en svart samme rundt alt, er det mulig å bruke:

border-left: 1px solid #000;

som vil gi en ramme bare på venstre siden.

I neste del vil det komme noen forslag til ferdig kodere dere kan lime inn.

Noen som får til dette?

2 april, 2010 klokken 13:14

I kategorien: Design, Kommentar | 18 Kommentarer »

28 mar 2010

Design: Hvordan få større profil bilde, the easy way

Ser at mange ønsker seg større profilbilde på siden. Det finnes mange måter å fikse dette på. De aller fleste velger å gå inn i malen å forandre det der, problemet da er at du må innom alle malene for å forandre det. Og det er heler ikke så enkelt å få det helt ut i kantene.

På denne måten så vil alle “malene” forandre seg når du legger inn denne koden her.

1
2
3
4
5
6
7
8
9
10
11
12

/*Koden under fjerne det "originale" profilbildet ditt. */

#profile img{

display: none;

}

/* koden som setter inn et nytt større profilbilde. */

#profile{

padding-top: 280px;  /* her setter du inn høyden på profilbildet ditt. */

background-image: url( http://i40.tinypic.com/sg224z.jpg );  /* putt inn linken til bildet her */

background-repeat: no-repeat;

background-position: center top;

}

Med å lime inn koden over vil det komme opp et slik “prøvebilde” på det kan du lese av hvor bredd sidemenyen din er, så ordner du bare et profil bilde som et den bredden du “leser” av på prøvebildet.

Når du har har tilpasset profilbildet ditt, det kan være så høyt du selv vil. Last opp bildet til feks tinypic.com og kopier inn linken til bildet ( den nederste linken du får ) inn i koden over. Forandre høyden til det profilbildet ditt har.

Bakdelen med å få større profilbildet på denne måten er at det ikke virker når noen trykker på bildet for å komme til profilen din, det er fortsatt mulig å trykk på navnet ditt for å komme til den.

Lykke til!!

Bare å rope ut hvis det skulle være noe problem.

28 mars, 2010 klokken 11:26

I kategorien: Design, Design forbedringer | 18 Kommentarer »

8 mar 2010

Derfor er lørdager best

Bildet sier mer enn 1000 ord.

Har dere det også slik?

8 mars, 2010 klokken 14:28

I kategorien: Blogg, Mat, Ting som skjer | 25 Kommentarer »

6 mar 2010

Hvordan gjør de det? Roterende header som TheGiant

Først ut skal vi se på hvordan TheGiant ( http://thegiant.blogg.no ) klarer å få til at header bildet som roterer seg. Du kan legge inn så mange bilder du vil, og plassere dem der du vil.

Dette er ikke vanskelig, men du bør vite hvordan du ordner bilder i rett størrelse og ellers ikke være utålmodig så går dette ganske greit.

Først må du finne de bildene du ønsker å bytte mellom. Du trenger ikke å sette inn hele header bildet, bare den delen som skal rotere/bytte på. Bildene kan være så stor eller små du ønsker, men det som er viktig er at de er like store. Så laster du dem opp til http://tinypic.com og noterer ned direkte adressen til bildene ( nederste feltet ).

Når det er gjort går du inn i stilsett filen, helt nederst setter du inn disse linjene, kopier inn alt:

1
2
3
4
5
6
7
8
9
10
11

#photodiv{

background-repeat: no-repeat;

float: right; /* om du vil ha bildet på venstre ( left ) eller høyre ( right ) siden */

height: 269px;  /* hvor høyt er bildene du skal bruke */

left: 10px; /* for å justere bildet, hvis du vil ha det mer til venstre så bruker du feks -10px */

position: relative;

overflow: hiden;

top: 10px;  /* lenger ned eller opp, kan bruke - ( minus ) for å flytte den lenger opp også */

width: 309px; /* hvor bredd bildene er */

}

Alt er beskrevet i koden over, når du etter på ser at bildene blir forlangt til høyre må du forandre til feks left: 20px; Dette er noe du bare må prøve deg frem til senere.

Da skal vi sette inn koden i male. Dette må gjøres i alle malene, men vi gjør det først i forside malen og tilpasser koden der før du kopiere dem over til de andre malene.

Gå inn i malen og finn denne linjen:

</head> IKKE <head> men </head> Selv om det er bare et tegn i forskjell gjør det stor forskjell. Over linjen </head> limer du inn denne koden, nok en gang, alt skal inn:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

<script type="text/javascript"><!--

//

// CSS Photo Shuffler v1.0 by

// Carl Camera

// http://iamacamera.org

//

// SetOpacity Function and inpiration from Photo Fade by

// Richard Rutter

// http://clagnut.com

//

// License: Creative Commons Attribution 2.5 License

// http://creativecommons.org/licenses/by/2.5/

//

// Customize your photo shuffle settings

//

// * Surround the target <img> with a <div>. specify id= in both

// * set background-repeat:no-repeat in CSS for the div

// * The first and final photo displayed is in the html &lt;img&gt; tag

// * The array contains paths to photos you want in the rotation.

// If you want the first photo in the rotation, then it's best to

// put it as the final array image. All photos must be same dimension

// * The rotations variable specifies how many times to repeat array.

// images. zero is a valid rotation value.

var gblPhotoShufflerDivId = "photodiv";

var gblPhotoShufflerImgId = "photoimg";

// her legger du inn bildene, husk at hver bilde adresse må være inni "

//det skal også være et komma mellom hver bilde adresse.

//UNTATT på siste bildet der skal ikke være noe komme etter

// du kan plassere så mange bilder du ønsker her.

var gblImg = new Array(

"http://i48.tinypic.com/2n9j91c.jpg",

"http://i46.tinypic.com/6p9m3p.jpg",

"http://i48.tinypic.com/14ie4o2.jpg"

);

var gblPauseSeconds = 15.25;  // hvor lenge hvert bilde skal være fremme

var gblFadeSeconds = .85; // hvor lang tid overgangen fra ett bilde til et annet skal være

var gblRotations = 9999; // hvor mange ganger bildene skal vises

//under her skal de ikke gjøres noe forandringer

// End Customization section

var gblDeckSize = gblImg.length;

var gblOpacity = 100;

var gblOnDeck = 0;

var gblStartImg;

var gblImageRotations = gblDeckSize * (gblRotations+1);

window.onload = photoShufflerLaunch;

function photoShufflerLaunch()

{

var theimg = document.getElementById(gblPhotoShufflerImgId);

gblStartImg = theimg.src; // save away to show as final image

document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';

setTimeout("photoShufflerFade()",gblPauseSeconds*1000);

}

function photoShufflerFade()

{

var theimg = document.getElementById(gblPhotoShufflerImgId);

// determine delta based on number of fade seconds

// the slower the fade the more increments needed

var fadeDelta = 100 / (30 * gblFadeSeconds);

// fade top out to reveal bottom image

if (gblOpacity < 2*fadeDelta )

{

gblOpacity = 100;

// stop the rotation if we're done

if (gblImageRotations < 1) return;

photoShufflerShuffle();

// pause before next fade

setTimeout("photoShufflerFade()",gblPauseSeconds*1000);

}

else

{

gblOpacity -= fadeDelta;

setOpacity(theimg,gblOpacity);

setTimeout("photoShufflerFade()",30); // 1/30th of a second

}

}

function photoShufflerShuffle()

{

var thediv = document.getElementById(gblPhotoShufflerDivId);

var theimg = document.getElementById(gblPhotoShufflerImgId);

// copy div background-image to img.src

theimg.src = gblImg[gblOnDeck];

// set img opacity to 100

setOpacity(theimg,100);

// shuffle the deck

gblOnDeck = ++gblOnDeck % gblDeckSize;

// decrement rotation counter

if ( gblImageRotations < 1)

{

// insert start/final image if we're done

gblImg[gblOnDeck] = gblStartImg;

}

// slide next image underneath

thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';

}

function setOpacity(obj, opacity) {

opacity = (opacity == 100)?99.999:opacity;

// IE/Win

obj.style.filter = "alpha(opacity:"+opacity+")";

// Safari&lt;1.2, Konqueror

obj.style.KHTMLOpacity = opacity/100;

// Older Mozilla and Firefox

obj.style.MozOpacity = opacity/100;

// Safari 1.2, newer Firefox and Mozilla, CSS3

obj.style.opacity = opacity/100;

}

// --></script>

Har skrevet inn forklaringer i koden hvor du skal gjøre de forskjellige tingene, har langt inn 3 bilder, disse er bare å bytte ut. Men det kan kanskje være lurt å la disse stå her enda. Slik at du ser om du har fått tid til å virke.

Så går vi litt lenger ned i malen, finn linjen:

Under denne limer du inn denne koden:

1	<div id="photodiv"><img id="photoimg" src="http://i48.tinypic.com/14ie4o2.jpg" alt="" /></div>

Da er det bare å forhåndsvise og se om alt virker. Hvis det virker så kan du sett inn dine egne bilder.

Husk også å justere høyden og bredden i stilsett filen, slik at de passer til bildene du bruker. Hvis bildene ikke kommer på rett plass, lagrer du, gå inn i stilsettfilen og juster hvor bildene skal komme opp i den kodebiten du satt inn der. I tillegg til å legge inn bildene i den delen som ble lagr inn over </head> linjen så skal du sette inn en bilde adresse i delen som ble plasser under <div id=”doc2″> også, bytt ut med den som alt er der.

Skal være godt forklaring, hvis det er noe du lurer på så er det bare å spørre.

Slik gjorde de det. Spørsmål eller kommentarer er selvfølgelig velkommen
Fikk du det til?

6 mars, 2010 klokken 12:07

I kategorien: Design, Hvordan gjør de det?, html/css | 11 Kommentarer »

5 mar 2010

Hvordan gjør de det?

Tenkte jeg skulle ta for meg designene til de “store” bloggerne. Hvordan klarer de å få til noe av det de har, skal først se på hvordan The Giant ( snakk om “stor” blogger ) klarer å få til en header som bytter bilder.

Kommer til å skrive en forklaring på hvordan det er mulig å få noe lignende på sin blogg, da selvfølgelig med egne bilder.

Første innlegget i serien kommer i morgen.

Har du noe forslag til andre blogger jeg kan se på? noe du har ønsket å få på din blogg?

5 mars, 2010 klokken 0:12

I kategorien: Hvordan gjør de det?, blogg.no | 6 Kommentarer »

4 mar 2010

Design: Meny “fane”

Vanskelighets grad: Enkelt.

Da prøver vi oss på en meny til, det er stort sett noe alle ønsker.

Denne gangen her skal vi prøv å få til en slik meny. OG NEI det er ikke så vanskelig som du tror

Passer ikke farge valget ? ikke noe problem du går nemlig inn på denne siden http://www.tabsgenerator.com/ og lager dine egne knapper, er gjort på 1-2-3. Last ned bildene til datamaskinen din, og last dem opp igjen på http://tinypic.com og laster det opp. Kopier ut adressen til bildet for det trenger du etter på.

Når jeg sier “bildene” så holder det med et bilde ( en knapp ) men hvis du feks vil at den skal skifte farge når du holder musen over må du lage to bilder.

Først går vi inn i stilsettfilen, helt nederst i den setter vi inn koden under. Ta med deg alt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

.tsmenyfane{

float: left;

width: 100%;

margin-top: 20px; /* vi lagger et lite mellomrom opp til header, ser finere ut da */

margin-left: 10px; /* denne flytter menyen litt lenger inn på siden, litt forskjellig fra mal til mal */

background: transparent;  /* sett denne til en fargekode hvis du vil  ha en annen farge enn bakgrunnen på bloggen */

}

.tsmenyfane a {

display: block; /* denne må du ikke røre ;) */

padding-left: 10px; /* justerer teksen lenger mot høyre */

width: 130px; /* bredden på bildet du bruker som bakgrunn MINUS   hvorlangt du velger å flytte inn teksten på linjen over */

padding-top: 10px; /* justerer teksten lenger ned */

height: 30px; /* høyden på bildet du bruker som bakgrunn MINUS   hvorlangt du velger å  flytte ned teksten på linjen over */

background: url( http://i46.tinypic.com/2s68shf.png ); /* "knapp" bildet  */

font-size: 20px; /* størrelsen på fonten */

color: #000; /* fargen på teksen */

margin-right: 10px; /* hvor stor avstand du skal ha mellom knappene */

float: left;

text-decoration: none; /* sier bare at det ikke skal være linje under linken */

}

/* delen under forandrer bildet når du holder musen over, hvis du  ikke ønsker dette så fjern denne delen */

.tsmenyfane a:hover, .tsmenyfane .preload{

background: url( http://i49.tinypic.com/35a3thj.png ) no-repeat; /*  knappen forandrer seg til denne når du holder musen over */

}

Du ser at det er to forskjellige adresser til tinypic.com i koden over. Den første er til bildet som skal vises i menyen, det andre er til hvordan knappen skal se ut når noen plassere musen over. Sett inn linkene til de knappene du har fikset selv. Koden over passer til knapper som er 40 høy og 140 bredd, har du andre størrelser på knappene må du tilpasse koden over. Er ganske greit forklart så det skulle ikke være noe problem.

Lagre. Du skal ikke se noe forskjell på siden enda, hvis du gjøre det så har du gjort noe feil! Tilbake still designet og prøv igjen.

Når det er gjort så skal vi putte inn litt kode i malen . Det første du må gjøre er å finne linjen:

Over den linjen limer du inn koden som står under her:

1
2
3
4
5
6
7

<!-- Meny start -->

<div class="tsmenyfane">

<a href="/">Forside</a>

<a href="LINKEN">NAVN</a></div>

<!-- Meny slutt-->

Lim inn alt. På linjen som det står LINKEN på kan du kopiere opp så mange ganger du vil, LINKEN byttes ut med adressen til innlegge/kategorien som du vil skal komme opp når noen trykker på NAVN. NAVN byttes ut med navnet du vil ha på knappen.

Trykk på forhåndsvisning.
Hvis du er fornøyd så lagrer du. For at menylinjen skal vises heletiden må den siste delen også limes inn i malene “innlegg”, “kategori” og “Arkiv”. Da tar du bare koden som du nettopp limte inn i malen og kopierer den inn i de andre.
Hvis det er noe du ønsker å forandre på å så se på linjene i stilsettet, har skrevet forklaringer på alle linjene. Noe du ikke får til å legg igjen en melding her så skal jeg sjekke det ut.

Lykke til

4 mars, 2010 klokken 4:20

I kategorien: Design, Meny, html/css | 8 Kommentarer »

27 feb 2010

DVD samlingen

Filmer jeg har igjen.

Da har jeg endelig begynt! Planen er å få kopiert inn alle dvdene mine på fil serveren. Da sparer jeg plass i hyllene og alle DVDene er tilgjengelig når jeg sitter i sofaen. Har nemlig kjøpt

meg en Asus O!Play HDP-R1 spiller som kan spille filmer filer over nettverket, denne er selvfølgelig koblet til tven. Så da er det bare å bla seg frem til det jeg ønsker å se. DVD samlingen er nå oppe i rundt 300 titler, rundt 50 av dem er barnefilmer. Resten action, sci-fi og litt romantikk og komedie. Har til nå overførst 60 DVDer til dataen. Bare 240 stykker som gjenstår

: Filmer jeg er ferdig med

Hvorfor kopierer jeg dem over på datamaskinen? Jo, 300 DVD cover tar litt plass. Med å få alle inn på en datamaskin så er mye plass spart, jeg vet hvor de er til en hver tid og jeg slipper å være redd for at de skal bli ødelagt av husets mindre innbyggere.

Har du noen gang kopiert inn filmer på datamaskinen?

27 februar, 2010 klokken 23:21

I kategorien: Personlig, Ting som skjer | 7 Kommentarer »

7 feb 2010