Archive for the ‘Kommentar’ Category
You are currently browsing the archives for the Kommentar category.
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?
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
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 */ } |
