美化多说评论框

TOP

多说样式已死，本文终结。

一段话

前段时间换了个扁平化的 Blog 主题，然而感觉多说默认的样式好违和，近日魔改了一下多说的样式。

美（chou）化后的效果图

另一段话

~~路人甲 : “哇！Troy 菊苣的评论框好漂亮！求 style.css ！”~~
~~Troy: “好哇好哇~交易之后就告诉你~”~~

那么……以下是链接/内容……
duoshuo.css

@charset "UTF-8";
/*!
    Name: Duoshuo Style of Material Design
    Version: 1.0.0
    Url: https://itroy.cc
    Author: Troy
    Author Url: https://itroy.cc
    Description: A material design style for Duoshuo.
    Licensed under MIT.
*/

/* 多说 */
#ds-thread {
    padding: 10px calc((100% - 700px) / 2);
    margin: 0 auto;
    background-color: #eee;
}
@media (max-width: 568px) {
    #ds-thread {
        padding-right: 15px;
        padding-left: 15px;
    }
}
@media (max-width: 740px) {
    #ds-thread {
        width: auto;
        padding-right: 20px;
        padding-left: 20px;
    }
}

/* 字体 */
#ds-thread #ds-reset .ds-textarea-wrapper textarea, #ds-thread #ds-reset .ds-textarea-wrapper .ds-hidden-text {
    font-family: "Microsoft YaHei UI", "Microsoft YaHei";
    font-size: 12px;
    letter-spacing: 1px;
}

/* 评论图标 */
#ds-thread #ds-reset ul.ds-comments-tabs .ds-service-icon {
    display: none;
}

/* 评论数量 */
#ds-thread #ds-reset .ds-comments-info {
    padding-top: 20px;
}

/* 喜欢 */
#ds-thread #ds-reset .ds-meta {
    padding-top: 20px;
}

/* 被顶起来的评论 */
#ds-thread #ds-reset #ds-hot-posts {
    margin: 8px 10px;
}

/* 头像 */
#ds-reset .ds-avatar {
    background: none;
    box-shadow: none;
}

/* 评论框 */
#ds-thread #ds-reset .ds-replybox {
    height: 100px;
    padding-left: 100px;
    margin-bottom: 50px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

/* 评论框头像 */
#ds-thread #ds-reset .ds-replybox .ds-avatar {
    position: absolute;
    width: 100px;
    height: 100px;
    margin: 0;
    overflow: hidden;
    background: #f7f7f7;
    border-radius: 2px 0 0 2px;
}

@media (max-width: 568px) {
    #ds-thread #ds-reset .ds-replybox .ds-avatar {
        width: 50px;
        height: 50px;
    }
    #ds-reset form {
        margin-left: 12px;
    }
}
#ds-thread #ds-reset .ds-replybox .ds-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 0;
}
#ds-thread #ds-reset .ds-replybox .ds-avatar img:hover {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

/* 评论头像 */
#ds-thread #ds-reset .ds-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #f7f7f7;
    transition: transform .8s ease-out;
}

/* 评论框文字区域 */
#ds-thread #ds-reset .ds-textarea-wrapper {
    position: relative;
    border: 0;
    border-bottom: none;
    overflow: hidden;
}
#ds-thread #ds-reset .ds-textarea-wrapper textarea {
    height: 50px;
    letter-spacing: 0;
    line-height: 1.5;
    font-size: 14px;
    color: #333;
}

/* 发表按钮 */
#ds-thread #ds-reset .ds-post-button {
    position: absolute;
    font-family: "Material Icons";
    font-size: 28px;
    right: 20px;
    width: 56px !important;
    height: 56px;
    padding: 0;
    overflow: hidden;
    color: #fff;
    background-color: #00bcd4;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    transition: .3s;
    /* Support for IE. */
    font-feature-settings: 'liga';
}
#ds-thread.ds-narrow #ds-reset .ds-post-button {
    width: 56px;
}
#ds-thread #ds-reset .ds-post-button:hover {
    background-color: #00bcd4;
    box-shadow: 0 2px 6px rgba(0,0,0,.3),0 4px 20px rgba(0,0,0,.2);
}
#ds-thread #ds-reset .ds-post-button:active {
    background-color: #00c7e1;
}

/* 评论框工具栏 */
#ds-thread #ds-reset .ds-post-toolbar {
    box-shadow: 0 0;
}
#ds-thread #ds-reset .ds-post-options {
    border: 0;
}

/* 评论信息 */
#ds-thread #ds-reset .ds-comments-info {
    border-top: 1px solid #ddd;
}

/* 隐藏分享选项 */
#ds-thread #ds-reset .ds-sync {
    display: none;
}

/* 评论数量 */
#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current {
    display: block;
    padding: 0;
    background: none;
    border: 0;
    font-size: 40px;
    text-align: center;
    color: #222;
}

/* 一些杂项 */
#ds-thread #ds-reset .ds-comment-body {
    padding-left: 60px;
}

/* 信息框 */
#ds-notify {
    width: 360px;
    max-width: 360px;
    height: 77px;
    padding: 0;
    right: 0 !important;
    background-color: #1f1f1f;
    border: 1px solid #484848;
    transition: .3s;
}
#ds-notify #ds-reset {
    padding: 12px;
}
#ds-notify #ds-reset ul.ds-notify-unread li a {
    color: #fff;
}

/* 信息框 logo */
#ds-notify #ds-reset a.ds-logo {
    width: 50px;
    height: 50px;
    background: url(https://static.itroy.cc/ic_info_white_48dp_2x.png);
    background-size: cover;
}

