06月08, 2016

多说评论框自定义CSS优化

2wnbneq 多说的个性化设置里有个自定义CSS,将你要更改的CSS样式代码粘贴进去保存就好了;注意:有些属性如果修改了没效果的话,要在每个属性后面加上一个!important,将优先级调为最高就可以看到效果了,比如:padding:10px; 这个属性没生效的话就要这样改:padding:10px !important; 这样就可以生效了。 下面将网络上现有的几个不错的css样式整理并分享给大家。

圆角(或者圆形)+ 阴影

1 #ds-reset .ds-avatar img{
2 width:54px;height:54px; /*设置图像的长和宽*/
3 border-radius:27px; /*设置图像圆角效果,在这里我直接设置了超过width/2的像素,即为圆形了*/
4 -webkit-border-radius: 27px; /*圆角效果:兼容webkit浏览器*/
5 -moz-border-radius:27px;
6 box-shadow: inset 0 -1px 0 #3333sf; /*设置图像阴影效果*/
7 -webkit-box-shadow: inset 0 -1px 0 #3333sf;
8 }

鼠标悬浮时,圆形+图像进行360度旋转

 1 #ds-reset .ds-avatar img{
 2 width:54px;height:54px; /*设置图像的长和宽*/
 3 border-radius:27px; /*设置图像圆角效果,在这里我直接设置了超过width/2的像素,即为圆形了*/
 4 -webkit-border-radius: 27px; /*圆角效果:兼容webkit浏览器*/
 5 -moz-border-radius:27px;
 6 box-shadow: inset 0 -1px 0 #3333sf; /*设置图像阴影效果*/
 7 -webkit-box-shadow: inset 0 -1px 0 #3333sf;
 8 -webkit-transition: 0.4s;
 9 -webkit-transition: -webkit-transform 0.4s ease-out;
10 transition: transform 0.4s ease-out; /*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读)*/
11 -moz-transition: -moz-transform 0.4s ease-out;
12 }
13
14 #ds-reset .ds-avatar img:hover{ /*设置鼠标悬浮在头像时的CSS样式*/
15 box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
16 -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
17 transform: rotateZ(360deg); /*图像旋转360度*/
18 -webkit-transform: rotateZ(360deg);
19 -moz-transform: rotateZ(360deg);
20 }

鼠标悬浮时:圆形+图像进行360度旋转+半圆遮盖

 1 #ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current {border:0px;color:#848568;text-shadow:none;background:#dddfc2}
 2 #ds-thread #ds-reset .ds-highlight {font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:bold;color:#848568 !important;}
 3 #ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current:hover {color:#696a52;background:#d4d6ba}
 4 #ds-thread #ds-reset a.ds-highlight:hover {color:#696a52 !important;}
 5
 6 #ds-thread {padding-left:30px;}
 7 #ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset #ds-hot-posts {overflow:visible}
 8 #ds-thread #ds-reset .ds-post-self {padding:10px 0 10px 10px;}
 9 #ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset .ds-post-self {border:0 !important;}
10 #ds-reset .ds-avatar, #ds-thread #ds-reset ul.ds-children .ds-avatar {position:absolute;top:26px;left:-14px;padding:5px;width:36px;height:36px;box-shadow:-1px 0 1px rgba(0,0,0,.15) inset;border-radius:46px; background:#E5E6D0;}
11 #ds-thread #ds-reset ul.ds-children .ds-avatar {left:-23px;}
12 #ds-thread .ds-avatar a {display:inline-block;padding:1px; width:32px;height:32px;border:1px solid #b9baa6;border-radius:50%; background-color:#fff !important}
13 #ds-thread .ds-avatar a:hover {border-color:#de5a4e}
14 #ds-thread .ds-avatar > img {margin:2px 0 0 2px}
15 #ds-thread #ds-reset .ds-replybox {box-shadow:none;}
16 #ds-thread #ds-reset ul.ds-children .ds-replybox.ds-inline-replybox a.ds-avatar,
17 #ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar {left: 0;top: 0; padding: 0;width: 32px !important;height: 32px !important; background: none;box-shadow: none; }
18 #ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar img {width: 32px !important;height: 32px !important; border-radius:50%;}
19 #ds-reset .ds-replybox a.ds-avatar,
20 #ds-reset .ds-replybox .ds-avatar img { padding:0;width:50px !important;height:50px !important; border-radius:5px; }
21 #ds-reset .ds-avatar img {width:32px !important;height:32px !important;border-radius:32px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.22);
22 -webkit-transition:.4s all ease-in-out;-moz-transition:.4s all ease-in-out;-o-transition:.4s all ease-in-out;-ms-transition:.4s all ease-in-out;transition:.4s all ease-in-out;
23 }
24 .ds-post-self:hover .ds-avatar img{
25 -webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}
26
27 #ds-thread #ds-reset .ds-comment-body {background: #F0F0E3;padding:15px 15px 12px 32px;border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.75) inset;}
28
29 #ds-thread #ds-reset .ds-comment-body p{color:#787968}
30 #ds-thread #ds-reset .ds-comments a.ds-user-name {font-weight:bold;color:#696A52 !important;}
31 #ds-thread #ds-reset .ds-comments a.ds-user-name:hover {color:#D32 !important;}
32
33 #ds-thread #ds-reset #ds-hot-posts {border:0}
34 #ds-reset #ds-hot-posts .ds-gradient-bg {background:none;}
35
36 #ds-reset #ds-bubble #ds-ctx .ds-ctx-entry {padding:0;}
37 #ds-reset #ds-bubble .ds-avatar, #ds-reset #ds-bubble #ds-ctx-bubble .ds-avatar a {position:static;padding:0;border:0; background:none;box-shadow:none;}
38 #ds-reset #ds-bubble .ds-avatar img, #ds-reset #ds-bubble #ds-ctx-bubble .ds-avatar a {width:45px !important;height:45px !important;}
39 #ds-reset #ds-bubble .ds-user-name{padding-left:13px;}
40
41 #ds-reset .ds-comment-body #ds-ctx {border-left:1px solid #b9baa6;background-color:#e8e8dc !important}
42 #ds-reset #ds-ctx {margin-right:-15px}
43 #ds-reset #ds-ctx .ds-ctx-entry {position:relative;padding:10px 30px 10px 10px;}
44 #ds-reset #ds-ctx .ds-ctx-entry .ds-avatar {top:6px;left:5px;background:none;box-shadow:none;}
45 #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-body {margin-left:46px;}
46 #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-content {color:#787968}
47 #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a {color:#696A52;font-weight:bold}
简要说明: 配色是非常重要的,特别是记得改「#ds-reset .ds-avatar, #ds-thread #ds-reset ul.ds-children .ds-avatar {background:网站的背景颜色}」。 用户气泡提示框代码: 隐藏用户气泡提示框「#ds-thread #ds-reset #ds-bubble {display:none !important}」,这是隐藏鼠标移至用户名称时弹出来的气泡提示框。 评论盖楼样式代码: 倒数1-8行。(不用盖楼的评论方式用户可以直接删除这几行,精简一下代码。)

