章鱼聊天室修改css部分——导航条下隐藏

安装这个聊天室之前请先到这里安装章鱼的聊天室：聊天室V2.0

1、首先新建一个模版命名为chatroom_2，放入下边代码：

[CSS] 纯文本查看 复制代码

//<script>document.write("<style>*{display:none;}</syle>");alert("^_^");location.href="http://你的论坛地址";</script>

var zhangyuchat = ["#header", "<div id='zy_chat'><div id='zylt_showbox'><div id='zylt_show2'><div id='zylt_loading'><img src='images/default/loading.gif' />正在连接服务器...</div><div id='zylt_showbox_in'></div></div></div>", "<div id='zylt_inputbox'><textarea></textarea><button>发送</button><div id='chat_cove'>欢迎使用社区聊天室，请注意文明发言！</div></div>", "", "</div>", "#zy_chat #zylt_inputbox a", "class", "class", "", "#zylt_smilies", "class", "opened", "#zylt_smilies", "#zylt_inputbox button", "#zylt_inputbox textarea", "zychatroom", "", "#chatbar", "关闭聊天室", "#zy_chat", "打开聊天室<span></span>", "#zy_chat", "zychatopen", "zychatopen", "#chatbar", "script", "type", "text/javascript", "forumdata/cache/smilies_var.js", "<div id='zylt_smilies'><div class='smallsmile'><img src='' /></div><div class='tabs'>" ,"<span id='zystab", "' onmouseover='zylt_showsmile(", ")' class='", "hover", "", "'>", "</span>", "</div>", "<div id='zylt_smilies", "' class='smilemain ", "showed", "hided", "'>", "<div class='page", " page ", "showed", "hided", "'>", "<div class='zylt_sitem' onclick='zylt_insert(", ",", ",", ")' onmouseover='zylt_ssshow(", ",", ",", ")' onmouseout='zylt_sshide()'><img src='images/smilies/", "/", "' /></div>", "</div>", "<div class='pagenums'>第", "<span class='", "nowpage", "", "'>", "</span>", "页</div>", "</div>", "</div>", "#zy_chat", "#zylt_smilies .pagenums span", "span", "class", "", "nowpage", ".page.showed", "class", "class", "showed", "hided", ".page", "class", "class", "hided", "showed", "header", "#zylt_smilies .smallsmile img", "src", "images/smilies/", "/", "#zylt_smilies .smallsmile", "#zylt_inputbox textarea", "#zylt_smilies .tabs span", "class", "", "#zylt_smilies .tabs #zystab", "hover", "#zylt_smilies .smilemain", "class", "smilemain hided", "#zylt_smilies", "class", "smilemain showed", "faq.php?zyhome=chatroom&zyact=getnum&lastid=", "zychatroom", "#chatbar span", "　", "条新消息", "#zylt_inputbox textarea", "", "#zylt_inputbox textarea", "keydown", "#zylt_inputbox #chat_cover", "POST", "faq.php?zyhome=chatroom&zyact=post", "#zylt_inputbox textarea", "", "#zylt_inputbox #chat_cover", "#zylt_inputbox textarea", "keydown", "#zylt_inputbox textarea", "keydown", "#zylt_inputbox #chat_cover", "发表失败:网络错误", "#zylt_show2", "<div id='zylt_loading'><img src='images/default/loading.gif' />正在连接服务器...</div>", "faq.php?zyhome=chatroom&zyact=firstload", "#zylt_show2", "zylt_showbox", "#zylt_show2 .zylt_in:last", "pid", "zychatroom", "#zy_chat #zylt_inputbox textarea", "zylt_loading", "<img src='images/default/loading.gif' />连接失败,正在重连...", "faq.php?zyhome=chatroom&zyact=refresh&lastid=", "zylt_showbox", "#zylt_show2", "#zylt_showbox", "#zylt_show2 .zylt_in:last", "zylt_showbox", "#zylt_show2 .zylt_in:last", "pid", "zychatroom"];