/* 信息框 文字 */
#ds-notify #ds-reset ul.ds-notify-unread {
    line-height: 1.5;
    margin-left: 60px;
}

duoshuo_ua.css

@charset "UTF-8";
/*!
    Name: Duoshuo UA Style
    Version: 1.0.0
    Url: https://itroy.cc
    Author: Troy
    Author Url: https://itroy.cc
    Description: Duoshuo UA style.
    Licensed under MIT.
*/
span.ua {
    color: #fff;
}
.ua span {
    padding: 0 5px !important;
    border-radius: 4px;
}
.ua_other {
    background-color: #ccc !important;
}
.os_other {
    background-color: #ccc !important;
}
.ua_ie {
    background-color: #428bca !important;
}
.ua_firefox {
    background-color: #f0ad4e !important;
}
.ua_maxthon {
    background-color: #7373b9 !important;
}
.ua_ucweb {
    background-color: #ff740f !important;
}
.ua_sogou {
    background-color: #78ace9 !important;
}
.ua_2345explorer {
    background-color: #2478b8 !important;
}
.ua_2345chrome {
    background-color: #f9d024 !important;
}
.ua_mi {
    background-color: #ff4a00 !important;
}
.ua_lbbrowser {
    background-color: #fc9d2e !important;
}
.ua_chrome {
    background-color: #ee6252 !important;
}
.ua_qq {
    background-color: #3d88a8 !important;
}
.ua_apple {
    background-color: #e95620 !important;
}
.ua_opera {
    background-color: #d9534f !important;
}
.os_vista, .os_2000, .os_windows, .os_xp, .os_7, .os_8, .os_8_1 {
    background-color: #39b3d7 !important;
}
.os_android {
    background-color: #98c13d !important;
}
.os_ubuntu {
    background-color: #dd4814 !important;
}
.os_linux {
    background-color: #3a3a3a !important;
}
.os_mac {
    background-color: #666666 !important;
}
.os_unix {
    background-color: #006600 !important;
}
.os_nokia {
    background-color: #014485 !important;
}
.admin {
    background-color: #00a67c !important;
}

新人渣作，有些地方可能写的很不标准很不正确，各位菊苣们轻喷……

还有一段话

        为了更好的美（chou）化，你还需要把多说的默认头像换成：

        然后再把发布按钮的文字更改为：send。
        然后再把正在发布的文字更改为：hourglass_empty。
        应该就这些了吧……（逃……）

除特殊说明，本站原创内容（包括但不限于文章、图像等）采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。本站文章除注明转载外，均为原创文章。商业转载请联系作者获得授权，非商业转载请注明：转载自：美化多说评论框。

39 条评论

发表回复取消回复

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。

逞强鸭

1年前

博主我是一个女站长，交个朋友呗，加我微信号 painmiro

回复
微信资源网

1年前

感谢博主分享

回复
哈哈

1年前

🙁 r 😳

回复
qwe7002

1年前

这个评论框的样式不错啊~

回复
SW_Wind

1年前

然而多说倒闭了（手动滑稽）

回复
柚子鬼

1年前

哈哈,没什么用了吧~

回复
host1plus

1年前

马上关了

回复
＇ c0sMx

1年前

多说炸了，白白设计了@(滑稽)

回复
- Troy
  
  1年前
  
  我就知道会有这样的回复……= =
  
  回复
  - ＇ c0sMx
    
    1年前
    
    哈哈哈哈@(滑稽)
    
    回复
现在网创始人

1年前

@(滑稽)

回复
＇ c0sMx

1年前

美@(阴险)

回复
Hstb

1年前

#(亲亲)好漂亮

回复
桂叶君

1年前

这个好棒~路过膜拜一下#(赞一个)

回复
JamesLiu

1年前

不错就是不会用Hexo

回复
她们说

1年前

挺漂亮的喜欢 @(哈哈)

回复
凯哥自媒体

1年前

试试效果

回复
萌一库-某宅

1年前

@(黑线)你需要加一个css样式来调整

回复
- Troy
  
  1年前
  
  现在好咯？#(抠鼻)
  
  回复
  - 萌一库-某宅
    
    1年前
    
    @(小乖)好了一些
    
    回复
萌一库-某宅

1年前

@(汗)表情挨的太紧，强迫症卡着非常的不舒服

回复
www.qhdown.cn

1年前

写的不错哈，支持一下欢迎回访:www.qhdown.cn

回复
上海seo

1年前

博主技术不错的呀，随便美化。。。

回复
凯哥自媒体

1年前

这个必须用啊

回复
盯着贞子唱忐忑

1年前

这个具体是如何用呢?? 我试了试咋不行呢

回复
Troy

1年前

pingback 什么鬼……

回复
雨落无声

1年前

膜拜前端大神！！

回复
不点儿

1年前

真好看

回复
www.xevip.cn

1年前

过来看看你的博客，希望每天都更新一些文章。诚交友链站务申请:www.xevip.cn

回复
落叶大大

1年前

真厉害

回复
- Troy
  
  1年前
  
  woc……菊苣……
  
  回复
  - 落叶大大
    
    1年前
    
    不敢
    
    回复
Romintik

1年前

厉害了我的Troy!

回复
Junyi

1年前

好评

回复
Pingback: {源码}来自troy的多说CSS样式-本站采用的-萌一库
萌一库-某宅

1年前

拿走，赞

回复
HoHoibin

1年前

厉害咯我的哥！

回复
Aaron

1年前

赞赞赞等这个等好久了

回复
liwanglin12

1年前

赞

回复

TOP

一段话

美（chou）化后的效果图

另一段话

还有一段话

39 条评论

发表回复 取消回复

发表回复取消回复