kn007的个人博客
♥ You are here: Home > > > 小天的聊天(chat)短代码微改

小天的聊天(chat)短代码微改

by | 58 Comments

QQ截图20130201193419

最近小天那里发了《聊天(chat)短代码制作教程》,具体效果如下:

QQ截图20130203155551

因为默认是左边的,小天给的是左边的源码,所以帮她改成右边的,具体效果如下:

QQ截图20130203155551

貌似还可以,但是按照文章的短代码,也许你需要两个短代码来实现左边右边,所以我把它合并了。代码如下:

function chatCode( $atts, $content = null ) {
extract( shortcode_atts( array(
'chatter' => 'kn007',
'avatar' => 'kn007',
'position' => 'left',
), $atts ) );

if ($position =='right') {$cont_posit = "margin: -68px 80px 1px 10px;";$ave_posit ='margin-left: 425px;';}else{$cont_posit = "margin:-60px 0 0 85px;";$ave_posit ='';}

return '<div class="chatbox" style="margin:0 50px;padding:10px 10px 15px 1px;background:#f2f2f2;border:3px solid #DDD;border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;"><div class="chat_avatar" style="background:url('.get_bloginfo("template_url").'/author/'.$avatar.'.jpg) center no-repeat;box-shadow:0px 1px 1px rgba(255, 255, 255, 0.75);position: relative;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius:3px;background-color:#fff;width: 64px;height: 64px;margin: 0 0 20px 10px;'.$ave_posit.'"></div><section class="chat_content" style="position:relative;color:#555;max-width:400px;padding:6px 10px;word-wrap:break-word;border:1px solid;border-color:#DDD #DDD #EEE #DDD;border-radius: 6px;-moz-box-shadow:0px 1px 1px #bbb;-webkit-box-shadow:0px 1px 1px #bbb;box-shadow:0px 1px 1px #bbb;background:#ffffff;'.$cont_posit.'"><span><strong>'.$chatter.': </strong>'.$content.'</span></section></div>';
}
add_shortcode( 'chat', 'chatCode' );

这个代码现在有个缺陷,因为大家的主题都不一样。也就是左边右边的margin大小会有区别,要拿去用还要微调一下。表示css的功力确实不好,只能写成这样水平了。作者图片 放在主题目录的/author/作者名.jpg。

因为没时间和精力去改,所以你们看着办,有兴趣就拿去改改吧。呵呵。

转载请注明转自:kn007的个人博客的《小天的聊天(chat)短代码微改

donate
有所帮助?

Comments

58 Comments立即评论
Loading...
  1. 要不也帮我该该主题

    1. MOD回复

      @鬼娃娃: 没空没时间 :o

  2. 回复

    哎哟、不错哦! :idea:

    1. MOD回复

      @babytomas: 嘿嘿,谢谢~

    2. 回复

      @kn007: 你的邮件回复样式可以分享吗? :idea:

    3. 回复

      @babytomas: 找到了~

    4. MOD回复

      @babytomas: :lol: 前不久的帖子有哦 :grin:

    5. 回复

      @kn007: :shock: 求地址 。。。

icon_wink.gificon_neutral.gificon_mad.gificon_twisted.gificon_smile.gificon_eek.gificon_sad.gificon_rolleyes.gificon_razz.gificon_redface.gificon_surprised.gificon_mrgreen.gificon_lol.gificon_idea.gificon_biggrin.gificon_evil.gificon_cry.gificon_cool.gificon_arrow.gificon_confused.gificon_question.gificon_exclaim.gif