• Hjem
  • Portefolie
  • Om bloggen
  • Om meg
  • Gratis design
  • Blogger jeg liker
  • Designhjelp
  • Hvordan jeg hjelper
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.

15 Kommentarer til “Design: Blockqoutes”

  1. Nathalie says:
    20. mai, 2009 klokken 17:09

    Takk for det, det at jeg ikke kan skrive har jeg fÃ¥tt som kommentar pÃ¥ bloggen ” lær deg Ã¥ skrive, du kan jo ikke skrive ”

    og det med at jeg er dum har jeg fått hørt litt rundt på nettet og av venner, fordi jeg ikke klarer helt å formidle(?) ordene riktig, alltid. og ikke kan så mye.. ifølge de, da.

    jeg har tenkt å gå videre på skolen, og etter det ut i jobb.. Så da som du sier kommer det nok ikke til å være så mye fravær på vgs, så da håper jeg om jeg søker jobb at det er det fravære de ser på og ikke hva jeg hadde på u-skolen.

    ja det er helt sant, var det jeg prøvde og få frem.. (det med sympati)

    Ja det har vært en stor hjelp for meg å få skrive ned alt som plager meg og det jeg sliter med på bloggen, det blir på en måte en terapi.

    Tusen takk for at du tok deg tid til og skrive til meg, sånne tilbake meldinger hjelper mye på skal du vite..

  2. Fay Kristine says:
    20. mai, 2009 klokken 17:51

    Hei :)
    Jeg lurte bare på om du vet hvordan man blir kvitt menyen på bloggen? Vil du hjelpe meg? :)

    http://www.faykristine.blogg.no

  3. Tronds says:
    20. mai, 2009 klokken 18:30

    fay: ser ikke noe meny jeg :)

  4. Fay Kristine says:
    20. mai, 2009 klokken 18:40

    sv: den er sÃ¥nn helveis borte nÃ¥, men det er hvit der den var, og det gÃ¥r ikke vekk! Hehe. (det er forresten den menyen med kategorier og slikt). Jeg vil liksom bare ha “innholdet”, og ikke menyen :p

    Fay Kristines siste blogg innlegg..BLOW ME IN THE WIND

  5. Tronds says:
    20. mai, 2009 klokken 19:06

    Du vil med andre ord utvide innleggene slik at de dekker alt? og fjerne det på siden?

    sett denne inn i “stilsett” filen din:

    #main{
    width: 100%;
    }

    #side{
    width: 0;
    }

    Lykke til :)

  6. Fay Kristine says:
    20. mai, 2009 klokken 19:09

    sv: Da får jeg prøve det :)
    Tusen takk! ;D

  7. Fay Kristine says:
    20. mai, 2009 klokken 19:15

    Hehe, jeg fÃ¥r det ikke til :p Det hvite er der fremdeles… Hehe.

  8. Tronds says:
    20. mai, 2009 klokken 19:37

    plasserte du det helt nederst i “stilsett” filen?

    Ser at den siste stilen din der “h2″ mangler en “}” pÃ¥ slutten..

    Hvis du plasteret koden jeg sa etter det den så ble det spist opp av den feilen :)

    plasser inn denne dette her helt nederst:

    }
    #main{
    width: 100%;
    }

    #side{
    width: 0;
    }

    Du hadde ikke inne koden nå nei ?

  9. Tonje says:
    21. mai, 2009 klokken 00:52

    Bortsett fra du ikke trenger å jobbe i hagen i regnværet? Ja, noe sånt ;)
    Tonjes siste blogg innlegg..En av topp ti-bloggerne til Silje Marita

  10. Hundrings says:
    21. mai, 2009 klokken 01:39

    Nei! Disse er bare tilfeldige mennesker! IKKE mine modeller! Bare tre av dem er det. Hehe;)

    Hundringss siste blogg innlegg..Ny vri pÃ¥ designet…

  11. Fay Kristine says:
    21. mai, 2009 klokken 10:18

    NÃ¥ er desginet mitt ferdig :) Tusen takk for hjelpen! :D
    Fay Kristines siste blogg innlegg..FERDIG

  12. Tronds says:
    21. mai, 2009 klokken 11:10

    Ikke noe problem :) husk Ã¥ legge meny’n inn i malen “Enkeltinnlegg” ogsÃ¥, ellers vil den ikke vises nÃ¥r noen er inne pÃ¥ et innlegg.

  13. Marita Beate says:
    5. juni, 2009 klokken 10:56

    Heisann :)
    Har du noen desing koder til nett siden min ?
    Altså kanskje noen knasje farger..

    Marita Beates siste blogg innlegg..Overskriften har ikke noe med innlegget

  14. Tronds says:
    5. juni, 2009 klokken 11:35

    Marita Beate: farger ja, joda. Jeg er mega god på fager.. NOT, men det finnes hjelp. http://www.colourlovers.com/ her finner du ferdige oppsatte farger som passer sammen. Hvis du har en farge som går igjen i headeren så skrive inn farge koden her: http://colormixers.com/mixers/cmr/ eller denne http://slayeroffice.com/tools/color_palette/ . Hvis du har et bilde så kan du her laste det opp også vil den finne farger som passer til bilde.. Har ikke prøv denne enda selv: http://jrm.cc/color-palette-generator/ bildet kan ikke være så utrolig stort.

    Du klarer å plassere inn fargene selv? hvis ikke kan jeg ordne litt kode til deg der du bare har å måtte skrive inn farge kodene selv.

  15. Frk I says:
    15. mars, 2010 klokken 19:39

    Elsker siden din allerede! Mange tusen takk! Så får du ta en titt på bloggen min om et par dager igjen og se hvordan den har blitt:)

