Alt har en begynnelse…

Archive for the ‘Design’ Category

You are currently browsing the archives for the Design category.

19 apr 2010

Lag ditt eget design enkelt

Jeg holder på med å fikse en “design bygger” der du enkelt kan ordne ditt eget design med å krysse av på forskjellige valg. Dette er beregnet på de som ikke har html/css kunnskap.

Størsteparten av systemet er nå ferdig, det jeg ønsker å høre nå er hvilke valg dere ønsker å ha? feks større profil bilde, flytte sidemeny osv.

Hvis du er en av de som ikke har noe html/css kunnskap, men ønsker å ordne deg et nytt design så har du muligheten til å melde seg som “prøvekanin” her. Skriv en ganske kort kommentar der du sier hvorfor du kunne ønske dette. Feks “jeg har prøvd å ordne design selv men ikke klart det”.

Hvilke valg ønsker du?
Kunne du tenkt deg å være prøvekanin?

19 april, 2010 at 16:15 by Tronds

Posted in Design, Design bygger | 29 Comments »

11 apr 2010

Design: Hvordan deleopp sidemeny og innleggsdelen

Dette er utrolig enkelt når du først vet hvordan det skal gjøres. Det er vel kanskje alt?

Nederst i stilsettet setter du inn dette:

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

#wrapper{

background: transparent;

border: 0;

padding: 0;

}

#header{

margin-bottom: 20px;

}

#side, #main{

padding: 5px;

background: #555;  /* bakgrunnsfarge på sidemenyen og innleggsdelen  */

border: 1px solid #000; /* ramme rundt sidemenyen og innleggsdelen */

}

#side{

width: 28%;  /* bredden på sidemenyen */

}

.breadcrumbs{ display: none; }

Dette kan gjøres med mindre kode, men etter å ha testet dette ut på en del blogger så har jeg kommet frem til denne. Denne skal virke på de fleste blogg.no blogger. Hvis du har et helt spesielt oppsett i malen så vil kanskje ikke dette virke hos deg. Legg igjen en kommentar så kan jeg hjelp deg.

Gikk det?

11 april, 2010 at 0:04 by Tronds

Posted in Design, Design forbedringer, html/css | 24 Comments »

10 apr 2010

Design: Fjern “sisteinnlegg” “kategori” “Arkiv” fra sidemenyen

Får en del spørsmål om hvordan det er mulig å fjerne “Siste innlegg”, “Kategori”, “Arkiv” eller “Siste kommentarer” fra sidemenyen. Løsningen er ikke så vanskelig som man skulle tro.

Jeg kommer her til å bare forklare for “Kategori”, hvis du ønsker å fjerne “Arkiv” så er det bare å følge samme “oppskriften” bare tenkt “Arkiv” der det står “Kategori”. Du klarer det nok..

Først må vi en tur inn i forside malen. Søk nedover til du finner disse linjene:

<div>
<h3>Kategorier</h3>

Merk: Her står det selvfølgelig “arkiv” hvis det er det du ønsker å fjerne.

Du ser <div> linjen? ja, det er den vi ønsker å forandre litt på..

Siden det nå er “Kategori” vi skal fjerne så forandrer du den til:

1 2	<div class="kategori"> <h3>Kategorier</h3>

Merk: Hvis det er “Arkiv” du skal fjerne så skriver du “arkiv” i stede for.. osv.

Når dette er gjort forhåndsvis. ser du noe forskjell ? Ikke? Bare da har du gjort alt rett.. Lagre og gå inn i stilsettet.

Helt nederst i stilsettet putter du inn denne linjen:

1	.kategori{ display: none;}

Merk: Ja.. igjen.. hvis du skal ha bort “Arkiv” og du skrev class=”arkiv” lenger oppe så gjør du det her også. Du kan ikke gi den navn som feks “siste innlegg” ikke lov med noen mellomrom i navnet, så da må det bli “sisteinnlegg”.
Legg merke til at det står et punktum foran!

Forhåndsvis, dette alltid fint å gjøre. Ble det borte? Da er det bare å lagre.

