0o -.......Forum 361dodesign.com.......- o0 Dịch vụ Thiết kế - In ấn - In Offset - Thế giới Thiết kế - Download phần mềm - Download Vector Free - Hỗ trợ Forum |
| | [Share] Chatbox style Facebook [Punbb,Phpbb3,Invision] | |
| | Tác giả | Thông điệp |
---|
caoviethoa92
Tổng số bài gửi : 64 Điểm tích lũy : 4614 Thích : 0 Tham gia : 27/02/2012
| Tiêu đề: [Share] Chatbox style Facebook [Punbb,Phpbb3,Invision] Thu Jun 06, 2013 5:09 pm | |
| Demo Cách làm : Bước 1 : Vào css thêm đoạn này - Code:
-
/*facebook-chat*/ .button-app { position: fixed; right: 0; bottom: 0; } #chatbox { bottom: 0; height: 300px; left: 0; padding-bottom: 30px; top: auto; width: 300px; background-color: white; border: 1px solid rgba(0, 0, 0, .3); border-width: 0 1px; } #chatbox_footer { height: 30px; padding: 0; position: absolute; width: 300px; background-color: white; border-top: 1px solid #A5A5A5; border-left: 1px solid #A5A5A5;} #chatbox_members { border: 0; bottom: 0; position: fixed; right: 0; top: 0; width: 207px; z-index: 999; background: white; border-left: 1px solid #979797; } #chatbox p{ background: white; border-top: 1px solid #EEE; border-width: 1px 0 0; } #chat-app-fb, #chatbox, #chatbox p, #chatbox p strong {font-family: 'lucida grande',tahoma,verdana,arial,sans-serif; font-size: 11px; font-weight: normal!important;}
#chatbox_header.main-head { background: #4A66A0; border: 1px solid rgba(0, 39, 121, .76); border-bottom: none; bottom: 330px; cursor: pointer; height: 30px; line-height: 30px; padding: 0; position: absolute; top: auto; width: 300px; } .chatbox-title { display: none; } #chatbox_option_autorefresh { display: none; } #chatbox_footer label { color: transparent; font-size: 0; visibility: hidden; } #message { font-size: 12px; visibility: visible; width: 244px; border: 0; outline: 0; height: 28px; position: relative; top: -10px; padding: 0 5px; } .right-box.style-buttons { display: block; background: #2C2C2C; } #chat-app-fb { position: fixed; top: 0; bottom: 0; height: 100%; right: 0; width: 500px; } body.chatbox { background: none; border: none; } .chatbox-options { margin: 0; float: left; padding-left: 10px; } #divsmilies { background: white; border: 1px solid white; left: 10px; position: relative; top: -38px; width: 42px; height: 26px; } #chatbox_members .member-title ,.date-and-time, #divcolor, #divstrike, #divunderline, #divitalic, #divbold { display: none; } #chatbox_members ul li { padding: 6px 0 6px 10px; margin: 2px 0; } #chatbox_members ul li:hover {background: #E6E9EE;} #chatbox_members ul { margin: 0; padding: 0; } body[bgcolor^="#fbfbfb"] { background: transparent; } #chatbox_contextmenu { z-index: 999; margin-top: 10px; margin-left: -39px; } .fb-search form input { background-image: url("http://i.imgur.com/9tSaXF7.png"); border: 0; width: 133px; height: 25px; padding: 0 0 0 20px; background-repeat: no-repeat; outline: none; box-shadow: none; color: #BDBDBD; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 11px; z-index: 999999!important; position: relative;} .seo-me { width: 207px; } .profile-se { float: right; margin-right: 27px; } .button-app img[src^="http://i.imgur.com/degNOB8.png"] { float: right; position: absolute; right: 0; } .button-app img[src^="http://i.imgur.com/FMZxNQv.png"] { margin-right: 30px; } .button-app img[src^="http://i.imgur.com/FMZxNQv.png"] + div.seo-me { display: none; } .fb-search form input:focus { color: #4B4B4B; } .button-app { z-index: 999999!important; } #chat-app-fb { z-index: 99999!important; } .count-user { position: fixed; z-index: 999; right: 155px; bottom: 6px; font: bold 11px verdana ,arial; color: #000;} .button-app img[src^="http://i.imgur.com/degNOB8.png"] + div.seo-me + div.count-user { display: none; } .button-app img[src^="http://i.imgur.com/FMZxNQv.png"] + div.seo-me + div.count-user { display: inline; } /*Facebook-chat*/ Bước 2 : Vào overall_footer_end thêm code này vào cuối - Code:
-
<div class="button-app" style="cursor:pointer;"><img src="http://i.imgur.com/FMZxNQv.png" onclick="document.getElementById('chat-app-fb').style.display=(this.src=='http://i.imgur.com/FMZxNQv.png')?'block':'none';this.src=(this.src=='http://i.imgur.com/FMZxNQv.png')?'http://i.imgur.com/degNOB8.png':'http://i.imgur.com/FMZxNQv.png';"/><div class="seo-me"><div class="profile-se"><a href="/profile?mode=editprofile"><img src="http://i.imgur.com/xHLwgoA.png" title="Opciones"></a></div><div class="fb-search"><form action="/search" method="get"><input type="text" class="inputbox medium" name="search_keywords" value="Buscar" onclick="if (this.value == 'Buscar') this.value = '';" onblur="if (this.value == '') this.value = 'Buscar';"></form></div></div><div class="count-user">(<span id="chat-user-on">0</span>)</div></div><div id="chat-app-fb" style="display:none;">
<iframe src="/chatbox/index.forum?page=front&" scrolling="no" marginwidth="0" style="height: 100%;margin-left: -19px;width: 520px;" marginheight="0" frameborder="0"></iframe></div> <script>jQuery(document).ready( function() {jQuery("#chat-user-on").load("/ #onlinechat strong:eq(0)");});</script> thế là xong ok code cho phiên bản Invision- Spoiler:
Bước 1 : Vào css thêm đoạn này - Code:
-
/*facebook-chat*/ .button-app { position: fixed; right: 0; bottom: 0; } #chatbox { bottom: 0; height: 300px; left: 0; padding-bottom: 30px; top: auto; width: 300px; background-color: white; border: 1px solid rgba(0, 0, 0, .3); border-width: 0 1px; } #chatbox_footer { height: 30px; padding: 0; position: absolute; width: 300px; background-color: white; border-top: 1px solid #A5A5A5; border-left: 1px solid #A5A5A5;} #chatbox_members { border: 0; bottom: 0; position: fixed; right: 0; top: 0; width: 207px; z-index: 999; background: white; border-left: 1px solid #979797; } #chatbox p{ background: white; border-top: 1px solid #EEE; border-width: 1px 0 0; } #chat-app-fb, #chatbox, #chatbox p, #chatbox p strong {font-family: 'lucida grande',tahoma,verdana,arial,sans-serif; font-size: 11px; font-weight: normal!important;}
#chatbox_header ,#chatbox_header.main-head { background: #4A66A0; border: 1px solid rgba(0, 39, 121, .76); border-bottom: none; bottom: 330px; cursor: pointer; height: 30px; line-height: 30px; padding: 0; position: absolute; top: auto; width: 300px; } .chatbox-title { display: none; } #chatbox_option_autorefresh { display: none; } #chatbox_footer label { color: transparent; font-size: 0; visibility: hidden; } #message { font-size: 12px; visibility: visible; width: 281px; border: 0; outline: 0; height: 28px; position: relative; top: 0px; padding: 0 5px; left: 0; background: rgba(0, 0, 0, 0)!important;} .right-box.style-buttons { display: block; background: #fff; } #chat-app-fb { position: fixed; top: 0; bottom: 0; height: 100%; right: 0; width: 500px; } body.chatbox { background: none; border: none; } .chatbox-options { margin: 0; float: left; padding-left: 10px; } #divsmilies { background: white; border: 1px solid white; left: 10px; position: relative; top: -45px; width: 42px; height: 26px; } #chatbox_members .member-title ,.date-and-time, #divcolor, #divstrike, #divunderline, #divitalic, #divbold { display: none; } #chatbox_members ul li { padding: 6px 0 6px 10px; margin: 2px 0; } #chatbox_members ul li:hover {background: #E6E9EE;} #chatbox_members ul { margin: 0; padding: 0; } body[bgcolor^="#fbfbfb"] { background: transparent; } #chatbox_contextmenu { z-index: 999; margin-top: 10px; margin-left: -39px; } .fb-search form input { background-image: url("http://i.imgur.com/9tSaXF7.png"); border: 0; width: 133px; height: 25px; padding: 0 0 0 20px; background-repeat: no-repeat; outline: none; box-shadow: none; color: #BDBDBD; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 11px; z-index: 999999!important; position: relative;} .seo-me { width: 207px; } .profile-se { float: right; margin-right: 27px; } .button-app img[src^="http://i.imgur.com/degNOB8.png"] { float: right; position: absolute; right: 0; } .button-app img[src^="http://i.imgur.com/FMZxNQv.png"] { margin-right: 30px; } .button-app img[src^="http://i.imgur.com/FMZxNQv.png"] + div.seo-me { display: none; } .fb-search form input:focus { color: #4B4B4B; border:0!important;} .button-app { z-index: 999999!important; } #chat-app-fb { z-index: 99999!important; } .count-user { position: fixed; z-index: 999; right: 155px; bottom: 6px; font: bold 11px verdana ,arial; color: #000;} .button-app img[src^="http://i.imgur.com/degNOB8.png"] + div.seo-me + div.count-user { display: none; } .button-app img[src^="http://i.imgur.com/FMZxNQv.png"] + div.seo-me + div.count-user { display: inline; } .fb-search form input:hover { border: none!important; } /*Facebook-chat*/ Bước 2 : Vào MODULES >> Portal & Widgets Forum widgets management >> Create a widget thêm code này vào - Code:
-
<div class="button-app" style="cursor:pointer;"><img src="http://i.imgur.com/FMZxNQv.png" onclick="document.getElementById('chat-app-fb').style.display=(this.src=='http://i.imgur.com/FMZxNQv.png')?'block':'none';this.src=(this.src=='http://i.imgur.com/FMZxNQv.png')?'http://i.imgur.com/degNOB8.png':'http://i.imgur.com/FMZxNQv.png';"/><div class="seo-me"><div class="profile-se"><a href="/profile?mode=editprofile"><img src="http://i.imgur.com/xHLwgoA.png" title="Opciones"></a></div><div class="fb-search"><form action="/search" method="get"><input type="text" class="inputbox medium" name="search_keywords" value="Buscar" onclick="if (this.value == 'Buscar') this.value = '';" onblur="if (this.value == '') this.value = 'Buscar';"></form></div></div><div class="count-user">(<span id="chat-user-on">0</span>)</div></div><div id="chat-app-fb" style="display:none;">
<iframe src="/chatbox/index.forum?page=front&" scrolling="no" marginwidth="0" style="height: 100%;margin-left: -19px;width: 520px;" marginheight="0" frameborder="0"></iframe></div> <script>jQuery(document).ready( function() {jQuery("#chat-user-on").load("/ #fo_stat table.ipbtable tbody#s0 tr:eq(7) td.row2 p strong:eq(0)");});</script>
| |
| | | caoviethoa92
Tổng số bài gửi : 64 Điểm tích lũy : 4614 Thích : 0 Tham gia : 27/02/2012
| Tiêu đề: Re: [Share] Chatbox style Facebook [Punbb,Phpbb3,Invision] Thu Jun 06, 2013 5:11 pm | |
| Code cho phiên bản Phpbb3
Css : - Spoiler:
- Code:
-
/*facebook-chat*/ .button-app { position: fixed; right: 0; bottom: 0; } #chatbox { bottom: 0; height: 300px; left: 0; padding-bottom: 30px; top: auto; width: 300px; background-color: white; border: 1px solid rgba(0, 0, 0, .3); border-width: 0 1px; } #chatbox_footer { height: 30px; padding: 0; position: absolute; width: 300px; background-color: white; border-top: 1px solid #A5A5A5; border-left: 1px solid #A5A5A5;} #chatbox_members { border: 0; bottom: 0; position: fixed; right: 0; top: 0; width: 207px; z-index: 999; background: white; border-left: 1px solid #979797; } #chatbox p{ background: white; border-top: 1px solid #EEE; border-width: 1px 0 0; } #chat-app-fb, #chatbox, #chatbox p, #chatbox p strong {font-family: 'lucida grande',tahoma,verdana,arial,sans-serif; font-size: 11px; font-weight: normal!important;}
#chatbox_header ,#chatbox_header.main-head { background: #4A66A0; border: 1px solid rgba(0, 39, 121, .76); border-bottom: none; bottom: 330px; cursor: pointer; height: 30px; line-height: 30px; padding: 0; position: absolute; top: auto; width: 300px; } .chatbox-title { display: none; } #chatbox_option_autorefresh { display: none; } #chatbox_footer label { color: transparent; font-size: 0; visibility: hidden; } #message { font-size: 12px; visibility: visible; width: 281px; border: 0; outline: 0; height: 28px; position: relative; top: 0px; padding: 0 5px; left: 0; background: rgba(0, 0, 0, 0)!important;} .right-box.style-buttons { display: block; background: #fff; } #chat-app-fb { position: fixed; top: 0; bottom: 0; height: 100%; right: 0; width: 500px; } body.chatbox { background: none; border: none; } .chatbox-options { margin: 0; float: left; padding-left: 10px; } #divsmilies { background: white; border: 1px solid white; left: 10px; position: relative; top: -45px; width: 42px; height: 26px; } #chatbox_members .member-title ,.date-and-time, #divcolor, #divstrike, #divunderline, #divitalic, #divbold { display: none; } #chatbox_members ul li { padding: 6px 0 6px 10px; margin: 2px 0; } #chatbox_members ul li:hover {background: #E6E9EE;} #chatbox_members ul { margin: 0; padding: 0; } body[bgcolor^="#fbfbfb"] { background: transparent; } #chatbox_contextmenu { z-index: 999; margin-top: 10px; margin-left: -39px; } .fb-search form input { background-image: url("http://i.imgur.com/9tSaXF7.png"); border: 0; width: 133px; height: 25px; padding: 0 0 0 20px; background-repeat: no-repeat; outline: none; box-shadow: none; color: #BDBDBD; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 11px; z-index: 999999!important; position: relative;} .seo-me { width: 207px; } .profile-se { float: right; margin-right: 27px; } .button-app img[src^="http://i.imgur.com/degNOB8.png"] { float: right; position: absolute; right: 0; } .button-app img[src^="http://i.imgur.com/FMZxNQv.png"] { margin-right: 30px; } .button-app img[src^="http://i.imgur.com/FMZxNQv.png"] + div.seo-me { display: none; } .fb-search form input:focus { color: #4B4B4B; border:0!important;} .button-app { z-index: 999999!important; } #chat-app-fb { z-index: 99999!important; } .count-user { position: fixed; z-index: 999; right: 155px; bottom: 6px; font: bold 11px verdana ,arial; color: #000;} .button-app img[src^="http://i.imgur.com/degNOB8.png"] + div.seo-me + div.count-user { display: none; } .button-app img[src^="http://i.imgur.com/FMZxNQv.png"] + div.seo-me + div.count-user { display: inline; } .fb-search form input:hover { border: none!important; } /*Facebook-chat*/ Widgets - Code:
-
<div class="button-app" style="cursor:pointer;"><img src="http://i.imgur.com/FMZxNQv.png" onclick="document.getElementById('chat-app-fb').style.display=(this.src=='http://i.imgur.com/FMZxNQv.png')?'block':'none';this.src=(this.src=='http://i.imgur.com/FMZxNQv.png')?'http://i.imgur.com/degNOB8.png':'http://i.imgur.com/FMZxNQv.png';"/><div class="seo-me"><div class="profile-se"><a href="/profile?mode=editprofile"><img src="http://i.imgur.com/xHLwgoA.png" title="Opciones"></a></div><div class="fb-search"><form action="/search" method="get"><input type="text" class="inputbox medium" name="search_keywords" value="Buscar" onclick="if (this.value == 'Buscar') this.value = '';" onblur="if (this.value == '') this.value = 'Buscar';"></form></div></div><div class="count-user">(<span id="chat-user-on">0</span>)</div></div><div id="chat-app-fb" style="display:none;">
<iframe src="/chatbox/index.forum?page=front&" scrolling="no" marginwidth="0" style="height: 100%;margin-left: -19px;width: 520px;" marginheight="0" frameborder="0"></iframe></div> <script>jQuery(document).ready( function() {jQuery("#chat-user-on").load("/ #main-content div.page-bottom strong:eq(0)");});</script>
Thế là xong | |
| | | | [Share] Chatbox style Facebook [Punbb,Phpbb3,Invision] | |
|
Trang 1 trong tổng số 1 trang | |
Similar topics | |
|
| Permissions in this forum: | Bạn không có quyền trả lời bài viết
| |
| |
| |
|