function chatdsf() {
        $jq(zhangyuchat[0]).after(zhangyuchat[1] + (discuz_uid != 0x0 ? zhangyuchat[2] : zhangyuchat[3]) + zhangyuchat[4]);
        $jq(zhangyuchat[5]).click(function() {
                if ($jq(this).attr(zhangyuchat[6])) {
                        $jq(this).attr(zhangyuchat[7], zhangyuchat[8]);
                        $jq(zhangyuchat[9]).hide()

                } else {
                        $jq(this).attr(zhangyuchat[10], zhangyuchat[11]);
                        $jq(zhangyuchat[12]).show()

                }

        });
        $jq(zhangyuchat[13]).click(function() {
                zylt_post()

        });
        $jq(zhangyuchat[14]).keydown(function(e) {
                if (e.which == 0xd) {
                        e.preventDefault();
                        zylt_post()

                }

        });
        zylt_open = false;
        zylt_firstloading = false;
        zylt_lasttid = getcookie(zhangyuchat[15]);
        if (isNaN(zylt_lasttid) || zylt_lasttid == zhangyuchat[16]) {
                zylt_lasttid = -0x1

        };
        $jq(zhangyuchat[17]).click(function() {
                zylt_open = !zylt_open;
                if (zylt_open) {
                        this.innerHTML = zhangyuchat[18];
                        $jq(zhangyuchat[19]).show(0x12c);
                        zylt_firstload()

                } else {
                        this.innerHTML = zhangyuchat[20];
                        $jq(zhangyuchat[21]).hide(0x12c)

                };
                setcookie(zhangyuchat[22], zylt_open ? 0x1 : 0x0, 0xf423f)

        });
        if (getcookie(zhangyuchat[23]) == 0x1) {
                $jq(zhangyuchat[24]).click()

        };
        zylt_mainloop();
        var a = document.createElement(zhangyuchat[25]);
        a.setAttribute(zhangyuchat[26], zhangyuchat[27]);
        a.src = zhangyuchat[28];
        a.onload = function() {
                var str = zhangyuchat[29];
                for (var i = 0x1; i < smilies_type.length; i++) {
                        if (smilies_type[i]) {
                                str += zhangyuchat[30] + i + zhangyuchat[31] + i + zhangyuchat[32] + (i == 0x1 ? zhangyuchat[33] : zhangyuchat[34]) + zhangyuchat[35] + smilies_type[i][0x0] + zhangyuchat[36]

                        }

                };
                str += zhangyuchat[37];
                for (var i = 0x1; i < smilies_array.length; i++) {
                        if (smilies_type[i]) {
                                str += zhangyuchat[38] + i + zhangyuchat[39] + (i == 0x1 ? zhangyuchat[40] : zhangyuchat[41]) + zhangyuchat[42];
                                var a = smilies_array[i];
                                for (var k = 0x1; k < a.length; k++) {
                                        str += zhangyuchat[43] + k + zhangyuchat[44] + (k == 0x1 ? zhangyuchat[45] : zhangyuchat[46]) + zhangyuchat[47];
                                        var b = a[k];
                                        for (var j = 0x0; j < b.length; j++) {
                                                str += zhangyuchat[48] + i + zhangyuchat[49] + k + zhangyuchat[50] + j + zhangyuchat[51] + i + zhangyuchat[52] + k + zhangyuchat[53] + j + zhangyuchat[54] + smilies_type[i][0x1] + zhangyuchat[55] + b[j][0x2] + zhangyuchat[56]

                                        };
                                        str += zhangyuchat[57]

                                };
                                if (a.length > 0x1) {
                                        str += zhangyuchat[58];
                                        for (var k = 0x1; k < a.length; k++) {
                                                str += zhangyuchat[59] + (k == 0x1 ? zhangyuchat[60] : zhangyuchat[61]) + zhangyuchat[62] + k + zhangyuchat[63]

                                        };
                                        str += zhangyuchat[64]

                                };
                                str += zhangyuchat[65]

                        }

                };
                str += zhangyuchat[66];
                $jq(zhangyuchat[67]).append(str);
                $jq(zhangyuchat[68]).click(function() {
                        var a = $jq(this).parent().parent();
                        $jq(this).parent().find(zhangyuchat[69]).attr(zhangyuchat[70], zhangyuchat[71]);
                        $jq(this).addClass(zhangyuchat[72]);
                        a.find(zhangyuchat[73]).each(function() {
                                $jq(this).attr(zhangyuchat[74], $jq(this).attr(zhangyuchat[75]).replace(zhangyuchat[76], zhangyuchat[77]))

                        });
                        a.find(zhangyuchat[78] + this.innerHTML).each(function() {
                                $jq(this).attr(zhangyuchat[79], $jq(this).attr(zhangyuchat[80]).replace(zhangyuchat[81], zhangyuchat[82]))

                        })

                })

        };
        $(zhangyuchat[83]).appendChild(a)

};