Hvis du en gang finner ut at du ønsker å ha “Kategori” tilbake så fjerner du bare denne linjen fra stilsettet så vil den vises igjen

Lykke til.

Gikk det?

10 april, 2010 at 22:18 by Tronds

Posted in Design, html/css | 8 Comments »

8 apr 2010

Design: Sidemenyen lenger bort fra innleggene

Dette er et problem som mange design har, sidemenyen kommer helt innpå innleggsdelen. Den røde sirkelen er hvor teksten i sidemenyen kommer helt inn til innlegget, den blå sirkelen er hvor feilen ligger. Mange setter inn en “kode” som viser hvor mange som er innpå siden til en hver tid. I denne koden er det ofte en feill. For å fikse dette går du inn i profil beskrivelsen din, for å komme inn der kan gå inn her: http://blogsoft.no/index.bd?fa=blog.edit På slutten av koden vil du se en </div> denne må du fjerne. Lagre. Det kan godt være at det tar litt tid før du ser noe forskjell på bloggen din. Dette har noe med hvordan blogg.no er laget.

Hvis du ikke har feilen over, men fortsatt synes at sidemenyen er for langt inntil innleggene så kan du fikse dette på følgende måte. Gå inn i stilsettfilen din, helt nederst skriver du:

1
2
3

/* gjør sidemenyen litt mindre, og dermed større avstand til innleggene*/

#side{ width: 30%;}

Du kan selvfølgelig gjøre den mindre enn 30% også. prøv deg frem.

HAdde du feil kode?

8 april, 2010 at 19:31 by Tronds

Posted in Design, html/css | 8 Comments »

7 apr 2010

Design: Hvordan vise hele innlegget på arkiv og kategorier

Det er ikke så mye som skal til for at du her muligheten til å vise hele innlegget når noen går inn på en kategori eller arkivet.

Først må du inn i malen til der du ønsker hele innlegget skal vises, vi tar “Kategori” malen først.

Når du er inne på den malen så finer du linjen

<tag:entrylist limit=”1000″ maxchars=”200″>

“limit” sier hvor mange innlegg du ønsker å vise, “maxchars” sier hvor mange tegn av innlegget du ønsker å vise. Selv om du setter “maxchars” til 10000 vil den ikke ta med seg noen bilder, bare teksten. For at den skal vise bilder også må du fjerne maxchars=”200″ fra linjen. linjen skal med andre ord se slik ut:

<tag:entrylist limit=”1000″>

Så forhåndsviser du og lagrer hvis alt ser bra ut.

Så gå du inn på “Arkiv” malen og gjør akkurat det samme der.

Vanskeligere en det er det ikke, men hvis du skulle få problem så er det bare å sifra.

Hva synes du er best, at hele innlegget vises eller bare litt?

7 april, 2010 at 9:53 by Tronds

Posted in Design, Design forbedringer, blogg.no | 6 Comments »

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 at 13:16 by Tronds

Posted in Design, Onlinetools | 16 Comments »

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 at 13:30 by Tronds

Posted in CSS, Design, Forbedringer | 10 Comments »

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 at 13:14 by Tronds

Posted in Design, Kommentar | 18 Comments »

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 at 11:26 by Tronds

Posted in Design, Design forbedringer | 18 Comments »

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 at 12:07 by Tronds

Posted in Design, Hvordan gjør de det?, html/css | 11 Comments »

Archive for the ‘Design’ Category

Lag ditt eget design enkelt

Design: Hvordan deleopp sidemeny og innleggsdelen

Design: Fjern “sisteinnlegg” “kategori” “Arkiv” fra sidemenyen

Design: Sidemenyen lenger bort fra innleggene

Design: Hvordan vise hele innlegget på arkiv og kategorier

Design: Hjelp til fargevalg

Design: Del opp bloggen i egne “bokser”

Design: Forandre utsende på kommentarer Del 1

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

Hvordan gjør de det? Roterende header som TheGiant

Legg meg til som venn

Siste innlegg

Siste kommentarer

Emner

Bloggrull