Nyhet! Besøk stihk.com for å få hjelp og gratis bloggdesign

Gratis design #01 til blogg.no bloggere!

Her er en gave til alle som ikke er stødig på css, html, design eller til de som ønsker å fornye sitt nåværende design. Mitt første gratis design for bloggere hos blogg.no er ferdig og det er basert på wordpress-temaet DesignPile.

Design sniktitt

Alt du trenger å gjøre for å ta i bruk dette designet er å gå til "Design > Rediger > Stilsett(css)" i kontrollpanelet ditt og bytte ut HELE css-koden som ligger der fra før, med følgende kode:
ADVARSEL: Det kan være lurt å ta sikkerhetskopi av det designet du har nå, så du ikke gjør noe feil og dermed ikke har noe å gå tilbake til.
/*Design/Tema satt sammen av:Stian - http://idev.blogg.no/
Til bruk for:Bloggere på blogg.no
Design basert på:DesignPile - http://wordpress.site5.net/designpile/
*/
*{margin:0;padding:0;}
body{color:#333333;background:#121212 url(http://i49.tinypic.com/9r39c4.jpg) repeat top left;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:1.35em;}
a{color:#F50C56;text-decoration:underline;font-weight:normal;}
a:hover{text-decoration:none;}
a:focus{outline:none;}
h1{font-size:32px;letter-spacing:-1px;font-weight:normal;padding:10px 0 12px;font-style:italic;font-family:Georgia,"Times New Roman",Times,serif;line-height:1em;}
h1 a{text-decoration:none;border-bottom:1px dotted #F30C55;}
h1 a:hover{border:none;}
h2{font-size:20px;font-weight:normal;font-style:italic;font-family:Georgia,"Times New Roman",Times,serif;letter-spacing:-1px;padding:10px 0;}
ul{list-style:none;}
p{margin:0 0 7px;}
/* Oppsett */
.breadcrumbs{display:none;}
#header,#wrapper,#footer,#side,
#doc2{background:none;width:auto;border:0;padding:0px;}
#doc2{padding:20px 0;height:100%;}
#header,#wrapper,#footer{width:960px;margin:0 auto;}
#header{padding-bottom:15px;}
#header p{margin:-17px 0 0;color:#999999;}
#main{width:632px;padding:24px;background:#ffffff;}
#side{width:280px;background :url("http://i49.tinypic.com/mv70xl.png") no-repeat left bottom;padding-bottom:50px;}
#side div{background:#222222 url(http://i50.tinypic.com/27x303c.jpg) repeat top left;padding:5px 10px 10px;border-top:1px solid #434343;border-right:1px solid #434343;border-bottom:1px solid #434343;color:#888888;}
#profile div,
#profile a img{display:none;}
#side a{color:#888888;text-decoration:none;}
#side a:hover{color:#d1d1d1;}
#side div h3{background:transparent url(http://i50.tinypic.com/90nlw3.png) no-repeat;color:#F8DCE5;}
#side div h3{display:block;font-family:Arial,Helvetica,sans-serif;font-size:15px;height:38px;letter-spacing:normal;line-height:30px;margin-right:-13px;margin-left:-10px;padding:0 0 0 15px;text-transform:uppercase;}
#side h3 a{color:#F8DCE5;}
#side ul li{background:url(http://i50.tinypic.com/xenzp2.png) no-repeat 0 4px;padding-left:15px;}
#footer{padding:25px 0;color:#797979;background:transparent url(http://i47.tinypic.com/28ap36v.png) no-repeat bottom center;}
#footer h4{color:#ffffff;}
#footer a{color:#999999;}
/* Entry */
.entry h2{padding:0;font-size:26px;}
.entry h2 a{color:#F50C56;border-bottom:1px dotted #F30C55;}
.entry h2 a:hover{border:none;}
.entry .meta{color:#999999;}
.entry .meta ul li{margin:0 5px 0 0;}
.entry .content{font-size:14px;line-height:1.5em;}
/* New comment */
#newcomment input,
#newcomment textarea{border:1px dashed #999999;padding:5px;background:#efefef;}
#comment_submit{cursor:pointer;}
/* Divs */
#header h1 a{border:none;}
Hva med header?
Om du også ønsker en header, kan du legge til følgende css-kode i bunnen av stilsettet. Husk å bytt ut "LINK" med adressen til bildet ditt og høyden etter ønske:

#header {
text-indent:-9999px;
background: url(LINK) no-repeat top left;
height: 150px;
}
Oppdager dere noen feil, eller hvis dere støter på noen problemer så er det bare å ta kontakt med meg!
En bedre oversikt over design og kode kommer senere. Dette er bare en tidlig løsning på oppsettet!
22.02.2010 kl.21:29 i Gratis - 29 kommentarer - # - Permalenke - Del på Twitter

29 kommentarer

cecilie :)

23.02.2010 kl.00:01
Jeg er allerede fan av din blogg! Vurderer også å bruke det designet du har lagt ut :) Gleder meg til flere design-tips og gratis design :D

devpublish

23.02.2010 kl.00:15
Veldig, veldig hyggelig å høre, Cecilie! Jeg regner med at jeg lager flere design og guider i fremtiden, så følg med ;D

cecilie :)

24.02.2010 kl.19:11
Hei, jeg lurte bare på om du synes det er greit at vi endrer litt på de gratis designene som du legger ut, eller om du helst vil at vi bruker akkurat den koden du har laget liksom. :)

