再次修改iMucid Theme的评论样式

一直觉得iMucid的评论样式还不是很“爽”,于是偶又“蛋疼”起来……

昨天在 MOPVHS 的论坛闲逛,发现一个可以隐藏评论者的Name,Email,和Websie表单的东东。

其实这个东东是我很早就想加上去的一个功能。其实好多主题就有这个功能,比如MG12的iNove。

真乃天赐我也,终于找到了一个可以用JQery实现的方法。

不仅可以隐藏输入表单,还可以实现显示“Welcome back xxx !”的效果。

其实很简单,就是用一个Div将name,email,website封装起来,然后由JQery实现控制。具体就不说了,大家可以问一问MOPVHS。

看一下啊演示效果吧:

也就是说,第一次输入留言者名称,邮箱,网站,并且成功留言后,就可以将它们都隐藏起来,就像注册用户登录了一样。如果想换留言者身份,只要点击一下那个“Change”就行了。

我想了想,叫他什么好呢?对了,就叫它“伪登陆”吧!

改着改着,觉得我的嵌套回复不好看,而且还有很大的Bug,那就是多人进行讨论的时候,就失去了层次样式。

当然这个主要怪我,因为我木有用嵌套回复插件,我的嵌套回复是调用的WP原生态的,所以可以说是自己写的!

当然比较麻烦的就是嵌套回复的CSS,我当初写CSS的时候,只考虑到了两个人不停的“打架”的情况,而木有考虑到一群人“打群架”的情况。

因此,一个层的人数越多,就越木有层次样式了。

所以,我干脆重写了嵌套回复的CSS。

其实写好嵌套回复的CSS并不难,关键是逻辑问题!

其实众所周知,所谓的嵌套回复其实就是一个不断递进的无序列表,因此,在没有插件和JS的辅助下,就只有一层一层的写了!

我把自己写的嵌套回复的CSS贴出来供大家参考。

.commentlist {    //整个评论主体
width:95%;
margin-left: 25px;
list-style: none;
}

.commentlist li.comment {    //评论第一层
width:95%;
margin-bottom:20px;    //外边距,因为是嵌套主层次,所以应该加底边距分开嵌套“楼主”。
padding:0 0 5px 13px;    //内边距,主要是分开更加深的楼层,和左边偏移量,可继承!
position: relative;
border: 1px solid #222;
line-height: 24px;
background:#222;    //第一层,底色为222

}

.commentlist li li.comment{
background:#333;    //第二层,底色为333,对比之下层次就出来了
margin-bottom:10px; //据我发现,外边距无法继承,所以每层都需要写。
}

.commentlist li  li li.comment{
background:#222;    //第三层,底色为222。
margin-bottom:10px; //同理要写上底部外边距。
}

.commentlist li  li li li.comment{
background:#333;    //第四层,底色为333。
margin-bottom:10px;    //记得加上底外边距。
}

.commentlist li  li li li li.comment{
background:#222;    //第五层,底色为222。
margin-bottom:10px;    //最后的底外边距。
}

其实,我只开了五层的嵌套,WP而默认最大可以开到10层。

你可能觉得奇怪,我为什么只开了5层,有两个原因:

1.楼层多了缩放太大,评论空间就很小了。

2.我只写了5层的css啥^_^

好了,层是被我搞好了,但是还是觉得不好看,那就是——间距太大了。

因为我开始是以Gavatar头像的宽度来分层的,这样很“宽”,很“豪放”,其实也很“紧张”,很“纠结”。

所以干脆将评论内容和Meta分开。

鼓捣了半天,顿时舒爽了很多,这样我就有信心写到10层的嵌套回复啦!

这样一处理,顿时感觉评论层次更加清晰了,但是问题是我只开了5层嵌套,到最后就只有点击顶层进行回复了,

怎样才能分的更加清晰呢?

Oh,我想起了@回复,对了在用户点击回复按钮的时候,自动将被回复者的名称和楼层信息添加进去!

这样就再也不会“荷花水不清”鸟。

在这里要感谢Axiu哥,和ZWW大神提供的JQery实现的添加@回复了!

鼓捣了半天,又被我和谐进去了。

想了想,我已经为评论添加了四个js了啊,一个是Willian大湿的Ajax,一个是“Ctrl+enter”键盘快捷键回复,一个是“伪登陆”,一个是“@回复”。

Ajax工程浩大,我就不动它了,于是干脆将“Ctrl+enter”,“伪登陆”和“@回复”的js  “合体”  鸟,顿时感觉清爽了许多多!

这样一来,不管童鞋们怎么“打架”,都不会打的“稀里糊涂”啦^_^

主要问题是解决了,可是细节问题也不少。

我怎么就会善罢甘休滴停下呢,所以下一个目标就是Wilian大湿的Ajax回复了。

众所周知,Willian大师系台湾淫,所以造出来滴东西也系繁体字,起码首先偶得把他改成简体吧。

于是小改了一下Ajax-comment.js终于将其“汉化”鸟。

然后就是修改令我比较不爽的,评论提交成功后的,“再修改”提示。

我给他变了色,而且还加上了黄色的下划线,希望有促使淫点击修改的“欲望”。

iMucid Theme的评论,不管是评论主体,还是留言form,算是都被我折腾的差不多了吧,接下了应该可以在这个块块清闲一下了吧^_^