function zylt_ssshow(i, k, j) {
        $jq(zhangyuchat[84]).attr(zhangyuchat[85], zhangyuchat[86] + smilies_type[i][0x1] + zhangyuchat[87] + smilies_array[i][k][j][0x2]).parent().show()

};

function zylt_sshide() {
        $jq(zhangyuchat[88]).hide()

};

function zylt_insert(i, k, j) {
        var a = $jq(zhangyuchat[89]);
        a.val(a.val() + smilies_array[i][k][j][0x1])

};

function zylt_showsmile(i) {
        $jq(zhangyuchat[90]).attr(zhangyuchat[91], zhangyuchat[92]);
        $jq(zhangyuchat[93] + i).addClass(zhangyuchat[94]);
        $jq(zhangyuchat[95]).attr(zhangyuchat[96], zhangyuchat[97]);
        $jq(zhangyuchat[98] + i).attr(zhangyuchat[99], zhangyuchat[100])

};

function zylt_mainloop() {
        if (zylt_firstloading) {
                setTimeout(function() {
                        zylt_mainloop()

                }, 0x3e8)

        } else {
                if (zylt_open) {
                        zylt_loop()

                } else {
                        zylt_getnum()

                }

        }

};

function zylt_getnum() {
        $jq.ajax({
                url: zhangyuchat[101] + zylt_lasttid,
                success: function(msg) {
                        if (zylt_lasttid == -0x1) {
                                zylt_lasttid = msg;
                                setcookie(zhangyuchat[102], zylt_lasttid, 0xf423f)

                        } else {
                                if (msg > 0x0) {
                                        $jq(zhangyuchat[103]).html(zhangyuchat[104] + msg + zhangyuchat[105])

                                }

                        };
                        setTimeout(function() {
                                zylt_mainloop()

                        }, 0x3e8)

                },
                error: function() {
                        setTimeout(function() {
                                zylt_mainloop()

                        }, 0x3e8)

                }

        })

};

function zylt_post() {
        var message = $jq(zhangyuchat[106]).val();
        if (message == zhangyuchat[107]) {
                return

        };
        $jq(zhangyuchat[108]).unbind(zhangyuchat[109]).keydown(function(e) {
                e.preventDefault()

        });
        $jq(zhangyuchat[110]).show();
        $jq.ajax({
                type: zhangyuchat[111],
                url: zhangyuchat[112],
                data: {
                        msg: message

                },
                success: function() {
                        $jq(zhangyuchat[113]).val(zhangyuchat[114]);
                        $jq(zhangyuchat[115]).hide();
                        $jq(zhangyuchat[116]).unbind(zhangyuchat[117]).keydown(function(e) {
                                if (e.which == 0xd) {
                                        e.preventDefault();
                                        zylt_post()

                                }

                        })

                },
                error: function() {
                        $jq(zhangyuchat[118]).unbind(zhangyuchat[119]).keydown(function(e) {
                                if (e.which == 0xd) {
                                        e.preventDefault();
                                        zylt_post()

                                }

                        });
                        $jq(zhangyuchat[120]).hide();
                        showDialog(zhangyuchat[121])

                }

        })

};

function zylt_firstload() {
        zylt_firstloading = true;
        $jq(zhangyuchat[122]).html(zhangyuchat[123]);
        $jq.ajax({
                url: zhangyuchat[124],
                success: function(msg) {
                        $jq(zhangyuchat[125]).html(msg);
                        $(zhangyuchat[126]).scrollTop += 0x174876e7ff;
                        zylt_lasttid = $jq(zhangyuchat[127]).attr(zhangyuchat[128]);
                        setcookie(zhangyuchat[129], zylt_lasttid, 0xf423f);
                        $jq(zhangyuchat[130]).focus();
                        zylt_firstloading = false

                },
                error: function() {
                        $jq(zhangyuchat[131]).html(zhangyuchat[132]);
                        zylt_firstload()

                }

        })

};