devpublish

24.02.2010 kl.19:28
Hei, Cecilie :)

Det er bare å endre på koden akkurat som du vil, men det er hyggelig om du refererer til denne bloggen så andre også får vite om de mulighetene jeg tilbyr ;D

cecilie :)

25.02.2010 kl.00:03
Selvfølgelig :D Har linka til bloggen din :)

devpublish

25.02.2010 kl.00:16
Tusen takk for det ;)

cecilie :)

27.02.2010 kl.21:32
Hei igjen :) Har et spørsmål jeg. Hvordan fjerner jeg f.eks. "Siste kategorier" på bloggen (under profilen)? Jeg har prøvd å ta vekk noe fra maler/html, men da blir det greiene som står helt nederst på bloggen (denne tjenesten leveres av blogg.no osv...) helt rart. Det står plutselig helt rotete liksom. Det er kanskje fordi jeg fjerner noe lenger oppe på bloggen, også hopper det nederste oppover eller noe. Vet ikke om du forstod noe av dette men :P
Har et spørsmål til også, angående det designet du har laget :) Hvor endrer jeg skrifttypen på bare innleggene?

devpublish

28.02.2010 kl.18:04
Hei igjen, litt kort svar men håper det hjelper deg :D

For å fjerne kategoriene, må du fjerne følgende fra malen (html) http://img.skitch.com/20100228-dcuax48e2bga7msx93wix512ak.jpg

For å endre skrifttypen på innlegget kan du prøve denne css-koden (legg den helt nederst):

.entry .content {

font-family: times New Roman;

}

The Pyro

01.03.2010 kl.19:42
tusen takk for goe tips...ser virkeli fram te flerre tips og triks ;p

Heidi

04.04.2010 kl.18:06
hva er koden som er på bakgrunnen?? for skal legge heder på bloggen med dette desingne men blir bare tull med fargene..

devpublish

04.04.2010 kl.19:51
Heidi: Her er koden for bakgrunnen:

body{background:#121212 url(http://i49.tinypic.com/9r39c4.jpg) repeat top left;}

Heidi

05.04.2010 kl.13:10
tusen takk:) men lurer på en anna ting å jeg.. den rosa fargen.. hva er farge koden på den.. prøvd finne men...

devpublish

05.04.2010 kl.18:20
Heidi: Fargekoden er #F50C56 :)

<3

24.04.2010 kl.16:00
Lager du et tema som er svart/hvitt og helt enkelt og greit men liekvel stilig, så skal jeg personlig henge opp et bilde av deg på veggen og tilbe deg hver dag :D Ok, det blir kanskje litt creepy O_o

devpublish

25.04.2010 kl.00:42
<3: Hahaha, det er litt creepyy ja :D Kanskje det kommer noe etterhvert, men er dessverre ikke første prioritering :)

Shake that ASS!

