首页 > Wordpress > WordPress多说插件CSS修改

WordPress多说插件CSS修改

2013年12月18日 发表评论 阅读评论

duoshuo-icon有个问题我烦恼了很多天了，就是不知道为什么我这个主机就是是发不了邮件，一方面是别人留言我要去后台查看才知道，没有邮件通知，另一方面，别人留了言，我回复了别人也不知道，你总不能期望别人会主动来你这查看留言吧。。

主机商说了是支持SMTP的，但是不管我怎么捣鼓，就算用上了插件也是现实SMTP HOST连不上，然后谷歌了各种方法，改SMTP大小写，改socket，换邮箱什么的，就是没反应，所以我只能来年赶紧换个linux的主机在观察一下吧。。

然后无奈的只能找一款第三方的留言插件了，就是这款很多博主都很熟悉的”多说“了。。。其实我一开始想用的原因只是因为他可以代发邮件，但是一开始装上后，发现真是让人讨厌，因为我一直的原则就是只留有用的东西，但是留言界面一大堆社交网络的东西真是让人烦躁不已。。duoshuo1

上面还是游客留言界面，管理员下面还有各种同步到XXX之类的，点了发布后，还会有：duoshuo3

最讨厌的是，各种多说的广告。。。虽说可以理解别人这么做的原因，但是就是很不爽！！版权信息选项里面你不管选哪个都会有“多说”字样。。

然后去逛官网，发现了很多改CSS文件的方法，在参考了官网的诸多改法后，然后借用了ibtool里面的模板，加上自己的部分修改，总算把东西搞得简洁明了了，至少我讨厌的东西都删掉了。。

大家一般看到的界面是：
duoshuo4

点击发布后需要填写信息的界面里面我也把各种社交网络的东西删了，其实我觉得真不会有多少人想把我这里的东西作为微博什么的发布。。。对吧。。【那张B站娘图我是暂时盗过来的，等下次找到合适的，再去更换。。】
duoshuo5

其实官网也有说，很多东西你不想要就把他隐藏起来，虽然他还是，但是它并没有显示。。。

像我就关了大量的东西，举报按钮，转发按钮，各种社交网络链接，还有多说的各种广告性质的链接：

#ds-thread .ds-powered-by{display:none!important;}
#ds-thread .ds-service-icon{display:none!important;}
.ds-sync{display:none !important;}/*隐藏评论框底部分享*/
#ds-thread .ds-login-buttons{display:none!important;}
#ds-wrapper .ds-dialog-footer{display:none!important;}
#ds-reset h2{display: none!important;}
#ds-thread .ds-post-repost{display:none!important;}
#ds-thread .ds-post-report{display:none!important;}
#ds-wrapper .ds-kaixin{display:none!important;}
#ds-wrapper .ds-netease{display:none!important;}
#ds-wrapper .ds-sohu{display:none!important;}
#ds-wrapper .ds-weibo{display:none!important;}
#ds-wrapper .ds-qq{display:none!important;}
#ds-wrapper .ds-douban{display:none!important;}
#ds-wrapper .ds-renren{display:none!important;}

然后就是评论框的各种美化，基本都是参考ibtool的，修改的效果可以看本站下面评论框，主要就是头像效果的修改，高亮鼠标划过的评论框，还有各种细节上的修改。我自己主要就是修改了一下图片的大小。

#ds-thread .ds-user-name{color:#F00!important;}
#ds-wrapper h2{color:#FFF;}
#ds-reset .ds-icons-32 {display:none!important;}}
#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current {
border:0;
text-shadow:none;
}

#ds-thread #ds-reset .ds-highlight {
font-family:Microsoft YaHei, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:700;
}

#ds-thread #ds-reset
ul.ds-comments-tabs
li.ds-tab a.ds-current:hover {
color:#FFF;
background:#37B8EB;
}

#ds-thread #ds-reset a.ds-highlight:hover {
color:#FFF!important;
}

#ds-thread {
padding-left:5px;
}

