16年4月19日之前使用的多说样式
我的这个博客的最初的样式是从 友链萝莉社https://myhloli.com/ 那里copy过来的,但近期稍稍改变了点,正好又有人从我要,我想与其我挨个给需要的人发,还不如直接写出了,这样我能节能好多,而且还能算是更新博客。
于是乎,有了这篇文章
css代码
.ds-sync{
display:none !important;
}
#ds-thread #ds-reset .ds-sort {
display:none;
}
#ds-thread .ds-powered-by{display:none!important;}
#ds-thread {width:auto;}
/*多说附加样式*/
#ds-reset .ds-avatar{background:none !important; box-shadow:none !important;}
#ds-reset .ds-avatar img , #ds-thread #ds-reset ul.ds-children .ds-avatar img{width:50px !important;height: 50px !important;-webkit-transition: .8s;-moz-transition: .8s;-o-transition: .8s;-ms-transition: .8s;padding:3px;border: 1px solid #ddd;background: #fff;}
.ds-post:hover .ds-avatar img{transform:rotate(720deg);-webkit-transform:rotate(720deg);-moz-transform:rotate(720deg);-o-transform:rotate(720deg);-ms-transform:rotate(720deg);border-radius:30px !important;}
#ds-reset .ds-avatar img:hover{transform:rotate(720deg);-webkit-transform:rotate(720deg);-moz-transform:rotate(720deg);-o-transform:rotate(720deg);-ms-transform:rotate(720deg);border-radius:30px !important;}
#ds-thread #ds-reset .ds-comment-body, #ds-thread #ds-reset ul.ds-children .ds-comment-body{padding-left:70px !important;}
#ds-thread #ds-reset .ds-comment-body, #ds-thread #ds-reset ul.ds-children .ds-comment-body{padding-left:70px !important;}
.ds-post:hover{background:#eee !important;}
#ds-thread #ds-reset ul.ds-children .ds-avatar{width:50px !important;}
#ds-thread #ds-reset .ds-replybox{padding: 0 0 0 80px !important;}
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-body{margin-left: 68px !important;}
#ds-recent-comments li.ds-comment:nth-of-type(1){border:none !important;}
/*多说附加样式结束*/
/** 多说最近留言样式 **/
#ds-recent-comments .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-recent-comments .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-thread #ds-reset .ds-textarea-wrapper textarea {
position: relative;
z-index: 1;
border: 0;
border-bottom: none;
padding-right: 24px;
overflow: hidden;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
box-shadow: none;
-webkit-appearance: none;
overflow: auto;
padding: 10px;
height: 88x;
min-height: 88px;
margin: 0;
resize: none;
background: #69CFFF url(
https://blog.zezeshe.com/usr/uploads/2016/04/739615605.gif
)center no-repeat;/*这个图片不要直接引用,弄个自己的链接比较好,否则会随时失效,还有这个注释最好也删掉*/
width: 100%;
min-width: 100%;
font-family: “STHeiti Light”, 华文细黑,”Microsoft YaHei”, 微软雅黑,”Microsoft JhengHei”,STHeiti,MingLiu;
}
#ds-thread #ds-reset .ds-textarea-wrapper textarea:focus {
background-image: none;
background: rgb(234, 234, 234);
}
#ds-thread #ds-reset .ds-textarea-wrapper textarea, #ds-thread #ds-reset .ds-textarea-wrapper .ds-hidden-text {
font-family:"楷体";
font-size:18px;
font-weight:bold;
letter-spacing:1px;
}
#ds-thread #ds-reset .ds-post-toolbar {
box-shadow: none;
}
#ds-thread #ds-reset .ds-post-options {
border: 0px;
border-right: 0;
border-bottom-left-radius: 0;
-webkit-border-bottom-left-radius: 0;
background: transparent;
margin-top: 12px;
}
span.ua{
margin: 0 1px!important;
color:#FFFFFF!important;
/*text-transform: Capitalize!important;
float: right!important;
line-height: 18px!important;*/
}
.sskadmin{
background-color: #00a67c!important;
border-color: #01B171!important;
border-radius: 4px;
padding: 0 5px!important;
}
版权属于:泽泽社长
本文链接:https://blog.zezeshe.com/archives/this-chapter-of-the-css-style-like-please-take-it.html
本站未注明转载的文章均为原创,并采用
CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!
好想要这个评论的表情 ,请问是怎么弄的呢 ,求回复 @(滑稽)
我的是在模板上弄得,就是点击图片向输入框插入有规律的文本,然后再将评论内容中的这些文本使用正则替换成图片,typecho的话有相关插件
敢不敢加一个微信分享功能。。。
不敢,微信基本不玩不了解的说
我的这个不会显示ua的!只有个判断博主的!因为UA有时侯判断的不太准确
[囧]加了为什么不显示UA
[吃惊]代码高亮是模板实现的吗?
一个插件
学这个喵,防止颈椎病→_→
1 2 3 4再来一次
[嘻嘻]不错 谢谢博主 伪娘。哈哈哈哈
正在努力copy中!=_=
[运气中]敏感词汇
直播断*!!
纯汉子,没有伪娘的服装,有的话...
这个css怎么用啊??
多说有个自定义css的功能,填加到那里即可,上述代码中的图片链接需要自行弄个图片链接
博主判断是需要将多说本地化么
是的
猫猫好可爱。。。歪头中
防止颈椎病从喵做起