Legg inn et svar


Jeg ønsker selvfølgelig at du legger inn en kommentar, men jeg ønsker kommentarer på det jeg skriver over her.
Hvis jeg har skrevet noe dumt eller hel teit på bloggen din så svar gjerne her.
MEN ta deg tid til å lese gjennom det jeg også har skrevet da. Legg gjerne igjen en kommentar på det :)
Click here to cancel reply.

« Design: Favicon?
Design: Bakgrunn ( mønster ) »
Følg meg!
  • Legg meg til som venn

    Er du en blogg.no bruker så har du muligheten til å legge meg til som venn. Blir enklere å følge meg. Når jeg føler for det tilbyr jeg også å lage design til tilfeldige personer som er har lagt meg til som "venn". Om du har 1 eller 10000 lesere har ikke noe betydning.

  • Siste innlegg

    • Bloggpause? neida, et litt opphold.
    • En liten preview av designverktøyet.
    • Lag ditt eget design enkelt
    • Bloggtrafik.nu merkelig poengsystem
    • Slik ser det ut hos meg nÃ¥!
  • Siste kommentarer

    • therese birkeland til Design: Meny
    • Martine til Design: Favicon?
    • Martine til Design: Favicon?
    • Martine til Design: Favicon?
    • Hjørdis Isabell til Design: Fjern “sisteinnlegg” “kategori” “Arkiv” fra sidemenyen
  • Emner

    backup Design Hva er best KRIK nerd opplevelser tur youtube zargate Andre blogger (2)
    Bakgrunn (2)
    Bilder på nettet (1)
    Blogg (55)
    blogg.no (7)
    CSS (3)
    Design (22)
    Design bygger (2)
    Design forbedringer (5)
    Dyrene (1)
    Familie (8)
    Favicon (1)
    Ferie (1)
    Firefox (2)
    Forbedringer (2)
    Gratis Design (3)
    Header (1)
    html/css (7)
    Hva er best (1)
    Hverdag (1)
    Hvordan gjør de det? (2)
    IKEA (2)
    Ipod touch (2)
    Jobb (4)
    Just for fun (20)
    Kommentar (3)
    KRIK (3)
    Lenker (6)
    Lister (1)
    Lurer på (3)
    Mat (6)
    Meny (3)
    Merkelig (1)
    mote (2)
    Musikk (3)
    Nerding (19)
    nyttige sider (2)
    Onlinetools (1)
    opplevelser (5)
    Personlig (14)
    Produkt (2)
    Siden (3)
    Slik er jeg (1)
    Surfende (1)
    Tanker (11)
    Tatovering (1)
    Tech (4)
    Ting som skjer (4)
    Trening (2)
    Uncategorized (1)
    Wordpress (1)
    youtube (2)

    WP Cumulus Flash tag cloud by Roy Tanck requires Flash Player 9 or better.

  • Bloggrull

Alt har en begynnelse… is powered by WordPress
Theme Design by Generic Designer

Entries (RSS) and Comments (RSS)
Bloggurat