• 快站
  • 云评论
帮助中心
自定义样式设置

云评论的设计师同学已经为大家设计好了多套精美的皮肤。 当然,如果你希望实现评论样式的自定义,可以参考以下云评论的样式自行进行设计。 你可以在云评论后台“设置-样式自定义-自定义CSS”中修改云评论的样式。

按钮图片样式设置

你可以通过以下样式修改云评论中按钮的样式。首先你需要将按钮图片上传至服务器,然后再将图片链接填至相应的地方。

/* 发布框收起状态按钮 图片尺寸90x42 */
#SOHUCS #SOHU_MAIN #SOHU-comment-main .section-cbox-w .cbox-block-w .block-post-w
.post-default-w.default-wrap-w .btn-fw{
background-image:url("图片链接地址");
background-position:0 0;
}
/* 主发布 - 按钮默认状态 图片尺寸90x42 */
#SOHUCS #SOHU_MAIN #SOHU-comment-main .section-cbox-w .issue-btn-w a .btn-bf{
background-image:url("图片链接地址");
background-position:0 0;
}
/* 主发布 - 按钮hover状态 图片尺寸90x42 */
#SOHUCS #SOHU_MAIN #SOHU-comment-main .section-cbox-w .issue-btn-w a:hover .btn-bf{
background-image:url("图片链接地址");
background-position:0 0;
}
/* 楼内回复发布 - 按钮默认状态 图片尺寸90x32 */
#SOHUCS #SOHU_MAIN #SOHU-comment-main .section-list-w .issue-btn-w a .btn-bf{
background-image:url("图片链接地址");
background-position:0 0;
}
/* 楼内回复发布 - 按钮hover状态 图片尺寸90x32 */
#SOHUCS #SOHU_MAIN #SOHU-comment-main .section-list-w .issue-btn-w a:hover .btn-bf{
background-image:url("图片链接地址");
background-position:0 0;
}
/* 登录/游客登录窗口 - 确定按钮默认状态 图片尺寸78x33 */
.user-login-wrapper-dw .cont-visitor-dw .cont-btn-dw a .btn-bdf,
.visitor-login-wrapper-dw .cont-btn-dw a .btn-bdf{
/*background-image:url("图片链接地址");*/
}
/* 登录/游客登录窗口 - 确定按钮hover状态 图片尺寸78x33 */
.user-login-wrapper-dw .cont-visitor-dw .cont-btn-dw a:hover .btn-bdf,
.visitor-login-wrapper-dw .cont-btn-dw a:hover .btn-bdf{
/*background-image:url("图片链接地址");*/
}

分割线样式设置

你可以通过以下样式修改最新评论、最热评论下方分隔线的颜色。

/* 热门评论/最新评论 - 下边线 */
#SOHUCS #SOHU_MAIN #SOHU-comment-main .section-list-w .block-title-gw ul{
border-bottom:2px solid #88abc3;
background-color:transparent;
}
/* 热门评论/最新评论 - 字色 */
#SOHUCS #SOHU_MAIN #SOHU-comment-main .section-list-w strong.title-name-bg{
color:#333;
}

链接颜色样式设置

你可以通过以下样式修改云评论中包括用户名链接、热评话题链接和版权信息的颜色。

/* 评论列表用户名 - 链接颜色 */
#SOHUCS #SOHU_MAIN a{
color:#e74851;
text-decoration:none;
}
#SOHUCS #SOHU_MAIN a:hover{
color:#333;
text-decoration:underline;
}
/* 菜单 - 默认状态 - 用户名字色 */
#SOHUCS #SOHU_MAIN #SOHU-comment-main .section-title-w .user-wrap-w .wrap-name-b{
color:#44708E;
}
/* 热门推荐 - 链接色 */
#SOHUCS #SOHU_MAIN #SOHU-comment-main .section-newslist-w .conts-col li a{
color:#5788AA;
}
#SOHUCS #SOHU_MAIN #SOHU-comment-main .section-newslist-w .conts-col li a:hover{
color:#EE542A;
text-decoration:underline;
}
/* 版权信息 - 链接色 */
#SOHUCS #SOHU_MAIN #SOHU-comment-main .section-service-w .service-wrap-b a{
color:#44708e;
}
#SOHUCS #SOHU_MAIN #SOHU-comment-main .section-service-w .service-wrap-b a:hover{
color:#ee542a;
}

翻页按钮样式设置

你可以通过以下样式修改评论列表下方翻页按钮的样式。

/* 翻页 - 文字色 */
#SOHUCS #SOHU_MAIN #SOHU-comment-main .section-page-w .page-wrap-gw a,
#SOHUCS #SOHU_MAIN #SOHU-comment-main .section-page-w .page-wrap-w a{
color:#333;
}
/* 翻页 - hover边框色 */
#SOHUCS #SOHU_MAIN #SOHU-comment-main .section-page-w .page-wrap-gw a:hover,
#SOHUCS #SOHU_MAIN #SOHU-comment-main .section-page-w .page-wrap-w a:hover{
border:1px solid #5788aa;
}
/* 翻页 - 当前色 */
#SOHUCS #SOHU_MAIN #SOHU-comment-main .section-page-w .page-wrap-w a.wrap-current-e{
color:#fff;
font-weight:bold;
background-color:#5788aa;
border:1px solid #5788aa;
}

更多云评论样式请参考:云评论自定义样式表