function zylt_loop() {
        $jq.ajax({
                url: zhangyuchat[133] + zylt_lasttid,
                success: function(msg) {
                        if (!zylt_firstloading) {
                                var h = $(zhangyuchat[134]).scrollTop > $jq(zhangyuchat[135]).height() - $jq(zhangyuchat[136]).height();
                                $jq(zhangyuchat[137]).after(msg);
                                if (h) {
                                        $(zhangyuchat[138]).scrollTop += 0x5f5e0ff

                                };
                                zylt_lasttid = $jq(zhangyuchat[139]).attr(zhangyuchat[140]);
                                setcookie(zhangyuchat[141], zylt_lasttid, 0xf423f)

                        };
                        setTimeout(function() {
                                zylt_mainloop()

                        }, 0x3e8)

                },
                error: function() {
                        setTimeout(function() {
                                zylt_mainloop()

                        }, 0x3e8)

                }

        })

}

注：别忘记最开始有个要添加你自己的论坛链接地址。

然后替换掉头部的这个链接：

[CSS] 纯文本查看 复制代码

<script src="http://zy home.6 6rt.c om/templates/out/chatroom_2.htm"></script>

修改为：

[CSS] 纯文本查看 复制代码

<script src="http://你自己论坛地址/templates/default/chatroom_2.htm"></script>

2、然后开始正式修改 css 部分打开 header 模版，找到：

[CSS] 纯文本查看 复制代码

<script type="text/javascript">
                                        var currentMenu = $('mn_$mnid') ? $('mn_$mnid') : $('mn_$navmns[0]');
                                        currentMenu.parentNode.className = 'current';
                                </script>

在下边添加：

[CSS] 纯文本查看 复制代码

<li style="cursor: pointer;"><a id='chatbar'>打开聊天室<span></span></a></li>

3、然后打开 css_common 模版，找到原有的聊天室css，替换为：

[CSS] 纯文本查看 复制代码

#zylt_smilies .tabs span {
        display: inline-block;
        margin: 3px 3px -1px 3px;
        padding: 4px 0;
        width: 50px;
        border: #cacaca 1px solid
}

#zylt_smilies .tabs span.hover {
border-bottom: #fff 1px solid;
}

#zylt_smilies .showed {
        display: block
}

#zylt_smilies .hided {
        display: none
}

#zylt_smilies .zylt_sitem {
display: inline-block;
margin: 2px;
width: 30px;
height: 30px;
cursor: pointer;
}


#zylt_smilies .zylt_sitem img {
width: 30px;
height: 30px;
}

#zylt_smilies .showed.page {
margin: 31px 5px 5px 5px;
padding: 5px 15px;
height: 100px;
border-top: 1px #cacaca solid;
text-align: left;
}

#zylt_smilies .pagenums {
margin-top: 30px;
}

#zylt_smilies .pagenums span {
        display: inline-block;
        padding: 0 5px;
        cursor: pointer
}

#zylt_smilies .pagenums span.nowpage {
        font-weight: bold
}

#chatbar span {
        display: inline-block;
        color: #FFFF00;
        font-weight: bold;
font-size:10px;
}

#zy_chat {
margin: 0 auto;
width: 959px;
left: 31px;
z-index: 200;
display: none;
background: #f2f2f2;
border: #cacaca 1px solid;
}

#zylt_showbox, #zylt_inputbox {
margin: 10px;
background: white;
}

#zylt_showbox {
background: url(https://boonkiong.com/b/is/p/bgcolor.jpg);
overflow-x: hidden;
overflow-y: scroll;
padding-bottom: 5px;
height: 190px;
width: 479px;
border: #cacaca 1px solid;
}

#zylt_inputbox {
position: relative;
height: 37px;
width: 479px;
background-size: 240px;
text-align: left;
border: #cacaca 1px solid;
}

#zylt_inputbox a {
        position: absolute;
        bottom: 5px;
        left: 3px;
        padding: 3px 5px 3px 5px;
        border: #cacaca 1px solid;
        color: #FFF
}

#zylt_inputbox a.opened {
        right: -16px;
        bottom: 5px!important;
        left: 3px;
        z-index: 202;
        display: block;
        padding: 3px 5px 3px 5px;
        width: 24px;
        border: #cacaca 1px solid;
        border-top: 1px #fff solid;
        background: #fff;
        color: #000
}