28.05.2010 kl.21:14
hei, vi har det designet på bloggen, men jeg skjønner ikke det med headeren, kan du hjelpe meg?

devpublish

28.05.2010 kl.21:48
Hei, selvfølgelig kan jeg hjelpe dere. Jeg har rettet opp en del feil i css-koden (ting dere har lagt til osv). Så hvis dere bytter ut HELE css-koden dere har, men css-koden som dere finner her: http://docs.google.com/Doc?docid=0AZIlhBbsvrInZGY0bnI5N3pfMTZkcjR0NTNmcw&hl=no

Så håper jeg at det løste problemet deres og at dere har en header slik dere ønsket. Lykke til videre med bloggen deres ;)

Shake that ASS!

28.05.2010 kl.22:20
tusen takk :)

Shake that ASS!

28.05.2010 kl.22:50
unnskyld for mas, men jeg hadde lagdt many under header, men den er vekk nå ... hehe, hva kan jeg gjør for å få den tilbake? sorry hvis jeg maser mye, jeg vil bare at designet skal være bra:)

devpublish

28.05.2010 kl.22:56
Beklager, jeg glemte å legge til den css-koden da jeg fikset feilene for deg :)

Legg til følgende css-kode HELT neders (sist) i css-koden du allerede har:

/*Credits: Dynamic Drive CSS Library */

.mattblacktabs{

width: 680px;

overflow: hidden;

padding-right:0px;

background: #ebebeb;

}

.mattblacktabs ul{

margin: 0;

padding: 0;

padding-right: 10px; /*offset of tabs relative to browser left edge*/

font: 13px verdana;

list-style-type: none;

}

.mattblacktabs li{

display: inline;

margin: 10;

}

.mattblacktabs li a{

float: left;

display: block;

text-decoration: none;

margin-left: 0px;

padding: 4px 20px; /*padding inside each tab*/

border-right: 0px solid #ccc; /*right divider between tabs*/

color: #grey;

background: #ebebeb; /*background of tabs (default state)*/

}

.mattblacktabs li a:visited{

color: black;

}

.mattblacktabs li a:hover, .mattblacktabs li.selected a{

background: #grey; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */

}

Caroline og Jasmin! <3

01.06.2010 kl.16:25
heihei... tror du at du kan lage en med litt lysere bakgrunn ? :)

devpublish

10.06.2010 kl.11:40
Caroline og Jasmin!: Ikke med det første :) Prøv å gjør noen endringer selv på de temaene jeg allerde har lagt ut? Eks:

body { background: #dddddd; }

Mari

05.11.2010 kl.20:24
Headeren kommer ikke opp?? hvorfor? jeg lastet bare opp bildet på tinypic og tok url og limte den inn der det stod link. :(

devpublish

05.11.2010 kl.21:03
Mari: Det vet jeg ikke, da jeg ikke får sett feilen selv. Jeg kan tenke meg at det er ett eller annet som er feil i css-koden din.

SARA REITAN / SARAMANDER

06.11.2010 kl.21:44
:P

Ine Marie

24.02.2011 kl.11:07
Hei:)

Prøvde å få inn designet og det gikk helt fint, men da jeg skulle sette inn headeren ble alt feil. Innleggee kom over headeren og du så nesten ikke headeren. Kan du hjelpe meg?

devpublish

24.02.2011 kl.13:31
Ine Marie: Klart jeg kan hjelpe. Hvis du kan legge igjen kodesnutten med bilde du skal ha som header, så kan jeg få sett på det :)

Stine

27.02.2011 kl.12:08
Hei, jeg elsker designet . men jeg får ikke headeren på når jeg har det designet , da kommer bare det gamle designet opp!

kan du hjelpe meg med deg?

devpublish

27.02.2011 kl.13:36
Stine: Så hyggelig å høre :) Skal jeg kunne hjelpe deg må jeg nesten få se på bloggen, men det kan høre ut som det har noe med historikk i nettleser eller noe mellomlagring som blogg.no gjør. Så lenge css-koden er lagt ut så skal ikke det gamle designet komme opp. Da er det noe annet som er feil. Kanskje du kan la koden ligge ute en stund og se om det endrer seg etterhvert?

Skriv en ny kommentar

hits