• 请加作者QQ或者微信联系。作者QQ:524100248,微信号:sendtion。

多说评论框各种CSS自定义设置问题收集

PC教程 sendtion 2年前 (2016-02-18) 876次浏览 已收录 2个评论 扫描二维码

100

老是在折腾多说评论框的 css。也碰到好多人在问这些个问题。今天收集几个常见的多说评论的 css 问题答案。希望能帮到大家。

1、将评论框底部的分享到微博 QQ 空间什么的隐藏起来

  1. .dssync{display:none !important;}

2、定义评论框背景

url 换成你自己想要的图片地址就行了,貌似需要绝对路径吧,不清楚,我用的是绝对路径。

  1. .dstextareawrapper.dsroundedtop{background: #ffffff url(你想设置的评论框背景图片地址) no-repeat right bottom !important;}

多说评论会采用主题的背景色作为整体评论框的背景,这样可能导致评论本身不是很显眼。你可以输入下列代码来更改整体评论框的背景颜色:

  1. #ds-thread {background: #ffffff;}

这个评论背景的边角默认是直角,如果想改成圆角,请输入下列代码(仅在 firefox,chrome 及高版本 ie 浏览器下有效,ie6,7,8 将仍然为直角显示):

  1. #ds-thread{ border-radius: 5px;}

注意:其中的#ffffff 可以被替换为你希望的颜色,以便于评论文字相适应。更多的颜色,见维基百科网页颜色表

3、隐藏评论框底部渐变背景

  1. #ds-reset .ds-gradient-bg{background:none !important;}

话说渐变色什么的虽然立体感较强但是和主题整体风格不融洽,隐藏之,这样底部就是透明的了。

4、定义评论框内字体和颜色

  1. #ds-thread #ds-reset .ds-textarea-wrapper textarea, #ds-thread #ds-reset .ds-textarea-wrapper .ds-hidden-text {font-family: ‘微软雅黑’ ‘Microsoft Yahei’!important;font-size:12px;letter-spacing:1px;}

这个好像是定义评论框内输入的文字字体的,嗯,好像是。 想修改评论正文的字体颜色,请输入下列代码:

  1. #ds-thread #ds-reset .ds-comment-body p {color: #ffffff;}

当您在修改一部分上面未示例的标签样式时,遇到无效的情况,请尝试增加:!important

5、定义发布按钮字体,以及渐变色背景

  1. #ds-thread #ds-reset .ds-post-button{font-family: ‘微软雅黑’‘Microsoft Yahei’!important;font-weight: bold;font-size:12px;background:none !important;color:#49976b !important;}

6、隐藏评论右上方 最热 最新排序按钮

  1. #ds-thread #ds-reset .ds-sort {display:none;}

7、隐藏评论左上方 评论总数背景色及边框

  1. #ds-thread #ds-reset li.ds-tab a.ds-current{background:none;border:none;}

8、隐藏底部多说版权

很多朋友在找这个代码。不过不建议用。毕竟显示版权信息还是比较好。

  1. #ds-thread #ds-reset .ds-powered-by{display:none;}

9、定义各种文字高亮颜色,以及浮动窗口的高亮颜色,配合模板颜色把以下色值统一设置即可。

  1. /*定义高亮字体颜色*/
  2. #ds-reset .ds-highlight{color:#49976b !important;}
  3. /*定义评论框内其他高亮颜色*/
  4. #ds-thread #ds-reset #ds-bubble a{color: #49976b !important;}
  5. /*定义评论框内其他高亮颜色*/
  6. #ds-thread #ds-reset #ds-bubble {color: #49976b !important;}
  7. /*定义评论框内其他高亮颜色*/
  8. #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a{color: #49976b !important;}
  9. /*定义评论框内其他高亮颜色*/
  10. #ds-thread #ds-reset a.ds-comment-context:hover{color: #49976b !important;}
  11. /*定义评论框内其他高亮颜色*/
  12. #ds-thread #ds-reset a.ds-comment-context{color: #49976b !important;}

10、 评论框左右边距

如果你的评论框左右边距过小(评论框太宽),输入下列代码调整宽度,直到页面上评论框宽度显示合适:

  1. #ds-thread {padding:24px;}

  1. #ds-thread {margin:24px;}

如果你的评论框太窄,可能是宽度被设定了不合适的值,输入下列代码让宽度自动拉伸:

  1. #ds-thread {width:auto;}

11、高亮字体的颜色

高亮字体包括“n 条评论”,“n 条微博”,评论者名字的颜色,想修改它的显示颜色(在大多数情况下默认是红色),输入下列代码

  1. #ds-thread #ds-reset .ds-highlight{color: #ffffff !important;}

都是一些现成的 CSS 代码,直接复制就可以用了。当然里面的颜色或者是其他属性什么的你们自己修改就可以了。照样可以实现你想要的效果。

 

文章转载自:欲思博客 » 多说评论框各种 CSS 自定义设置问题收集


乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:多说评论框各种 CSS 自定义设置问题收集
喜欢 (4)
[sendtion@163.com]
分享 (0)
sendtion
关于作者:
一个不断奋斗追逐梦想的少年~
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. sendtion
    [打哈气][左哼哼]
    一枝小眼2016-02-24 22:06 回复 未知操作系统 | 未知浏览器
  2. sendtion
    测试uixiahaha
    一枝小眼2016-02-18 14:16 回复 未知操作系统 | 未知浏览器