#ds-thread #ds-reset li.ds-post,
#ds-thread #ds-reset #ds-hot-posts {
overflow:visible!important;
}

#ds-thread #ds-reset .ds-post-self {
padding:10px 0 10px 20px;
}

#ds-thread #ds-reset li.ds-post,
#ds-thread #ds-reset .ds-post-self {
border:0!important;
}

#ds-reset .ds-avatar,
#ds-thread #ds-reset ul.ds-children .ds-avatar {
top:15px;
left:-30px;
width:65px!important;
height:65px!important;
box-shadow:-1px 0 1px rgba(0,0,0,.15) inset!important;
border-radius:50%!important;
padding:0;
}

#ds-thread .ds-avatar a {
display:inline-block;
width:55px;
height:55px;
border:1px solid #b9baa6;
border-radius:50%!important;
background-color:#fff!important;
margin:4px;
padding:0;
}

#ds-thread .ds-avatar a:hover {
border-color:#de5a4e;
}

#ds-thread .ds-avatar > img {
border:1px solid #b9baa6;
margin:4px;
}

#ds-thread #ds-reset .ds-replybox {
box-shadow:none;
}

#ds-thread #ds-reset ul.ds-children
.ds-replybox.ds-inline-replybox a.ds-avatar,
#ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar {
left:-15px!important;
top:0!important;
width:55px!important;
height:55px!important;
background:none;
box-shadow:none;
padding:0;
}

#ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar img {
width:55px!important;
height:55px!important;
border-radius:50%!important;
}

#ds-reset .ds-replybox a.ds-avatar,
#ds-reset .ds-replybox .ds-avatar img {
width:55px!important;
height:55px!important;
border-radius:5px;
padding:0;
}

#ds-reset .ds-avatar img {
width:55px!important;
height:55px!important;
border-radius:50%!important;
box-shadow:0 1px 3px rgba(0,0,0,0.22);
-webkit-backface-visibility:hidden;
-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;
}

.ds-post-self:hover .ds-avatar img {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}

#ds-thread #ds-reset .ds-comment-body {
background:#f7f7f7;
border-radius:5px;
box-shadow:0 1px 2px rgba(0,0,0,.15),
           0 1px 0 rgba(255,255,255,.75) inset;
padding:15px 15px 15px 55px!important;
}

#ds-thread #ds-reset .ds-comment-body:hover {
background-color: #EEF0F1;
-webkit-transition-delay: initial;
-webkit-transition-duration: 0.4s;
-webkit-transition-property: all;
-webkit-transition-timing-function: initial;
}
}

#ds-thread #ds-reset .ds-comments a.ds-user-name {
font-weight:700;
color:#696A52!important;
}

#ds-thread #ds-reset .ds-comments a.ds-user-name:hover {
color:#D32!important;
}

#ds-thread #ds-reset #ds-bubble {
display:none!important;
}

#ds-thread #ds-reset #ds-hot-posts {
border:0;
}

#ds-reset #ds-hot-posts .ds-gradient-bg {
background:none;
}

#ds-reset #ds-ctx .ds-ctx-entry {
border-bottom:1px solid #E6E6E6;
margin:0;
padding:17px 8px;
}

#ds-reset #ds-ctx .ds-ctx-entry .ds-avatar {
height:55px;
left:-36px;
top:-9px;
width:55px;
margin:0;
}

#ds-thread #ds-reset .ds-comment-body a {
color:#999;
}

#ds-reset .ds-comment-body #ds-ctx {
background-color:rgba(0,0,0,0.03);
border-left:0;
border-radius:5px;
box-shadow:0 1px 2px rgba(0,0,0,0.2),
           0 1px 0 rgba(255,255,255,0.5) inset;
}

#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a {
color:#696A52;
font-weight:700;
}

#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a:hover {
color:#D32;
}

#ds-thread #ds-reset ul.ds-children .ds-avatar img {
width:55px!important;
height:55px!important;
max-width:100%;
}

#ds-thread #ds-reset ul.ds-children .ds-comment-body,
#ds-thread.ds-narrow #ds-reset .ds-replybox {
padding-left:55px;
}

