自定义样式设置
云评论的设计师同学已经为大家设计好了多套精美的皮肤。 当然,如果你希望实现评论样式的自定义,可以参考以下云评论的样式自行进行设计。 你可以在云评论后台“设置-样式自定义-自定义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; }
更多云评论样式请参考:云评论自定义样式表。