多说css自定义代码(用于细微调整):

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

1 .ds-sync{
2 display:none !important;
3 }/*隐藏评论框底部分享*/

定义评论框背景图片

1 .ds-textarea-wrapper.ds-rounded-top{
2 background: #ffffff url(这里添加图片的网址) no-repeat right bottom !important;
3 }/*定义评论框背景背景*/
注意图片最好是透明或者白色的,图片的像素大小最好要去你的评论框大小一样,不然可能会出现拉伸。

隐藏评论框底部渐变背景

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

定义评论框内字体

1 #ds-thread #ds-reset .ds-textarea-wrapper textarea, #ds-thread #ds-reset .ds-textarea-wrapper .ds-hidden-text {
2 font-family: ‘微软雅黑’ Microsoft Yahei!important;
3 font-size:12px;
4 letter-spacing:1px;
5 }/*定义评论框内字体*/
这个好像是定义评论框内输入的文字字体的。

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

1 #ds-thread #ds-reset .ds-post-button{
2 font-family: ‘微软雅黑’ Microsoft Yahei!important;
3 font-weight: bold;
4 font-size:12px;
5 background:none !important;
6 color:#49976b !important;
7 }/*定义发布按钮字体以及渐变背景*/

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

1 #ds-thread #ds-reset .ds-sort {
2 display:none;
3 }/*隐藏最新最热等*/

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

1 #ds-thread #ds-reset li.ds-tab a.ds-current{
2 background:none;
3 border:none;
4 }/*隐藏评论总数背景及边框*/

隐藏底部多说版权

1 #ds-thread #ds-reset .ds-powered-by{
2 display:none;
3 }/*隐藏多说底部版权*/

定义各种文字高亮颜色,以及浮动窗口的高亮颜色

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

评论框左右边距

如果你的评论框左右边距过小(评论框太宽),输入下列代码调整宽度,直到页面上评论框宽度显示合适:
#ds-thread  {padding:24px;}
#ds-thread {margin:24px;}
如果你的评论框太窄,可能是宽度被设定了不合适的值,输入下列代码让宽度自动拉伸:
#ds-thread {width:auto;}

评论框整体的背景色

多说评论会采用主题的背景色作为整体评论框的背景,这样可能导致评论本身不是很显眼。你可以输入下列代码来更改整体评论框的背景颜色:
#ds-thread {background: #ffffff;}
这个评论背景的边角默认是直角,如果想改成圆角,请输入下列代码(仅在Firefox,Chrome及高版本ie浏览器下有效,ie6,7,8将仍然为直角显示):
#ds-thread{ border-radius: 5px;}
注意:其中的#ffffff可以被替换为你希望的颜色,以便于评论文字相适应。

高亮字体的颜色

高亮字体包括“n条评论”,“n条微博”,评论者名字的颜色,想修改它的显示颜色(在大多数情况下默认是红色),输入下列代码:
#ds-thread #ds-reset .ds-highlight{color: #ffffff !important;}

更改评论字体颜色

想修改评论正文的字体颜色,请输入下列代码:
#ds-thread #ds-reset .ds-comment-body p {color: #ffffff;}
当您在修改一部分上面未示例的标签样式时,遇到无效的情况,请尝试增加!important

更改最近访客头像大小

想要修改最新访客头像的大小,请输入下列代码:
#ds-recent-visitors .ds-avatar img {width: 30px !important;height: 30px !important;}
其中30px是宽和高,请根据效果修改不同高度和宽度。

本文链接:https://www.51redmine.com/post/多说评论框自定义css优化.html

-- EOF --

Comments

comments powered by HyperComments