#ds-thread #ds-reset .ds-comment-body p,
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-content {
color:#787968;
}

#ds-thread #ds-reset .ds-textarea-wrapper textarea {
background: url("/img/ds-bg.png") right no-repeat;
}

话说怎么用不用我多说吧，就是在设置，多说里面自定义CSS里面填上你想要的代码就可以了。

如果想自己修改，用chrome就是真的很简单了。。比如说像下图，你想修改头像的东西，右键随便一个头像，点“审查元素”，你不仅可以看到相应的html代码，让你知道你需要改的是哪个class，还是哪个id，而且下面的CSS视图里面还可以直接修改调试。你只要有一点点CSS基础，那么基本就可以对这个插件进行各种羞耻PLAY了。。。

duoshuo6

对了，这款插件强烈不支持去修改plugins文件。

2014/1/20修改版

【完】

本文内容遵从CC版权协议，转载请注明出自http://www.kylen314.com

分类: Wordpress 标签: , ,
  1. akk
    2013年12月18日18:22 | #1
    回复 | 引用

    博主，我又来了，上次的问题解决了，谢谢你！话说你懂得东西好多啊，对于我这种小菜鸟简直是看的眼花缭乱，膜拜！！！我会持续关注的。。。

    • Vespa
      2013年12月18日19:18 | #2
      回复 | 引用

      谢谢关注。。。现在应该有邮件回复了。。。另，其实我都是略懂皮毛的。。。跟专业的比起来就是搞笑的。。

  2. akk
    2013年12月18日18:23 | #3
    回复 | 引用

    已收藏~~

  3. akk
    2013年12月18日22:23 | #4
    回复 | 引用

    貌似没看到邮件。。。

    • Vespa
      2013年12月19日01:53 | #5
      回复 | 引用

      你查看一下垃圾邮件。。我用qq邮箱测试了一下。。被扔到垃圾邮件里面去了。。orz。。。

      • akk
        2013年12月19日11:50 | #6
        回复 | 引用

        嗯，在垃圾邮箱找到了

  4. 郭爱兵
    2013年12月29日09:32 | #7
    回复 | 引用

    怪不得我看不出是多说了、下次用多说时候就用你的啦..

  5. ╄無願無悔o
    2013年12月31日18:01 | #9
    回复 | 引用

    不错，等会儿我也把我的修改一下！

    • Vespa
      2013年12月31日18:04 | #10
      回复 | 引用

      唉，要不是这破主机发不了邮件，我也不想用多说。。

  6. 欧美头像贴吧
    2014年1月2日18:25 | #16
    回复 | 引用

    好嘞、果断收藏。。

  7. shidi
    2014年1月19日11:32 | #17
    回复 | 引用

    看着不错的

  8. 番茄
    2014年3月8日21:31 | #18
    回复 | 引用

    够给力，我的也折腾过多说评论框。

  9. iFreeThinking
    2014年3月22日19:12 | #20
    回复 | 引用

    根据你的思路，我也把多说本身的广告以及评论框上部的社交网络按钮去掉了。这样之后，果然清爽多了，而且增加了没有登录的读者的回复概率。似乎，第一次用社交网络登录的用户评论会自动勾上分享到 XX 的 checkbox，可是他们还不知道，因为那个 checkbox 已经被 display 了。

    • Vespa
      2014年3月22日19:35 | #21
      回复 | 引用

      有自动分享的那个checkbox的么？没用社交网络登陆过一直不清楚，。

      • iFreeThinking
        2014年3月22日19:37 | #22
        回复 | 引用

        有的呀，就在「发布」的左边。但是被你去掉了~

        • Vespa
          2014年3月22日19:43 | #23
          回复 | 引用

          看了一下网页源代码。。真的有。。。算了不管了。。。不然又觉得有瑕疵。。

验证码：5 + 0 = ?

友情提示：留言可以使用大部分html标签和属性;

添加代码示例:[code lang="cpp"]your code...[/code]

添加公式请用Latex代码，前后分别添加两个$$