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

作者：袖梨 2022-06-25

多说自定义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之前的效果

用了之后的效果

分享到：0

补充:CSS自定义设置问题收集

1、将评论框底部的分享到微博QQ空间什么的隐藏起来
.ds-sync{display:none !important;}
2、定义评论框背景
url换成你自己想要的图片地址就行了，貌似需要绝对路径吧，不清楚，我用的是绝对路径。

.ds-textarea-wrapper.ds-rounded-top{background: #ffffff url(你想设置的评论框背景图片地址) no-repeat right bottom !important;}
多说评论会采用主题的背景色作为整体评论框的背景，这样可能导致评论本身不是很显眼。你可以输入下列代码来更改整体评论框的背景颜色：

#ds-thread {background: #ffffff;}
这个评论背景的边角默认是直角，如果想改成圆角，请输入下列代码（仅在firefox，chrome及高版本ie浏览器下有效，ie6,7,8将仍然为直角显示）：

#ds-thread{ border-radius: 5px;}
注意：其中的#ffffff 可以被替换为你希望的颜色，以便于评论文字相适应。更多的颜色，见维基百科网页颜色表

3、隐藏评论框底部渐变背景
#ds-reset .ds-gradient-bg{background:none !important;}
话说渐变色什么的虽然立体感较强但是和主题整体风格不融洽，隐藏之，这样底部就是透明的了。

4、定义评论框内字体和颜色
#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;}
这个好像是定义评论框内输入的文字字体的，嗯，好像是。想修改评论正文的字体颜色，请输入下列代码：

#ds-thread #ds-reset .ds-comment-body p {color: #ffffff;}
当您在修改一部分上面未示例的标签样式时，遇到无效的情况，请尝试增加：!important

5、定义发布按钮字体，以及渐变色背景
#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、隐藏评论右上方最热最新排序按钮
#ds-thread #ds-reset .ds-sort {display:none;}
7、隐藏评论左上方评论总数背景色及边框
#ds-thread #ds-reset li.ds-tab a.ds-current{background:none;border:none;}
8、隐藏底部多说版权
很多朋友在找这个代码。不过不建议用。毕竟显示版权信息还是比较好。

#ds-thread #ds-reset .ds-powered-by{display:none;}
9、定义各种文字高亮颜色，以及浮动窗口的高亮颜色，配合模板颜色把以下色值统一设置即可。
/*定义高亮字体颜色*/
#ds-reset .ds-highlight{color:#49976b !important;}
/*定义评论框内其他高亮颜色*/
#ds-thread #ds-reset #ds-bubble a{color: #49976b !important;}
/*定义评论框内其他高亮颜色*/
#ds-thread #ds-reset #ds-bubble {color: #49976b !important;}
/*定义评论框内其他高亮颜色*/
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a{color: #49976b !important;}
/*定义评论框内其他高亮颜色*/
#ds-thread #ds-reset a.ds-comment-context:hover{color: #49976b !important;}
/*定义评论框内其他高亮颜色*/
#ds-thread #ds-reset a.ds-comment-context{color: #49976b !important;}
10、评论框左右边距
如果你的评论框左右边距过小（评论框太宽），输入下列代码调整宽度，直到页面上评论框宽度显示合适：

#ds-thread {padding:24px;}
或

#ds-thread {margin:24px;}
如果你的评论框太窄，可能是宽度被设定了不合适的值，输入下列代码让宽度自动拉伸：

#ds-thread {width:auto;}
11、高亮字体的颜色
高亮字体包括“n条评论”，“n条微博”，评论者名字的颜色，想修改它的显示颜色（在大多数情况下默认是红色），输入下列代码

#ds-thread #ds-reset .ds-highlight{color: #ffffff !important;}
都是一些现成的CSS代码，直接复制就可以用了。当然里面的颜色或者是其他属性什么的你们自己修改就可以了。照样可以实现你想要的效果。