2012-09-02  2,505 13

多说评论个性化设置CSS篇

 标签:    

多说评论系统特点:
让评论更活跃、互动性更强的评论系统,永久免费且容易安装
用微博、QQ、人人、豆瓣等帐号轻松评论和分享
智能识别垃圾评论、稳步提升网站流量
可以实时同步本地和多说评论
样式更多样,可以自己定制显示效果

设置评论页面头像为圆形,并且鼠标点击时360度旋转

设置调用评论头像为圆角

引申下,鼠标移动到评论正文的时候,头像旋转

更多的效果可以转向 小V的空间:多说自定义CSS 让你的多说评论动感起来

现在拆解一部分评论,分析部分css样式说明

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

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

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

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

注意:其中的#ffffff 可以被替换为你希望的颜色,以便于评论文字相适应。更多的颜色,见维基百科网页颜色表
3 高亮字体的颜色
高亮字体包括“n条评论”,“n条微博”,评论者名字的颜色,想修改它的显示颜色(在大多数情况下默认是红色),输入下列代码

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

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

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

其中30px是宽和高,请根据效果修改不同高度和宽度
6修改评论调用评论者名称的颜色

多说评论调用代码请转向曾经发表的文章
优化网站代码并重新整理下评论插件

13 条留言  访客:9 条  博主:4 条

  1. 纯洁

    不错,去试试看

  2. 梦想与希望的演说

    妈蛋,是不是自己回复自己就不会嵌套呢

  3. 一枝小眼

    留下脚印

  4. 番茄

    我的博客按照这篇文章修改CSS代码之后很到位。

  5. Teddy

    请问像http://www.shejidaren.com/links这样的效果怎么办到的。
    1,圆形头像外有一层环(鼠标放上去转圈时看得比较明显)。
    2,鼠标移动到评论正文内容上头像也会转圈。
    CSS代码该怎么写?

    • 聆听天笑 博主

      @Teddy 初步可以解决第二个问题
      /*设置鼠标悬浮在头像时的CSS样式*/
      #ds-reset li:hover .ds-avatar img
      这样应该可以了,不过如果下面有评论回复会出现一点bug,下次在研究吧

    • 聆听天笑 博主

      @Teddy 好了,现在效果可以全部显示出来了

  6. 回眸孤独的狼

    请问改一个文件啊?新手不懂

    • 聆听天笑

      @回眸孤独的狼 多说评论后台有个<个性化设置>里面有个css设置,将这些css放到里面就可以出来效果了

  7. dja1985

    写的不错

给我留言

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: