多说CSS修改

如何修改CSS,让评论框更加好看?

通过修改CSS,网站主可以轻松的实现多说的评论样式自定义。如果你不熟悉CSS,可以去W3School的CSS教程来查看效果,当然你也可以使用Chrome,Safari,或者IE浏览器下的检查和开发工具。

你可以通过修改“自定义样式CSS”(在“多说评论”--“评论框设置”中)来修改多说的样式。默认的多说CSS样式允许进行十分多样性的修改。

一些主题可能会与多说的CSS产生冲突,造成一些显示上的问题,这是与原主题的代码有关系的。这里将说明如何修正一些最常见的错误。

1 评论框左右边距

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

#ds-thread  {padding:24px;}

#ds-thread {margin:24px;}

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

#ds-thread {width:auto;}

2 评论框整体的背景色

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

#ds-thread {background: #ffffff;}

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

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

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

3 高亮字体的颜色

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

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

4 更改评论字体颜色

想修改评论正文的字体颜色,请输入下列代码:

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

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

5 更改最近访客头像大小

想要修改最新访客头像的大小,请输入下列代码:

  #ds-recent-visitors .ds-avatar img {width: 30px !important;height: 30px !important;}

其中30px是宽和高,请根据效果修改不同高度和宽度


有许多用户提到,具体使用中,多说的某一个按钮,某一条线,使用的是哪一个css标签(像#ds-thread #ds-reset .ds-highlight),下面我们提供一个在google chrome下查看的简单办法:

  1. 在页面元素上方点击【鼠标右键】,选择【审查元素】

    审查元素

  2. 将鼠标悬浮在相应元素的代码上方,页面中也会显示出选中效果。点击代码之后,右侧子窗口会显示相应标签。

    查看标签

  3. 没错,如果你想要控制喜欢按钮的颜色,只需在多说的自定义css里,添加并调整color的颜色值即可

     #ds-thread #ds-reset a.ds-like-thread-button span {
         color: #F00;
     }
    

出色的自定义效果展示

设计达人http://www.shejidaren.com/use-css3-to-create-a-beautiful-comment-ui.html

罗磊的独立博客http://luolei.org/2012/08/duoshuo-css/

V说http://www.vsay.cn/one-more-custom-css-lets-you-say-comments-city.html