Alt har en begynnelse…

Archive for the ‘Design’ Category

You are currently browsing the archives for the Design category.

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 at 4:20 by Tronds

Posted in Design, Meny, html/css | 8 Comments »

15 sept 2009

Design: Forskjellige ramme streker/mønster

Dette er den mest vanlige koden for å få ramme rundt en innlegg:

.entry{
border: 2px solid #000000;
}

Men viste du at i stede for “solid” kunne bruke noen av disse:

15 september, 2009 at 1:23 by Tronds

Posted in CSS, Design | 4 Comments »

15 sept 2009

Design: Feilsøking i stilsett filen

Ja, dette er noe alle er borti en eller annen gang. Det er en feil i stilsett filen. Her skal jeg forklare enkel fremgangs måte for lett å se etter feil i stilsettet.

Stilsett “kodene” er bygd opp slik:

hvor{
hva: til;
}

Hvor denne koden skal virke feks h2 eller #wrapper

Hva er det som skal forandres, feks border: eller font-size:

Til hva skal dette forandres, feks 1px solid black; eller 15px;

Legg også merke til { } all “koden” skal plasseres mellom disse.

og at alle linjene inni skal sluttes med ;

Så hvis du feks finner dette i stilsett filen:

Feil	Rett
h2{ font-size: 20px; #wrapper{ background: #fff; }	h2{ font-size: 20px; } #wrapper{ background: #fff; }

Så ser du at det begynner på en ny “Hvor” før den andre er avsluttet med }

Denne feilen finner jeg mange ganger på slutten av en stilsett fil.

I 99.8% av tilfellene skal det ikke plasseres < > inni stilsett filen. Det er veldig mange som skriver <style> og </style> inni filen. De skal aldri være i en stilsett fil, fjern dem!

