多说评论自定义CSS样式美化

多说自定义CSS样式美化,用多说评论有一段时间了,有些样式感觉看起来有点别扭,所以就稍微的美化它一下,怎么美化呢?多说的个性化设置里有个自定义CSS,将你要更改的CSS样式代码粘贴进去保存就好了;注意:有些属性如果修改了没效果的话,要在每个属性后面加上一个!important,将优先级调为最高就可以看到效果了,比如:padding:10px; 这个属性没生效的话就要这样改:padding:10px !important; 这样就可以生效了。下面是我自己博客的自定义CSS多说样式,分享出来,需要的拿去用,提醒:我的多说主题是:BlueBox,并不是默认的,各位请看好;

    #ds-reset .ds-avatar img{
    width:54px;height:54px; /*设置图像的长和宽,这里要根据自己的评论框情况更改*/
    border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素,即为圆形了*/
    -webkit-border-radius: 27px;/*圆角效果:兼容webkit浏览器*/
    -moz-border-radius:27px;
    box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/
    -webkit-box-shadow: inset 0 -1px 0 #3333sf;
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读)*/
    -moz-transition: -moz-transform 0.4s ease-out;
}
#ds-reset .ds-avatar img:hover{
    /*设置鼠标悬浮在头像时的CSS样式*/
    box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
    -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
    transform: rotateZ(360deg);/*图像旋转360度*/
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
}

.ds-account-control { width:90px !important; }
.ds-icon-settings { position:relative !important; left:10px !important; }
.ds-account-control ul { right: 0px !important; }
.ds-account-control ul li a { line-height: 22px !important; padding-right: 10 !important; }
#ds-reset li.ds-tab a.ds-current { padding: 2px 6px !important; }

/*喜欢按钮*/
#ds-reset a.ds-like-thread-button { padding: 4px 8px !important; }
/*评论提醒数量*/
#ds-reset a.ds-unread-comments-count { padding: 1px 4px !important; }

#ds-thread #ds-reset .ds-login-buttons .ds-more-services { width:60px;}
#ds-thread #ds-reset .ds-sort a { margin-left:14px; }

#ds-ctx { border: 1px solid #ddd !important; border-bottom:none !important; background:#fefefe !important; }
#ds-reset #ds-ctx { max-width:100% !important; }
.ds-ctx-entry { border-bottom:solid 1px #ddd !important; padding:12px 20px !important; }
.ds-comment-body p { padding-left: 30px !important; }

.ds-post-button { width:80px !important; }
.ds-post-options .ds-sync { right:80px !important; }
.ds-textarea-wrapper textarea, #ds-thread #ds-reset .ds-textarea-wrapper .ds-hidden-text { font-size:12px !important; }
#ds-reset a { padding: 0px !important; }
.ds-more-services { padding:0 !important;}

没用自定义CSS之前的效果

20140604233243

用了之后的效果

20140604233325

分享到:
标签:多说,多说CSS,多说自定义css,
^_^ 亲爱的客官,如果您觉得本文对您有好处,请移动你的鼠标点点下面的广告或上面的或右上角的,非常感谢~ ^_^

多说评论自定义CSS样式美化:目前有15 条留言

  1. 感谢分享 祝您开心快乐每一天!

    2016-08-22 下午 1:53
  2. 9楼
    大薯:

    确实不错

    2016-03-26 上午 1:36
  3. 来撸撸

    2016-03-04 下午 4:45
  4. 很久没有过来了,今天过来看一看!

    2015-09-01 下午 10:06
  5. 6楼
    111111:

    2015-05-06 上午 9:53
  6. 5楼
    明姐:

    2015-05-06 上午 9:52
  7. 4楼
    exness:

    您好!www.exness.top 想和贵网站交换链接,谢谢!

    2015-03-27 下午 5:01
    • 1111:

      好像不可以

      2015-11-28 下午 7:13
  8. 地板
    T.OP:

    2015-03-03 下午 2:46
  9. 板凳
    酷特尔:

    这个东西挺好的。已经在使用了。

    2014-06-05 下午 2:41
  10. 沙发
    qblog.org:

    网站速度好快。。 ,怎么无法留邮箱和网址呢。。。感觉多说插件不怎么好。。

    2014-06-05 下午 12:04
    • 呵呵,好像网址跟邮箱要自己到多说的资料页里面设置的。。有点麻烦

      2014-06-05 下午 12:09
    • ZZn.me:

      三层如何

      2014-12-16 下午 9:22