Floating Facebook Widget
forsiden webdesign grafikk guider guider
Forsiden » Webdesign » Blogg.no » HTML og CSS » Kommentarstiler

Kommentarstiler

Jeg har laget forskjellige stiler for kommentarer/kommentarfelt som du kan bruke. Disse kodene skal fungere uten problemer om du har et standard blogg.no design. Har du endret på kodene eller brukt en annen designmal så kan det hende at det ikke blir helt likt. Legg inn kodene nederst i stilsettet.

Stil #1

kommentarstil1

/* Kommentarstil 1 av nerdie.me */
input, textarea {
font-family: 'arial';
font-size: 12px;
padding: 3px;
background: none repeat scroll 0% 0% #FFFFFF;
border-radius: 3px;
border: 1px solid #B2B2B2;
box-shadow: 1px 1px 1px 1px #F1F1F1 inset;
}
#comments{
padding: 0;
}
#comment_submit{
width: 110px;
background: #F7F7F7;
}
#comments .owner, #comments .user, #comments .other {
width: auto;
border-bottom: 1px solid #f1f1f1;
background: transparent;
border-top: 0;
border-right: 0;
border-left: 0;
margin: 0 0 10px 0;
min-height: 80px;
padding: 0 0 15px 0;
overflow: hidden;
}
#comments .content{
width: auto;
background: transparent;
padding: 0;
margin: 0;
border: 0;
}
#comments .avatar{
background-color: #ffffff;
border:1px solid;
padding:2px;
margin: 0;
border-radius: 3px;
}
#newcomment{
margin: 10px 0px 10px 0px;
width: auto;
padding: 10px 0 40px 0;
background: #fff;
}
#comment_author_wrapper label, #comment_authoremail_wrapper label, #comment_authorurl_wrapper label, #comment_text_wrapper label{
display: block;
}
#comment_text_wrapper {
margin: 0 0 20px 0;
clear: both;
}
#comment_submit_wrapper {
float: left;
margin: 0 10px 20px 0;
}
#comment_remember_wrapper {
width: 100px;
height: 20px;
float: left;
}
#comment_remember_wrapper {
width: 100px;
height: 20px;
float: left;
}

 

Stil #2

kommentarstil2

/* Kommentarstil 2 av nerdie.me */
input, textarea {
font-family: 'arial';
font-size: 12px;
color: #5a5a5a;
padding: 3px;
background: none repeat scroll 0% 0% #FFFFFF;
border-radius: 3px;
border: 1px solid #B2B2B2;
box-shadow: 1px 1px 1px 1px #F1F1F1 inset;
}
#comments{
padding: 0;
}
#comment_submit{
width: 110px;
background: #F7F7F7;
}
#comments .owner, #comments .user, #comments .other {
width: auto;
border: 1px solid #b2b2b2;
background: #efefef;
margin: 0 0 10px 0;
min-height: 80px;
padding: 5px 8px 5px 8px;
overflow: hidden;
border-radius: 3px;
color: #8a8a8a;
}
#comments .meta {
font-size: 11px;
}
#comments .content{
width: auto;
background: transparent;
padding: 0;
margin: 0;
border: 0;
}
#comments .avatar{
background-color: #ffffff;
border:1px solid;
padding:2px;
margin: 0;
border-radius: 3px;
}
#newcomment{
margin: 10px 0px 10px 0px;
width: auto;
padding: 10px 0 40px 0;
background: #fff;
}
#comment_author_wrapper label, #comment_authoremail_wrapper label, #comment_authorurl_wrapper label, #comment_text_wrapper label{
display: block;
}
#comment_text_wrapper {
margin: 0 0 20px 0;
clear: both;
}
#comment_submit_wrapper {
float: left;
margin: 0 10px 20px 0;
}
#comment_remember_wrapper {
width: 100px;
height: 20px;
float: left;
}
#comment_remember_wrapper {
width: 100px;
height: 20px;
float: left;
}

 

Stil #3

kommentarstil3

/* Kommentarstil 3 av nerdie.me */
input, textarea {
font-family: 'arial';
font-size: 12px;
color: #ff749e;
padding: 3px;
background: none repeat scroll 0% 0% #ffe7ee;
border-radius: 3px;
border: 1px solid #ffa8c2;
box-shadow: 1px 1px 1px 1px #f6c9d6 inset;
}
#comments{
padding: 0;
}
#comment_submit{
width: 110px;
background: #ffe7ee;
color: #ff749e;
}
#comments h4 a {
color: #e04675;
}
#comments .owner, #comments .user, #comments .other {
width: auto;
border: 1px solid #ffa8c2;
background: #ffe7ee;
margin: 0 0 10px 0;
min-height: 80px;
padding: 5px 8px 5px 8px;
overflow: hidden;
border-radius: 3px;
color: #ff749e;
}
#comments .meta {
font-size: 11px;
padding: 0;
margin: 0;
}
#comments .content{
width: auto;
background: transparent;
padding: 0;
margin: 0;
border: 0;
}
#comments .avatar{
background-color: #ffffff;
border:1px solid;
padding:2px;
margin: 0;
border-radius: 3px;
}
#newcomment{
color: #ff749e;
margin: 10px 0px 10px 0px;
width: auto;
padding: 10px 0 40px 0;
background: #fff;
}
#newcomment h3 {
color: #e04675;
}
#comment_author_wrapper label, #comment_authoremail_wrapper label, #comment_authorurl_wrapper label, #comment_text_wrapper label{
display: block;
}
#comment_text_wrapper {
margin: 0 0 20px 0;
clear: both;
}
#comment_submit_wrapper {
float: left;
margin: 0 10px 20px 0;
}
#comment_remember_wrapper {
width: 100px;
height: 20px;
float: left;
}
#comment_remember_wrapper {
width: 100px;
height: 20px;
float: left;
}

5 kommentarer

Singerpappautenbarn 27. mai 2014, kl. 02:45

Hei sann. Prøver ut ditt design men ser ikke ut som kommentaren vises. Jeg har godkjent den og det står «Blogg – 1 kommentar» . Hvor skal jeg sette inn koden for kommentarstil?

aurora 08. september 2014, kl. 12:31

det fungerte! det ble superbra!

Anne Grethe/FotoSeljordslia 09. april 2016, kl. 01:44

Fungerte veldig bra, tusen takk :)

Legg igjen en kommentar til Singerpappautenbarn Avbryt svar

E-postadressen din vil ikke bli publisert. Påkrevde felt er markert med *.

*


Du kan bruke disse HTML-kodene og -egenskapene: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Søk

 

Nerdie.me Design Proudly powered by WordPress