Área de comentários personalizada .

Olá meus amores , como vão ? Espero que bem . Hoje vou postar um Tutorial de como deixar sua área de comentários igual a minha . Lembrando que eu peguei esse tutorial do Candylland . Tutorial a pedido da dona do Blog Fashion em Cores .

Ok , vamos começar . São dois estilos diferentes caso fique com alguma dúvida deixe um comentário .

#1 Estilo : Sweet Drean .

001 /**======================================================================002 AREA GERAL DOS COMMENTS003 ========================================================================**/004  005 @font-face {font-family: 'Lilita One';src:local('Lilita One'),local('LilitaOne'),url('http://themes.googleusercontent.com/static/fonts/lilitaone/v1/4FUUC-PxqHfbmE-DcA6LXBsxEYwM7FgeyaSgU71cLG0.woff') format('woff')}006  007 .comments{008 width:99% !important;009 margin:0 auto;010 font-style:normal !important;011 font-size:12px !important;012 font-family:verdana !important;013 background:url(http://capricho.abril.com.br/v2010/css/15anos/i/fundo.png) !important;014 border-radius:10px;015 }016  017 /**======================================================018 HEADING DOS COMMENTS (1 comentario, 2 comentários...)019 ========================================================================**/020  021 .comments h3,.comments h4{022 width:98%;023 padding:7px;024 margin-bottom:10px;025 color:#fff;026 text-align:center;027 text-shadow:0 3px #faa;028 font-family:'Lilita One' !important;/* FONT-FAMILY - se preferir troque */029 font-size:33px !important;/* TAMANHO DO TEXTO - se preferir troque */030 }031  032 /** ==================================================================033 BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone ...)======**/034  035 .comments .comment-block {036 position:static !important; /* MANTÉM O AVATAR NA FRENTE DO BLOCO - NÃO MUDE */037 background:#fff; /* COR DO FUNDO */038 margin-left:23px;039 padding:0 15px 0 23px;040 border-top:15px #faa solid;041 border-radius:5px;042 box-shadow:0 0 3px #ccc, inset 0 0 11px #fee043 }044  045 .comments .comments-content .comment {046 padding:20px 10px !important;047 margin-bottom:15px !important048 }049  050 /* estilos para o nome do autor do comentário */051 .comments .comments-content .user a{052 font-style:normal;053 border:0;054 color:rgb(240,94,138)!important;055 letter-spacing:1px;056 font-family:'Lilita One';057 font-size:20px;058 background:transparent;059 padding:4px 36px;060 margin-left:-31px !important;061 border-bottom-right-radius:10px;margin-top:-2px062 }063  064 .comments .comments-content .user{065 font-style:normal;066 border:0;067 color:rgb(240,94,138) !important;068 letter-spacing:1px;069 font-family:'Lilita One';070 font-size:20px;071 background:transparent;072 padding:4px 36px;073 margin-left:11px !important;074 border-bottom-right-radius:10px;margin-top:-2px075 }076  077 /* estilo da data */078 .comments .comments-content .datetime a{079 background:none !important;080 font:bold 11px courier new;081 float:right;082 font-size:10px;083 color:#999;084 border:0 !important085 }086  087 /* estilo do avatar */088 .avatar-image-container {089 min-width:55px; /* determina um minimo de largura */090 min-height:55px; /* determina um minimo de altura */091 border:5px #fbb solid; /* borda */092 padding:0 !important;093 margin-left:23px !important;094 margin-top:17px !important;095 position:absolute !important;096 overflow:hidden !important;097 background:#f90;098 }099  100 .avatar-image-container img {101 border:7px #ff1499 solid;102 margin:0;103 max-height:55px;104 min-height:55px;105 max-width:55px;106 min-width:55px;107 border-radius:60px; /* arredondamento */108 }109  110 /** ==================================================================111 TEXTO DO COMENTÁRIO ===============================================**/112  113 .comments p{114 font-size:12px !important;115 font-family:trebuchet ms !important;116 text-shadow:0 1px #ccc !important;117 padding-left:55px !important;118 padding-bottom:20px;119 color:#888 !important120 }121 /** ==================================================================122 BOTAO - RESPONDER123 ====================================================================**/124  125 /* botao responder do segundo nível */126 .comments .continue a {127 background:#fff !important;128 color:#999 !important;129 float:right;130 padding:8px !important;131 height:10px !important;132 line-height:15px !important;133 margin-top:-35px !important;134 }135  136 /* botao responder do primeiro nível, mais estilos para o botao do segundo nível */137 .comments .comment .comment-actions a,.comments .continue a {138 font-size:11px !important;139 float:right;140 height:10px !important;141 color:#fff;142 padding:6px;143 border:0 !important;144 line-height:10px;145 margin:5px;146 margin-left:40px;147 font-family:helvetica;148 text-shadow: 0 0;149 border-radius: .5em;150 background: rgb(240,94,138);151 font-weight:800;152 box-shadow:0 1px 2px #666153 }154  155 /* botao hover*/156 .comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover {157 text-decoration:none !important;158 padding-bottom:4px159 }160  161 /* estilos para bloco de respostas */162 .comments .comment-thread.inline-thread {163 background-color:transparent !important;164 margin-top:40px;165 padding:0.5em 1em;166 border-radius:5px;167 border:1px #faa dashed168 }169  170 .comments .comments-content .comment-replies {171 margin-top:1em;172 margin-left:56px !important173 }174  175 .comments .continue {border-top:0 !important}176 .comments .thread-toggle,.icon.blog-author {display:none !important}177 /** ==================================================================178 Fim [www.candylland.net]===========================================**/

#2 Estilo :  Sweet MakeUp .

001 /**======================================================================

002 AREA GERAL DOS COMMENTS

003 ========================================================================**/

004 @font-face {

005 font-family: 'Oleo Script';

006 font-style: normal;

007 font-weight: 400;

008 src: local('Oleo Script'), local('OleoScript-Regular'), url('http://themes.googleusercontent.com/static/fonts/oleoscript/v1/_weQNDK6Uf40CiGFKBBUjobN6UDyHWBl620a-IRfuBk.woff') format('woff')

009 }

010  

011 .comments{

012 width:99% !important;

013 margin:0 auto;

014 font-style:normal !important;

015 font-size:12px !important;

016 font-family:verdana !important;

017 background:url(http://capricho.abril.com.br/v2012/css/i/bg-site.png) !important;

018 border-radius:10px;

019 box-shadow:0 0 5px #aaa;

020 }

021  

022 /**=======================================================================

023 HEADING DOS COMMENTS (1 comentario, 2 comentários...)

024 ========================================================================**/

025 .comments h3,.comments h4{

026 width:98%;

027 padding:7px;

028 margin:10px 0 !important;

029 color:rgb(237,28,63);

030 text-align:center;

031 text-shadow:0 0 2px #ccc;

032 background:;

033 font-family:'Oleo Script' !important;/* FONT-FAMILY - se preferir troque */

034 font-size:37px !important; /* TAMANHO DO TEXTO - se preferir troque */

035 }

036  

037 /** ==================================================================

038 BLOCO DOS COMMENTS (engloba: botões, avatar, data, icone ...)

039 ====================================================================**/

040 .comments .comment-block {

041 position:static !important;/* MANTÉM O AVATAR NA FRENTE DO BLOCO - NÃO MUDE */

042 background:#fff; /* COR DO FUNDO */

043 margin-left:23px;

044 padding:0 15px 0 23px;

045 border-top:15px rgb(246,158,175) solid;

046 border-radius:5px;

047 box-shadow:0 0 3px #ccc, inset 0 0 11px #eee

048 }

049  

050 .comments .comments-content .comment {

051 padding:20px 10px !important;

052 margin-bottom:15px !important

053 }

054  

055 /* estilos para o nome do autor do comentário */

056 .comments .comments-content .user a{

057 font-style:normal;

058 border:0;

059 color:rgb(240,94,138) !important;

060 letter-spacing:1px;

061 font-family:'Oleo Script';

062 font-size:26px;

063 text-shadow:0 1px #aaa;

064 background:transparent;

065 padding:4px 36px;

066 margin-left:-31px !important;

067 border-bottom-right-radius:10px;margin-top:-2px

068 }

069  

070 .comments .comments-content .user{

071 font-style:normal;

072 border:0

073 color:rgb(240,94,138) !important;

074 letter-spacing:1px;

075 font-family:'Oleo Script';

076 font-size:26px;

077 text-shadow:0 1px #aaa;

078 background:transparent;

079 padding:4px 36px;

080 margin-left:11px !important;

081 border-bottom-right-radius:10px;margin-top:-2px

082 }

083  

084 /* estilo da data */

085 .comments .comments-content .datetime a{

086 background:none !important;

087 font:bold 11px courier new;

088 float:right;

089 font-size:10px;

090 color:#999;

091 border:0 !important

092 }

093  

094 /* estilo do avatar */

095 .avatar-image-container {

096 min-width:55px; /* determina um minimo de largura */

097 min-height:55px; /* determina um minimo de altura */

098 border:5px #999 solid; /* borda */

099 padding:0 !important;

100 margin-left:23px !important;

101 margin-top:17px !important;

102 position:absolute !important;

103 overflow:hidden !important;

104 background:#666;

105 }

106  

107 .avatar-image-container img {

108 border:3px #000 solid;

109 margin:0;

110 max-height:48px;

111 min-height:48px;

112 max-width:48px;

113 min-width:48px;

114 }

115  

116 /** ==================================================================

117 TEXTO DO COMENTÁRIO

118 ====================================================================**/

119 .comments p{

120 font-size:14px !important;

121 font-family:oleo script !important;

122 text-shadow:0 1px #eee !important;

123 padding-left:55px !important;

124 padding-bottom:20px;

125 color:#888 !important

126 }

127  

128 /** ================================================================

129 BOTAO - RESPONDER

130 ====================================================================**/

131  

132 /* botao responder do segundo nível */

133 .comments .continue a {

134 background:#fff !important;

135 color:#999 !important;

136 float:right;

137 padding:8px !important;

138 height:10px !important;

139 line-height:15px !important;

140 margin-top:-35px !important;

141 }

142  

143 /* botao responder do primeiro nível, mais estilos para o botao do segundo nível */

144 .comments .comment .comment-actions a,.comments .continue a {

145 font-size:11px !important;

146 float:right;

147 height:10px !important;

148 color:#fff;

149 padding:6px;

150 border:0 !important;

151 line-height:10px;

152 margin:5px;

153 margin-left:40px;

154 font-family:helvetica;

155 text-shadow: 0 0;

156 border-radius: .5em;

157 background: rgb(240,94,138);

158 font-weight:800;

159 box-shadow:0 1px 2px #666

160 }

161  

162 /* botao hover*/

163 .comments .comment .comment-actions a:hover,.comments .comments-content .user a:hover {

164 text-decoration:none !important;

165 padding-bottom:4px

166 }

167  

168 /* estilos para bloco de respostas */

169 .comments .comment-thread.inline-thread {

170 background-color:transparent !important;

171 margin-top:40px;

172 padding:0.5em 1em;

173 border-radius:5px;

174 border:1px #ff1499 dashed

175 }

176  

177 .comments .comments-content .comment-replies {

178 margin-top:1em;

179 margin-left:56px !important

180 }

181  

182 .comments .continue {border-top:0 !important}

183 .comments .thread-toggle,.icon.blog-author {display:none !important}

184  

185 /** ==================================================================

186 Fim [www.candylland.net]

187 ====================================================================**/

Beijinhos ;3