Feil	Rett
h2{ font-size: 20px color: #000000; } #wrapper{ background: #fff; }	h2{ font-size: 20px; color: #000000; } #wrapper{ background: #fff; }

Her vil aldri “h2″ blitt satt til 20px eller svart. Grunnen er at det er glemt en ; på slutten av ene linjen.

Med å gå gjennom stilsett filen på denne måten vil du finne de fleste innlysende feilene.

Lykke til.

15 september, 2009 at 1:02 by Tronds

Posted in CSS, Design, Nerding | No Comments »

9 sept 2009

Du ønsker?

Her kan du spørre spørsmål om html/css og jeg vil svare deg så godt jeg kan.

Jeg svarer på din blogg og jeg ordner kanskje et innlegg her hvis det er noe flere kan komme til å lure på.

Hva ønsker du?

( Jeg svarer på alle spørsmålene jeg får )

9 september, 2009 at 16:31 by Tronds

Posted in Design, Nerding, html/css | 138 Comments »

10 jul 2009

Design: Meny ( dropdown )

Stine ( http://stinesandberg.blogg.no/ ) ønsket seg dropdown menyer så da prøver vi på det.

Dette er noen helt enkle som du kan utforme slik du vil. Her finner du en demo av den menyen som er vist her: http://www.lostdot.com/testdesign/dropdown/

Vanskelighetsgrad: Litt innsikt i html og tungen rett i munnen.

Først skal vi ha noe inn i “stilsett” filen:

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

#pad {height:140px;}

/* ================================================================

This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html

is available at http://www.cssmenus.co.uk

Copyright (c) 2009- Stu Nicholls. All rights reserved.

This stylesheet and the associated (x)html may be modified in any

way to fit your requirements.

=================================================================== */

#menu {padding:0; margin:0; list-style:none; height:40px; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}

#menu li {float:left; margin-right:1px;}

#menu li a {display:block; float:left; height:40px; line-height:40px; background:#333; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 30px 0 20px;}

#menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

#menu li a:hover {z-index:200; position:relative;color:#fff; background-color:#c60;}

#menu li:hover {position:relative; z-index:200;}

#menu li:hover > a {color:#fff; background:#c60;}

#menu li:hover > a.sub {color:#fff; background-color:#c60;}

#menu li a.sub {background: #333 url(down-arrow.gif) no-repeat right center;}

#menu :hover ul {left:0; top:40px; width:120px; background:#444;}

/* keep the 'next' level invisible by placing it off screen. */

#menu ul,

#menu :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#menu :hover ul :hover ul

{left:120px; top:-1px; background:#222; white-space:nowrap; width:100px; z-index:200; height:auto;}

#menu :hover ul li {margin:0; border-top:1px solid #666;}

#menu :hover ul li a {width:120px; padding:0; text-indent:10px; background:#333; color:#ccc; height:30px; line-height:30px;}

#menu :hover ul li a.fly {background:#333 url(right-arrow.gif) no-repeat right center;}

#menu :hover ul :hover {background-color:#c60; color:#fff;}

#menu :hover ul :hover a.fly {background-color:#c60; color:#fff;}

#menu :hover ul li.currentsub a {background:#840; color:#fff;}

#menu :hover ul li.currentsub a.fly {background:#840 url(right-arrow.gif) no-repeat right center; color:#fff;}

#menu :hover ul :hover ul li a {width:100px; padding:0; text-indent:10px; background:#3e3e3e; color:#ccc;}

#menu :hover ul :hover ul :hover {background-color:#d70; color:#fff;}

Lagre og forhåndsvisning. Ikke noe forskjell sier du ? helt rett, skal ikke se noe forskjell enda.. I noen sammenhenger kan du se forskjell, dette kommer av at du kanskje har en “meny” kode som bruker den koden du puttet inn nå.

Da er tiden kommet til at du må bestemme deg hvor du vil ha menyen,

Gå inn på maler:

Se etter en linje som ser slik ut ( kan være litt forskjellige fra design til design ):

hvis du plasserer koden under, rett etter denne linjen vil du få menyen under headeren.

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

<ul id="menu">

    <li><a href="#"><strong>Hjem</strong></a></li>

    <li><a href="#"><strong>Om meg</strong></a></li>

    <li><a class="sub" href="dropdown.html"><strong>Kategorier</strong><!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]>

<table>

<tr>

<td><![endif]-->

<ul>

    <li><a href="#url">Diverse</a></li>

    <li><a class="fly" href="#url">Ferie<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]>

<table>

<tr>

<td><![endif]-->

<ul>

    <li><a href="#url">Sommer</a></li>

    <li><a href="#url">Høst</a></li>

    <li><a href="#url">Vinter</a></li>

</ul>

<!--[if lte IE 6]></td>

</tr>

</table>

</a><![endif]--></li>

    <li><a class="fly" href="#url">Blogger<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]>

<table>

<tr>

<td><![endif]-->

<ul>

    <li><a href="#url">Anbefalinger</a></li>

    <li><a href="#url">Design hjelp</a></li>

    <li><a href="#url">Bilder</a></li>

</ul>

<!--[if lte IE 6]></td>

</tr>

</table>

</a><![endif]--></li>

</ul>

<!--[if lte IE 6]></td>

</tr>

</table>

</a><![endif]--></li>

    <li><a href="#"><strong>Kontakt meg</strong></a></li>

    <li><a href="#"><strong>Hjelp?!</strong></a></li>

</ul>

Bytt ut det du vil med dine valg. Dette kan være utrolig vanskelig for noen som ikke kan html/css. DERfor vil jeg i løpet av de nærmeste dagene ordne til et side der dere kan skrive inn meny valg og koden dere skal lime inn i menyen vil automatisk bli laget til.

Men akkurat nå er det litt seint

Menyen er hentet fra: http://www.cssmenus.co.uk her har de mange menyer som du kan laste ned gratis. bare å bruke samme fremgangsmåten som over.

EDIT: Stine Sandberg har også skrevet sin egen forklaring på sin blogg, hvis du ikke forstår noe av det jeg skriver over så ta en titt innom hennes blogg.

10 juli, 2009 at 3:51 by Tronds

Posted in Design, Meny | 37 Comments »

