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

/* 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

/* 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

/* 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;
}