好了,最后啰嗦一句,其实本主题的最佳浏览器是基于Gecko核心的Firefox,和Opera,因为他们都支持闪烁文字^_^

PS:其实Chrome也不差,但是一句话,只要是非IE内核的浏览器都不差!

About Mucid

My life is brilliant !
This entry was posted in Themes and tagged , , , , , , . Bookmark the permalink.

139 Responses to 再次修改iMucid Theme的评论样式

  1. 阿修 says: Unknown Unknown Unknown Unknown

    好像没觉得有什么大变化

  2. 阿达 says: Unknown Unknown Unknown Unknown

    我也想实现这个效果啊~~ :roll:

  3. Code之行人 says: Unknown Unknown Unknown Unknown

    恩,折腾的不错 :grin:

  4. 云在天边 says: Unknown Unknown Unknown Unknown

    我来顶顶 :?:

  5. vastar says: Unknown Unknown Unknown Unknown

    嵌套回复的代码还真嵌套着写的啊,汗。。。

  6. yetone says: Unknown Unknown Unknown Unknown

    终于发现变化了 :roll:

  7. 7cbt says: Unknown Unknown Unknown Unknown

    比之前是好看多了。 :oops:

  8. 秋上书 says: Unknown Unknown Unknown Unknown

    代码好深奥 :roll:

  9. 蛋卷 says: Unknown Unknown Unknown Unknown

    :twisted: 生命在于折腾

  10. 小羿 says: Unknown Unknown Unknown Unknown

    :grin: 这个排列不错啊

  11. Ygs says: Unknown Unknown Unknown Unknown

    我也折腾出来了“伪登陆” :wink:

  12. 网名 says: Unknown Unknown Unknown Unknown

    真能折腾啊 呵呵

  13. 七叶草 says: Unknown Unknown Unknown Unknown

    评论的地方很难看啊,老是超出你的页面了

  14. zwwooooo says: Unknown Unknown Unknown Unknown

    测试评论 :twisted:

  15. 随风 says: Unknown Unknown Unknown Unknown

    不小心的过客

  16. braxiu says: Unknown Unknown Unknown Unknown

    写了段代码,你参考下,应该可以替换掉你上面的代码

    .commentlist {
    width:95%;
    margin-left: 25px;
    list-style: none;
    }

    .depth-1 { /*第一层评论*/
    width:95%;
    margin-bottom:20px;
    padding:0 0 5px 13px;
    position: relative;
    border: 1px solid #222;
    line-height: 24px;
    background:#222;
    }

    .depth-3,
    .depth-5,
    .depth-7,
    .depth-9{
    background:#222;
    margin-bottom:10px;
    }

    .depth-2,
    .depth-4,
    .depth-6,
    .depth-8,
    .depth-10{
    background:#222;
    margin-bottom:10px;
    }

    • braxiu says: Unknown Unknown Unknown Unknown

      最后面的 background:#222; 我写错了

      • Mucid says: Unknown Unknown Unknown Unknown

        @braxiu 嗯,这个应该是层次选择器了,我还木有接触到哦,分基数和偶数啊,只要把li替换就行了啊^_^还是braxiu最NB!

        • braxiu says: Unknown Unknown Unknown Unknown

          只是控制class的样式而已,wp的嵌套评论会加上 depth-x 这样的class

          • Mucid says: Unknown Unknown Unknown Unknown

            @braxiu 嗯,我测试了半天发现有的要改,第一层要保持为.commentlist li.comment然后后面的要改为
            .commentlist .depth-3.comment这样,觉得depth-3应该就是li li li了,但是奇怪的是为什么不可以把第一层写为.commentlist depth-1.comment呢?

          • braxiu says: Unknown Unknown Unknown Unknown

            @mucid

            再给个你参考下,测试过,样式跟你的一样了

            .commentlist {
            width:95%;
            margin-left: 25px;
            list-style: none;
            }

            .commentlist .comment{
            display:block;
            padding:0 0 5px 13px;
            line-height: 24px;
            width:95%;
            border: 1px solid #222;
            margin-bottom:10px!important;
            }

            .depth-1{margin-bottom:20px; }
            .depth-1, .depth-3, .depth-5, .depth-7, .depth-9{ background:#222;}
            .depth-2, .depth-4, .depth-6, .depth-8, .depth-10{ background:#333;}

            • Mucid says: Unknown Unknown Unknown Unknown

              @braxiu 呃,你的这个头像会乱飘,我改了下,现在是
              .commentlist .comment {
              width:95%;
              margin-bottom:20px;
              padding:0 0 5px 13px;
              position: relative;
              border: 1px solid #222;
              line-height: 24px;
              background:#222;

              }

              .commentlist .depth-3.comment,
              .commentlist .depth-5.comment,
              .commentlist .depth-7.comment,
              .commentlist .depth-9.comment{
              background:#222;
              margin-bottom:10px;
              }

              .commentlist .depth-2.comment,
              .commentlist .depth-4.comment,
              .commentlist .depth-6.comment,
              .commentlist .depth-8.comment,
              .commentlist .depth-10.comment{
              background:#333;
              margin-bottom:10px;
              }

              我不喜欢用!important,觉不觉得这样更加层次清晰呢,谢谢哦!