25 mai 2009

Design: Bakgrunnsbilde i kommentar felt.

Dette er ikke et “must”, men en grei måtte å lære seg å legge bakgrunns bilder i et “div” felt. “div” ser slik ut i “malen”:

<div class=”wrapper”>En eller annen tekst </div>

Her ser du en “div” den skaper på en måtte et lite “vindu”. den sier også class=”wrapper”, på normalt språk vil det si. “Følg de reglene som står i Stilsett filen under WRAPPER”. I “stilsett” filen står det kanskje

#wrapper{
background-color: red;
}

Da vet “div” at bakgrunnen skal være rød.

Nok tull, la oss begynne..

Vanskelighetsgrad: Lett

Vi skal nå prøve å ordne et bakgrunnsbilde på kommentar feltet.

Første vi må gjøre er valg av bilde, fin et bilde som passer fint inn, det må ikke være for stort og det må være mulig å lese teksten som skal skrives over. Når du har fikset et bilde last det opp og noter url til det.

Så går du inn til “stilsett” filen

Plasser disse linjene i “stilsett” filen:

1
2
3
4

/* Setter inn bilde i kommentar feltet */

#newcomment textarea{

background: url( URL-TIL-BILDET-DU-SKAL-BRUKE ) no-repeat right top;

}

no-repeat forteller at den ikke skal repetere bildet. Andre muligheter er repeat, repeat-x ( repeterer bortover), repeat-y ( repeterer nedover ).

right forteller hvor bildet skal være. Andre muligheter er left og center.

top forteller hvor bildet skal være på siden. Andre muligheter er bottom eller center.

Dette kan du bruke mange plasser på siden. feks med å bytte ut “#newcomment textarea” med “#side” så vil du sette bakgrunnsbildet i side stolpen ( der profilbildet normalt er)

Lykke til

25 mai, 2009 at 1:42 by Tronds

Posted in Bakgrunn, Design, Kommentar | 13 Comments »

24 mai 2009

Design: Flytte eller fjerne teksten i headeren

Det er mange som har veldig bra headere, men det er ikke alltid teksten blir så bra sammen med headeren. Da har du to muligheter. Fjerne den, eller flytte litt på den.

Vanskelighetsgrad: Veldig enkelt

Helt nederst i “stilsett” filen skriver du inn følgende:

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

#header h1, #header p{

position:relative;

top: 100px; /* her skriver du inn hvor mange pixler ( bilde punkt ) 

du vil ha flyttet den ned, prøv deg frem */

left: 0px; /* Her sier vi hvor lagt fra kanten den 

skal være */

display: block ; /* "block" sier at den skal bli vist, 

hvis du forandrer den til "none" vil den ikke vises */

}

Alltid ta forhåndsvisning før du lagrer koden.

Lykke til

24 mai, 2009 at 18:32 by Tronds

Posted in Design, Header | No Comments »

24 mai 2009

Design: Forandre størrelsen på kommentar boksen

På utrolig mange blogg design er størrelsen på kommentar boksen feil. Når du skriver lange setninger så ser du ikke hva du skriver på slutten..

Dette er en enkel sak å fikse.

så setter du inn følgende kode nederst i “stilsett” filen:

1
2
3
4

/* Forandrer størrelsen på kommentar boksen */

#main textarea{

width: 380px;  /* du må kanskje tilpasse denne ditt design, gjør den mindre eller større */

}

24 mai, 2009 at 12:49 by Tronds

Posted in Design, Kommentar | 14 Comments »

22 mai 2009

Design: Bakgrunn ( mønster )

For å få litt ekstra “liv” i et design så kanskje det kunne vært en idé å putte inn et mønster. Dette er veldig enkelt å fikse.

Først må du finne noe du vil ha, hvis du ikke har noe vil jeg anbefale deg å ta en titt innom http://bgpatterns.com/ her finnes utrolig mange. Du har også muligheten til å justere litt på dem. Når du har funnet et du liker så trykk på “Download image” og lagre det på datamaskinen din.