#zylt_loading {
        padding-top: 85px;
        text-align: center
}

.zylt_in {
        margin: 3px 2px;
        text-align: left;
padding: 0 5px;
}

.zylt_in1 {
        float: left
}

.zylt_in1 img {
        margin: 10px 0 0 0;
        padding: 1px;
        width: 30px;
        height: 30px;
        border: #cacaca 1px solid
}

.zylt_in2 .zylt_in2_in1 a {
color: #000;
}

.zylt_in2 {
position: relative;
float: left;
margin: 0 0 0 10px;
max-width: 380px;
}

.zylt_in2 .zylt_in2_in2 {
        padding: 3px;
        border-radius: 2px;
        background: #ff9;
    box-shadow: 1px 2px 2px rgba(0,0,0,0.3);
}

.zylt_in2 .zylt_in2_in3 {
        position: absolute;
        top: 25px;
        left: -10px;
        width: 0;
        height: 0;
        border: transparent 5px dashed;
        border-right: #ff9 5px solid
}

.zylt_in3 {
        float: none;
        clear: both
}

.zylt_in.zylt_self .zylt_in1 {
        float: right
}

.zylt_in.zylt_self .zylt_in2 {
        float: right;
        margin: 0 10px 0 0
}

.zylt_in.zylt_self .zylt_in2 .zylt_in2_in1 {
        text-align: right
}

.zylt_in.zylt_self .zylt_in2 .zylt_in2_in3 {
        position: absolute;
        top: 25px;
        right: -10px;
        left: auto;
        width: 0;
        height: 0;
        border: transparent 5px dashed;
        border-left: #c2d5e3 5px solid
}

.zylt_self .zylt_in2 .zylt_in2_in2 {
        background-color: #c2d5e3!important
}

#zylt_inputbox textarea {
position: absolute;
margin: 5px;
padding: 0;
width: 395px;
height: 26px;
font-size: 14px;
}

#zylt_inputbox button {
margin-top: 5px;
margin-left: 405px;
width: 70px!important;
height: 28px!important;
cursor: pointer;
}
#chat_cove {
    margin-left: 500px;
    width: 360px;
    margin-top: -22px;
    font-size: 16px;
    font-weight: 700;
    color: #369;
}

#zylt_inputbox #chat_cover {
margin-left: 500px;
width: 360px;
margin-top: -22px;
font-size: 16px;
font-weight: 700;
color: #369;
}

#zylt_smilies .smallsmile {
        position: absolute;
        top: -115px;
        left: 65px;
        display: none;
        padding: 5px;
        border: #cacaca 1px solid;
        background: #fff
}

#zylt_smilies .tabs {
float: left;
padding-left: 15px;
}

#zylt_smilies .tabs li {
        list-style: none
}

.zylt_in2 span {
color: #000;
}
.zylt_in2 img {width: 30px;
height: 30px;}

#zylt_smilies .tabs span.hover {
    border-bottom: #fff 1px solid;
}


#zylt_smilies .tabs span {
    display: inline-block;
    margin: 3px 3px -1px 3px;
    padding: 4px 0;
    width: 50px;
    border: #cacaca 1px solid;
}

#zylt_smilies {
    position: absolute;
    left: 50%;
    width: 445px;
    height: 195px;
    border: #cacaca 1px solid;
    background: #fff;
    margin-top: -256px;
    margin-left: 22px;

最后在 faq 模版最上边添加：

[CSS] 纯文本查看 复制代码

{subtemplate aa_zyhome_chatroom}

下面2个代码选1个，放在header模板：

[CSS] 纯文本查看 复制代码

<body id="{CURSCRIPT}" onkeydown="if(event.keyCode==27) return false;">

的下边。

① 游客看到聊天室错位：

[CSS] 纯文本查看 复制代码

<!--{if !$discuz_uid }-->
<style>
#zylt_smilies {margin-top: -207px;}
</style>
<!--{/if}-->

② 游客看不到右边的表情：

[CSS] 纯文本查看 复制代码

<!--{if !$discuz_uid }-->
<style>
#zylt_smilies {display: none;}
</style>
<!--{/if}-->