O codigo está pronto, vc só precisa copiar e colar no seu template acima da tag b:skin
E outra: tem tudo explicadinho em cada seletor pra vcs que quizerem editar ok?
DICA: clique em copiar no canto direito do código, irá abrir um pop-up com o codigo sem os numeros !
Estilo 1 (rosinha):
/**======================================================================
AREA GERAL DOS COMMENTS
========================================================================**/
.comments{
width:99% !important; /* TAMANHO DA AREA DOS COMMENTS - se passar da coluna diminua */
margin:0 auto;
font-style:normal !important;
font-size:12px !important; /* TAMANHO DO TEXTO - se ficar pequeno, aumente os pixels */
font-family:verdana !important; /* FONT DO TEXTO - se preferir troque */
background:#fff url(http://3.bp.blogspot.com/-yZ-IF2a2ssk/TydQ9v08H9I/AAAAAAAAA6w/DYf0cwgfPxQ/s1600/humidor-pink.gif) /* IMAGEN DO FUNDO */
}
/**=======================================================================
HEADING DOS COMMENTS (1 comentario, 2 comentários...)
========================================================================**/
.comments h4{
width:98%;
padding:7px;
margin-bottom:10px;
background:#fee; /* COR DO FUNDO - se preferir troque */
color:#f9b; /* COR DO TEXTO - se preferir troque */
font-family:courier new !important;/* FONT-FAMILY - se preferir troque */
font-size:20px ; /* TAMANHO DO TEXTO - se preferir troque */
box-shadow:0 2px 3px #faa /* EFEITO SOMBRA */
}
/** ==================================================================
BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone ...)
====================================================================**/
.comments .comment-block {
position:static !important; /* MANTÉM O AVATAR NA FRENTE DO BLOCO - NÃO MUDE */
background:#fee !important; /* COR DO FUNDO */
padding:0.5em 1em;
border-radius:5px !important;
border:1px #fff solid !important;
box-shadow:inset 0 1px 3px #faa !important /* EFEITO FUNDO REBAIXADO*/
}
.comments .comments-content .comment {
padding:20px 10px !important;
margin-bottom:15px !important
}
/* estilos para o nome do autor do comentário */
.comments .comments-content .user a{
font-style:normal;
border:0;margin-left:10px;
color:#ff1499;
text-shadow:0 1px #ccc;
border-bottom:2px #fff dotted;
font-family:consolas;
background:none;
padding-left:0
}
/* estilo da data */
.comments .comments-content .datetime a{
background:none;
float:right;
font-size:9px;
color:#DF6699;
opacity:0.5
}
/* estilo do avatar */
.avatar-image-container {
min-width:60px; /* determina um minimo de largura */
min-height:60px; /* determina um minimo de altura */
border:5px #fee solid; /* borda */
border-radius:60px; /* arredondamento */
padding:0 !important;
box-shadow:0 0 3px #faa; /* sombra */
margin-left:6px !important;
margin-top:-1px !important;
background:#fff;
overflow:hidden /* hack para evitar serrilhado na imagem */
}
.avatar-image-container img {
opacity:0.7; /* opacidade */
margin:0;
display:block;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
padding:0;
border-radius:60px; /* arredondamento */
overflow:hidden;
border:0 !important;
overflow:hidden /* hack para evitar serrilhado na imagem */
}
/** ==================================================================
TEXTO DO COMENTÁRIO
====================================================================**/
.comments blockquote{
background:transparent !important;
border:0 !important;
font-style:normal !important;
font-size:12px !important;
font-family:courier new !important;
text-shadow:0 1px #fff !important;
padding-left:20px !important;
color:#777
}
/** ==================================================================
BOTÕES - RESPONDER, EXCLUIR
====================================================================**/
/* botao responder do segundo nível */
.comments .continue a {
float:right;
padding:2px 4px!important;
height:23px;line-height:23px !important;
margin-top:-45px !important;
text-shadow:0 0 none !important
}
/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
font-size:11px !important;
color:#fff !important;
padding:3px 6px;
border:0 !important;
line-height:30px;
margin:5px;
margin-left:10px;
font-family:helvetica;
text-shadow: 0 1px 1px rgba(0,0,0,.3) !important;
border-radius: .5em;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
background: #f895c2;
background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab))!important;
background: -moz-linear-gradient(top, #feb1d3, #f171ab)!important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab')!important
}
/* botao hover*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover {
text-decoration:none !important;
padding:6px
}
/* botao excluir */
.comments .comment .item-control a{
background:#d8c3f3;
background: -webkit-gradient(linear, left top, left bottom, from(#f3e8f6), to(#d8c3f3)) !important;
background: -moz-linear-gradient(top,#f3e8f6,#d8c3f3) !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3e8f6', endColorstr='#d8c3f3') !important
}
/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color:transparent !important
}
.comments .comments-content .comment-replies {
margin-top:1em;
margin-left:56px !important
}
.comments .continue {
border-top:0 !important
}
.comments .thread-toggle,.icon.blog-author {display:none !important}
/** ==================================================================
BONUS - estilos para formatação do texto dos comments
====================================================================**/
.comments .comments-content a{background:#fee url(http://lh3.ggpht.com/_NZJzdRm10Y0/TTSFb1rPnWI/AAAAAAAAAFM/1kbIuCoul8A/s800/th_minisetas.gif)no-repeat left;color:#DF6699;padding-left:15px;padding-right:3px;border:1px #fff dashed;font-weight:400}
.comments .comments-content em{background:#fee;font:normal 12px 'segoe script';color:#ff1490}
.comments .comments-content strong{background:#fff;font:normal 12px 'consolas';color:#000;display:block; border:1px #eee dashed}
.comments .comments-content b{font-weight:800;color:#DF6699;text-shadow:0 1px #ccc}
/** ==================================================================
Fim [by Gizaa// http://candylland.blogspot.com]
====================================================================**/Estilo 2 (verdinho neutro)
/**======================================================================
AREA GERAL DOS COMMENTS
========================================================================**/
.comments{
width:99% !important; /* TAMANHO DA AREA DOS COMMENTS - se passar da coluna diminua */
margin:0 auto;
font-style:normal !important;
font-size:12px !important; /* TAMANHO DO TEXTO - se ficar pequeno, aumente os pixels */
font-family:verdana !important; /* FONT DO TEXTO - se preferir troque */
background:#fff url(http://3.bp.blogspot.com/-r7k1UMxgyc8/TydQ-FIjOQI/AAAAAAAAA64/xH3qT6Wg_e0/s1600/light-tile.gif) /* IMAGEN DO FUNDO */
}
/**=======================================================================
HEADING DOS COMMENTS (1 comentario, 2 comentários...)
========================================================================**/
.comments h4{
width:98%;
padding:7px;
margin-bottom:10px;
background:rgb(222,222,210); /* COR DO FUNDO - se preferir troque */
color:#fff; /* COR DO TEXTO - se preferir troque */
font-family:segoe print !important;/* FONT-FAMILY - se preferir troque */
font-size:20px ; /* TAMANHO DO TEXTO - se preferir troque */
box-shadow:0 2px 3px #ccc /* EFEITO SOMBRA */
}
/** ==================================================================
BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone ...)
====================================================================**/
.comments .comment-block {
position:static !important; /* MANTÉM O AVATAR NA FRENTE DO BLOCO - NÃO MUDE */
background:#fff !important; /* COR DO FUNDO */
padding:0.5em 1em;
border-radius:5px !important;
box-shadow:inset 0 1px 3px #ccc !important /* EFEITO FUNDO REBAIXADO*/
}
.comments .comments-content .comment {
padding:20px 10px !important;
margin-bottom:15px !important
}
/* estilos para o nome do autor do comentário */
.comments .comments-content .user a{
font-style:normal;
border:0;margin-left:10px;
color:#777 !important;
text-shadow:0 1px #ccc;
font-family:segoe print;
background:none;
padding-left:0
}
/* estilo da data */
.comments .comments-content .datetime a{
background:none;
float:right;
font-size:9px;
color:#ddd;
}
/* estilo do avatar */
.avatar-image-container {
min-width:60px; /* determina um minimo de largura */
min-height:60px; /* determina um minimo de altura */
border:5px rgb(222,222,210) solid; /* borda */
border-radius:60px; /* arredondamento */
padding:0 !important;
box-shadow:0 0 3px #ccc; /* sombra */
margin-left:6px !important;
margin-top:-1px !important;
background:#fff;
overflow:hidden /* hack para evitar serrilhado na imagem */
}
.avatar-image-container img {
opacity:0.7; /* opacidade */
margin:0;
display:block;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
padding:0;
border-radius:60px; /* arredondamento */
overflow:hidden;
border:0 !important;
overflow:hidden /* hack para evitar serrilhado na imagem */
}
/** ==================================================================
TEXTO DO COMENTÁRIO
====================================================================**/
.comments blockquote{
background:transparent !important;
border:0 !important;
font-style:normal !important;
font-size:12px !important;
font-family:courier new !important;
text-shadow:0 1px #ddd !important;
padding-left:20px !important;
color:#777
}
/** ==================================================================
BOTÕES - RESPONDER, EXCLUIR
====================================================================**/
/* botao responder do segundo nível */
.comments .continue a {
float:right;
padding:2px 4px!important;
height:23px;line-height:23px !important;
margin-top:-45px !important;
text-shadow:0 0 none !important
}
/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
font-size:11px !important;
color:#fff !important;
padding:3px 6px;
border:0 !important;
line-height:30px;
margin:5px;
margin-left:10px;
font-family:helvetica;
text-shadow: 0 1px 1px rgba(0,0,0,.3) !important;
border-radius: .5em;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
background: #f895c2;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(rgb(222,222,210)))!important;
background: -moz-linear-gradient(top, #eee, rgb(222,222,210))!important;
}
/* botao hover*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover {
text-decoration:none !important;
padding:6px
}
/* botao excluir */
.comments .comment .item-control a{
background:#d8c3f3;
background: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#eee)) !important;
background: -moz-linear-gradient(top,#aaa,#eee) !important;
}
/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color:transparent !important
}
.comments .comments-content .comment-replies {
margin-top:1em;
margin-left:56px !important
}
.comments .continue {
border-top:0 !important
}
.comments .thread-toggle,.icon.blog-author {display:none !important}
/** ==================================================================
BONUS - estilos para formatação do texto dos comments
====================================================================**/
.comments .comments-content a{background:#fee url(http://lh3.ggpht.com/_NZJzdRm10Y0/TTSFb1rPnWI/AAAAAAAAAFM/1kbIuCoul8A/s800/th_minisetas.gif)no-repeat left;color:#DF6699;padding-left:15px;padding-right:3px;border:1px #fff dashed;font-weight:400}
.comments .comments-content em{background:#fee;font:normal 12px 'segoe script';color:#ff1490}
.comments .comments-content strong{background:#fff;font:normal 12px 'consolas';color:#000;display:block; border:1px #eee dashed}
.comments .comments-content b{font-weight:800;color:#DF6699;text-shadow:0 1px #ccc}
/** ==================================================================
Fim [by Gizaa// http://candylland.blogspot.com]
====================================================================**/Estilo 3 (bordô luxo):
/**======================================================================
AREA GERAL DOS COMMENTS
========================================================================**/
.comments{
width:99% !important; /* TAMANHO DA AREA DOS COMMENTS - se passar da coluna diminua */
margin:0 auto;
font-style:normal !important;
font-size:12px !important; /* TAMANHO DO TEXTO - se ficar pequeno, aumente os pixels */
font-family:verdana !important; /* FONT DO TEXTO - se preferir troque */
background:#fff url(http://1.bp.blogspot.com/-7XpmDqbqhHE/TydQ_dlpkXI/AAAAAAAAA7I/WpYaxNGD4gg/s1600/plum-thatch.gif) /* IMAGEN DO FUNDO */
}
/**=======================================================================
HEADING DOS COMMENTS (1 comentario, 2 comentários...)
========================================================================**/
.comments h4{
width:98%;
padding:7px;
margin-bottom:10px;
background:rgb(139,48,93); /* COR DO FUNDO - se preferir troque */
color:#fff; /* COR DO TEXTO - se preferir troque */
font-family:segoe print !important;/* FONT-FAMILY - se preferir troque */
font-size:20px ; /* TAMANHO DO TEXTO - se preferir troque */
box-shadow:0 2px 3px #333 /* EFEITO SOMBRA */
}
/** ==================================================================
BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone ...)
====================================================================**/
.comments .comment-block {
position:static !important; /* MANTÉM O AVATAR NA FRENTE DO BLOCO - NÃO MUDE */
background:rgb(139,48,93) !important; /* COR DO FUNDO */
padding:0.5em 1em;
border-radius:5px !important;
box-shadow:inset 0 1px 4px #333 !important /* EFEITO FUNDO REBAIXADO*/
}
.comments .comments-content .comment {
padding:20px 10px !important;
margin-bottom:15px !important
}
/* estilos para o nome do autor do comentário */
.comments .comments-content .user a{
font-style:normal;
border:0;margin-left:10px;
color:#fff !important;
text-shadow:0 1px #333;
font-family:segoe print;
background:none;
padding-left:0
}
/* estilo da data */
.comments .comments-content .datetime a{
background:none;
float:right;
font-size:9px;
color:#000;
}
/* estilo do avatar */
.avatar-image-container {
min-width:60px; /* determina um minimo de largura */
min-height:60px; /* determina um minimo de altura */
border:5px rgb(139,48,93) solid; /* borda */
border-radius:35px/10px; /* arredondamento */
padding:0 !important;
box-shadow:0 0 3px #333; /* sombra */
margin-left:6px !important;
margin-top:-1px !important;
background:rgb(139,48,93);
overflow:hidden /* hack para evitar serrilhado na imagem */
}
.avatar-image-container img {
opacity:0.8; /* opacidade */
margin:0;
display:block;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
padding:0;
border-radius:35px/10px; /* arredondamento */
overflow:hidden;
border:0 !important;
overflow:hidden /* hack para evitar serrilhado na imagem */
}
/** ==================================================================
TEXTO DO COMENTÁRIO
====================================================================**/
.comments blockquote{
background:transparent !important;
border:0 !important;
font-style:normal !important;
font-size:12px !important;
font-family:courier new !important;
text-shadow:0 0 !important;
padding-left:20px !important;
color:#fff
}
/** ==================================================================
BOTÕES - RESPONDER, EXCLUIR
====================================================================**/
/* botao responder do segundo nível */
.comments .continue a {
float:right;
padding:2px 4px!important;
height:23px;line-height:23px !important;
margin-top:-45px !important;
text-shadow:0 0 none !important
}
/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
font-size:11px !important;
color:#fff !important;
padding:3px 6px;
border:0 !important;
line-height:30px;
margin:5px;
margin-left:10px;
font-family:helvetica;
text-shadow: 0 1px 1px rgba(0,0,0,.3) !important;
border-radius: .5em;
box-shadow: 0 1px 2px #333;
background: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#000))!important;
background: -moz-linear-gradient(top, #999, #000)!important;
}
/* botao hover*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover {
text-decoration:none !important;
padding:6px
}
/* botao excluir */
.comments .comment .item-control a{
background:#999;
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#777)) !important;
background: -moz-linear-gradient(top,#000,#777) !important;
}
/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color:transparent !important
}
.comments .comments-content .comment-replies {
margin-top:1em;
margin-left:56px !important
}
.comments .continue {
border-top:0 !important
}
.comments .thread-toggle,.icon.blog-author {display:none !important}
/** ==================================================================
BONUS - estilos para formatação do texto dos comments
====================================================================**/
.comments .comments-content a{background:#fee url(http://lh3.ggpht.com/_NZJzdRm10Y0/TTSFb1rPnWI/AAAAAAAAAFM/1kbIuCoul8A/s800/th_minisetas.gif)no-repeat left;color:#DF6699;padding-left:15px;padding-right:3px;border:1px #fff dashed;font-weight:400}
.comments .comments-content em{background:#fee;font:normal 12px 'segoe script';color:#ff1490}
.comments .comments-content strong{background:#fff;font:normal 12px 'consolas';color:#000;display:block; border:1px #eee dashed}
.comments .comments-content b{font-weight:800;color:#DF6699;text-shadow:0 1px #ccc}
/** ==================================================================
Fim [by Gizaa// http://candylland.blogspot.com]
====================================================================**/Estilo 3 (kawaii)
/**======================================================================
AREA GERAL DOS COMMENTS
========================================================================**/
@font-face {font-family:'Fugaz One';font-style:normal;font-weight:400;src:local('Fugaz One'),local('FugazOne-Regular'), url('http://themes.googleusercontent.com/static/fonts/fugazone/v3/foh--NswBHNPbRHy7yEyyD8E0i7KZn-EPnyo3HZu7kw.woff') format('woff')}
.comments{
width:99% !important; /* TAMANHO DA AREA DOS COMMENTS - se passar da coluna diminua */
margin:0 auto;
font-style:normal !important;
font-size:12px !important; /* TAMANHO DO TEXTO - se ficar pequeno, aumente os pixels */
font-family:verdana !important; /* FONT DO TEXTO - se preferir troque */
background:#fff url(http://3.bp.blogspot.com/-KTD55xZPLr4/Tyd5MeQGd_I/AAAAAAAAA7w/h4lrLTr-HwA/s1600/7659611_keOzA.gif) /* IMAGEN DO FUNDO */
}
/**=======================================================================
HEADING DOS COMMENTS (1 comentario, 2 comentários...)
========================================================================**/
.comments h4{
width:98%;
padding:7px;
margin-bottom:10px;
background:#ffe; /* COR DO FUNDO - se preferir troque */
color:#f9b; /* COR DO TEXTO - se preferir troque */
font-family:'Fugaz One' !important;/* FONT-FAMILY - se preferir troque */
font-size:20px ; /* TAMANHO DO TEXTO - se preferir troque */
text-shadow:0 1px #fff;
box-shadow:0 2px 3px #ccc /* EFEITO SOMBRA */
}
/** ==================================================================
BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone ...)
====================================================================**/
.comments .comment-block {
position:static !important; /* MANTÉM O AVATAR NA FRENTE DO BLOCO - NÃO MUDE */
background:#fde !important; /* COR DO FUNDO */
padding:0.5em 1em;
border-radius:5px !important;
box-shadow:inset 0 1px 4px #aaa !important /* EFEITO FUNDO REBAIXADO*/
}
.comments .comments-content .comment {
padding:20px 10px !important;
margin-bottom:15px !important
}
/* estilos para o nome do autor do comentário */
.comments .comments-content .user a{
font-style:normal;
border:0;margin-left:10px;
color:#f7b !important;
text-shadow:0 1px #fff;
font-family:'Fugaz One';
background:none;
padding-left:0
}
/* estilo da data */
.comments .comments-content .datetime a{
background:none;
float:right;
font-size:9px;
color:#fff;
}
/* estilo do avatar */
.avatar-image-container {
min-width:60px; /* determina um minimo de largura */
min-height:60px; /* determina um minimo de altura */
border:5px #f7b solid; /* borda */
border-radius:35px/10px; /* arredondamento */
padding:0 !important;
box-shadow:0 0 3px #ccc; /* sombra */
margin-left:6px !important;
margin-top:-1px !important;
background:#fff;
overflow:hidden /* hack para evitar serrilhado na imagem */
}
.avatar-image-container img {
opacity:0.8; /* opacidade */
margin:0;
display:block;
max-height:60px;
min-height:60px;
max-width:60px;
min-width:60px;
padding:0 !important;
border-radius:35px/10px; /* arredondamento */
overflow:hidden;
border:0 !important;
overflow:hidden /* hack para evitar serrilhado na imagem */
}
/** ==================================================================
TEXTO DO COMENTÁRIO
====================================================================**/
.comments blockquote{
background:transparent !important;
border:0 !important;
font-style:normal !important;
font-size:12px !important;
font-family:courier new !important;
text-shadow:0 0 !important;
padding-left:20px !important;
color:#777
}
/** ==================================================================
BOTÕES - RESPONDER, EXCLUIR
====================================================================**/
/* botao responder do segundo nível */
.comments .continue a {
float:right;
padding:2px 4px!important;
height:23px;line-height:23px !important;
margin-top:-45px !important;
text-shadow:0 0 none !important
}
/* botao responder do primeiro nível, mais estilos para o botao do segundo nível */
.comments .comment .comment-actions a,.comments .continue a {
font-size:11px !important;
color:#777 !important;
padding:3px 6px;
border:0 !important;
line-height:30px;
margin:5px;
margin-left:10px;
font-family:helvetica;
text-shadow: 0 1px #fff !important;
border-radius: .5em;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
background: #ffe;
background: -webkit-gradient(linear, left top, left bottom, from(#ffe), to(#ff1))!important;
background: -moz-linear-gradient(top, #ffe, #ff1)!important;
}
/* botao hover*/
.comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover {
text-decoration:none !important;
padding:6px
}
/* botao excluir */
.comments .comment .item-control a{
color:#fff !important;
background:#f9e;
background: -webkit-gradient(linear, left top, left bottom, from(#f7a), to(#f9e)) !important;
background: -moz-linear-gradient(top,#f7a,#f9e) !important;
}
/* estilos para bloco de respostas */
.comments .comment-thread.inline-thread {
background-color:transparent !important
}
.comments .comments-content .comment-replies {
margin-top:1em;
margin-left:56px !important
}
.comments .continue {
border-top:0 !important
}
.comments .thread-toggle,.icon.blog-author {display:none !important}
/** ==================================================================
BONUS - estilos para formatação do texto dos comments
====================================================================**/
.comments .comments-content a{background:#fee url(http://lh3.ggpht.com/_NZJzdRm10Y0/TTSFb1rPnWI/AAAAAAAAAFM/1kbIuCoul8A/s800/th_minisetas.gif)no-repeat left;color:#DF6699;padding-left:15px;padding-right:3px;border:1px #fff dashed;font-weight:400}
.comments .comments-content em{background:#fee;font:normal 12px 'segoe script';color:#ff1490}
.comments .comments-content strong{background:#fff;font:normal 12px 'consolas';color:#000;display:block; border:1px #eee dashed}
.comments .comments-content b{font-weight:800;color:#DF6699;text-shadow:0 1px #ccc}
/** ==================================================================
Fim [by Gizaa// http://candylland.blogspot.com]
====================================================================**/



Nenhum comentário:
Postar um comentário