Du må laste opp det bilde som du vil ha som mønster på blogg.no.

Noter deg adressen til bildet.

Så skal vi inn å forandre på designet ditt. Følg anvisningen under:

Helt nederst setter du inn:

1
2
3

body{

background: url(ADRESSEN TIL BILDET DU VIL BRUKE);

}

Trykk på “forhåndsvis” for å se resultatet. Hvis du er fornøyd så lagrer du stilsettet.

med å forandre “body” til “#side” i koden over vil du få mønster i side spalten. “#wrapper” vil gi deg bakgrunn på innlegget og side spalten. “#main” vil gi deg bare innlegget.

Du kan selvfølgelig putte inn flere koder også. Husk at det skal gå ann å lese teksten også!! er litt viktig

Lykke til

22 mai, 2009 at 1:35 by Tronds

Posted in Bakgrunn, Design | 10 Comments »

20 mai 2009

Design: Blockqoutes

Hva er blockqoutes? Feks hvis du skal gjengi noe som noen andre har skrevet på bloggen, eller du har hørt i en film, lest i avisen. Da kan bruke den til det.

Vanskelighetsgrad: Lett, trenger bare å gjøre forandringer i “stilsett” filen.

Det du må gjøre er å skrive teksten du vil skal bli gjengi, gå over til html editoren og skriv <blockquotes> forand teksten du nettopp skrev og </blockquotes> etter teksten. Lagre trykk på forhåndsvisning og se at teksten ble “skubbet” litt lenger inn på siden. Det er “blockquotes”.

MEn den ser vel litt kjedelig ut? la oss “pimpe” den opp litt

Vi skal inn å forandre på “stilsett” filen. Slik gjør vi det:

Når det er gjort tilføy følgende kode nederst i filen:

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

blockqoutes{

width: 300px;  /* her stiller du hvor bredd den skal være */

border-left:10px solid #C11;  /*Hvor stor kanten til venstre skal være også fargen den skal ha */

background:#ccc; /* bakgrunnsfarge på boksen

margin:.612em; /* hvor langt inne boksen skal begynne */

padding:.612em;  /* hvor lange inne teksten skal begynne i boksen */

display: block;

text-decoration: none;

}

/* denne her setter inn " forand første tegn */

blockqoutes:before{

content:open-quote;

font-size:4em; /* størrelse på tegnet */

color:#000; /* fagre den skal ha */

vertical-align:-.4em; /*hvor mye den skal forflytte seg */

margin:0 .2em 0 0; /* hvor lange fra resten av teksen skal plassere seg */

line-height:.1em /* linje høyde *

}

Også er det bare å lagre. Da var det gjort.

TIPS: Er du som meg og aldri bruker gjennomstreking av teksten ( ABC )? Da har du muligheten til å gjøre den knappen om til blockqoutes. Det er igrunn ganske enkelt, gå inn i “stilsett” filen igjen, forandre “.blockqoutes” til “strike” ( Merk at “.” forsvinner også ). Forandre også “.blockqoutes:before” til “strike:before”. Lagre stillen så var vi ferdig. Når du nå skal ha tekst blockqoutes så skriver du først teksten, merker den og trykk på “ABC” knappen. Trykk på forhåndsvisning og du vil se at teksten ble blockqouta.

Og som alltid har du noen spørsmål så er det bare å skrike ut.

Lykke til.

20 mai, 2009 at 2:42 by Tronds

Posted in Design, Nerding, blogg.no | 15 Comments »

Archive for the ‘Design’ Category

Design: Meny “fane”

Design: Forskjellige ramme streker/mønster

Design: Feilsøking i stilsett filen

Du ønsker?

Design: Meny ( dropdown )

Design: Bakgrunnsbilde i kommentar felt.

Design: Flytte eller fjerne teksten i headeren

Design: Forandre størrelsen på kommentar boksen

Design: Bakgrunn ( mønster )

Design: Blockqoutes

Legg meg til som venn

Siste innlegg

Siste kommentarer

Emner

Bloggrull