| (Q) Chat Box en Spoiler Latérale . | |
|
Invité Invité
| Bonjour , je cherche comment mettre ma Chat Box en spoiler sur le côté de mon forum . Voilà un lien avec un exemple d'image , merci de bien vouloir m'aider ! :DD
http://www.providence-people.com/ | | |
|
| |
Thalie
{ Membre actif }
Messages : 317
| Il faut que tu modifie tes templates, en l'occurence le template overall_header_new. Tu rajoute dans le head cette partie de code, en n'oubliant pas de rajouter les liens des images. - Code:
-
<table id="lnrbox"><tr><td> <iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"> <img src="LIEN IMAGE OUVRIR" onClick="document.getElementById('chatboxpop') .style.display=(this.src=='LIEN IMAGE OUVRIR')?'block':'none'; this.src=(this.src=='LIEN IMAGE OUVRIR')?'LIEN IMAGE FERMER' :'LIEN IMAGE OUVRIR';"/></td></tr></table> Et ensuite si tu veux tu peux changer un peu ton css - Code:
-
#lnrbox { position: fixed; bottom: 50px; left: 0px; background-color: #couleur; background-position: center; border: 1px solid #couleur; border-bottom: 4px solid #couleur; z-index: 999; } | | |
|
| |
Invité Invité
| Merci ! :DD Mais où ont met ce code ? J'ai jamais su .. =S | | |
|
| |
Thalie
{ Membre actif }
Messages : 317
| dans le head du template overall_header_new. | | |
|
| |
Imari
{ Membre hyper-actif }
Messages : 1538
| Bonjour ^^
Le problème est-il résolu ? ^^ | | |
|
| |
Voodoo Child
{ Membre }
Messages : 97
| C'est quoi le head du template ? Et cela ne marche pas ^^ il faut activer la chat box je suppose mais après ? | | |
|
| |
Gangea'
{ Membre }
Messages : 43
| Up, sa m'intéresse aussi :$ | | |
|
| |
Thalie
{ Membre actif }
Messages : 317
| Tu le met juste après ça - Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" xmlns="http://www.w3.org/1999/xhtml"> <head> | | |
|
| |
Twilli
{ Membre }
Messages : 10
| Bonjour ! Merci pour le code ! Mais j'ai un problème, j'ai tout réussie à faire mais quand on clique sur l'image, la chatbox ne s'affiche pas alors que je l'ai activé dans "Module" > "Chatbox" > "Configuration".
Quelqu'un peut m'aider s'il vous plait ?
Le template ;
- Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- BEGIN meta_emulate_ie7 --> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <!-- END meta_emulate_ie7 --> <title>{SITENAME_TITLE}{PAGE_TITLE}</title> <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> {META_FAVICO} {META} <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" /> {T_HEAD_STYLESHEET} {CSS} <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" /> <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" /> <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script> <!-- BEGIN switch_ticker --> <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script> <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" /> <!-- END switch_ticker --> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ <!-- BEGIN switch_enable_pm_popup --> pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400'); pm.focus(); <!-- END switch_enable_pm_popup --> <!-- BEGIN switch_report_popup --> report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}'); report.focus(); <!-- END switch_report_popup --> <!-- BEGIN switch_ticker --> ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME}); <!-- END switch_ticker --> });
<!-- BEGIN switch_login_popup --> var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = false, logInBackgroundClass = false; <!-- END switch_login_popup --> //]]> </script> {GREETING_POPUP} <!-- BEGIN hitskin_preview --> <style type="text/css"> #hitskin_preview { margin: 0; padding: 0; position: fixed; top: 0; left: 0; width: 100%; height: 65px; background: url('http://2img.net/i/fa/hitskin/hitskin_bar.png') repeat-x left -15px; color: #fff; } * html #hitskin_preview { /* Fix for IE6 since it doesn't implement fixed positionning */ position: absolute; top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop); z-index: 2; background: transparent url('http://2img.net/i/fa/hitskin/hitskin_bar-ie6.gif') repeat-x left -15px; } * html { /* Gunlaug's Speed fix for the above positionning fix. Sorry for the fix for the fix */ background: #fff url(foo) fixed; } #hitskin_preview h1 { float: left; margin: 3px 0 0 0; padding: 0 0 0 10px; font: italic normal 25px Arial,sans serif; color: #fff; } #hitskin_preview h1 img { vertical-align: middle; } #hitskin_preview em { color: #7CBA2C; font-weight: bold; } #hitskin_preview a { color: #fff; } #hitskin_preview a:hover { text-decoration: underline; }
#hitskin_preview .content { text-align: right; } #hitskin_preview .content p { margin: 4px 1em 0px 1em; font-size: 13px; line-height: 1.8em; color: #fff; font-weight: bold; } #hitskin_preview .content p span { font-weight: normal; font-size: 0.8em; } body { margin-top: 40px !important; } {hitskin_preview.HITSKIN_RTL_CSS} </style> <!-- END hitskin_preview --> </head> <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}"> <!-- BEGIN hitskin_preview --> <div id="hitskin_preview" style="display: block;"> <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1> <div class="content"> <p> {hitskin_preview.L_THEME_SITE_PREVIEW} <br /> <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span> </p> </div> </div> <!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup --> <div id="login_popup"> <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0"> <tr height="25"> <td class="catLeft"> <span class="genmed module-title">{SITENAME}</span> </td> </tr> <tr height="{LOGIN_POPUP_MSG_HEIGHT}"> <td class="row1" align="left" valign="top"> <div id="login_popup_buttons"> <form action="{S_LOGIN_ACTION}" method="get"> <input type="submit" class="mainoption" value="{L_LOGIN}" /> <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" /> <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" /> </form> </div> <span class="genmed">{LOGIN_POPUP_MSG}</span> </td> </tr> </table> </div> <!-- END switch_login_popup -->
<table id="lnrbox"><tr><td> <iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"> <img src="http://i46.tinypic.com/301lmc0.png" onClick="document.getElementById('chatboxpop') .style.display=(this.src=='http://i46.tinypic.com/301lmc0.pngg')?'block':'none'; this.src=(this.src=='http://i46.tinypic.com/301lmc0.png')?'http://i50.tinypic.com/20ifn2g.png' :'http://i46.tinypic.com/301lmc0.png';"/></td></tr></table>
<a name="top"></a> {JAVAscript} <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center"> <tr> <td class="bodyline"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <!-- BEGIN switch_logo_left --> <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td> <td align="center" width="100%" valign="middle"> <div class="maintitle">{MAIN_SITENAME}</div> <br /> <span class="gen">{SITE_DEscriptION}<br /> </span> </td> <!-- END switch_logo_left -->
<!-- BEGIN switch_logo_center --> <td align="center" width="100%" valign="middle"> <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a><br /> <div class="maintitle">{MAIN_SITENAME}</div> <br /> <span class="gen">{SITE_DEscriptION}</span> </td> <!-- END switch_logo_center -->
<!-- BEGIN switch_logo_right --> <td align="center" width="100%" valign="middle"> <div class="maintitle">{MAIN_SITENAME}</div> <br /> <span class="gen">{SITE_DEscriptION}<br /> </span> </td> <td> <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a> </td> <!-- END switch_logo_right --> </tr> </table>
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}"> <tr> <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td> </tr> </table>
<div style="clear: both;"></div>
<!-- BEGIN switch_ticker --> <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline"> <tr> <td {CLASS_TABLE_TYPE} align="left" class="row1"> <div id="fa_ticker_container"> <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;"> <div class="fa_ticker_content"> <!-- BEGIN ticker_row --> <div>{switch_ticker.ticker_row.ELEMENT}</div> <!-- END ticker_row --> </div> </div> </div> </td> </tr> </table> </div> <!-- END switch_ticker -->
<div id="page-body"> <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}> <table cellpadding="0" cellspacing="0" width="100%" class="three-col"> <tbody> <tr> <td valign="top" width="{C1SIZE}"> <div id="{ID_LEFT}"> <!-- BEGIN giefmod_index1 --> {giefmod_index1.MODVAR} <!-- BEGIN saut --> <div style="height:{SPACE_ROW}px"></div> <!-- END saut --> <!-- END giefmod_index1 --> </div> </td> <td valign="top" width="100%"> <!-- BEGIN html_validation --> </td> </tr> </tbody> </table> </div> </div> </td> </tr> </table> </body> </html> <!-- END html_validation --> | | |
|
| |
Thalie
{ Membre actif }
Messages : 317
| tu n'a pas mit ton code au bon endroit. J'ai m'y dans le poste juste au dessus du tien où il devait être . | | |
|
| |
Twilli
{ Membre }
Messages : 10
| Ah oui désolée : / Je l'ai mis là où tu as dit mais ça ne marche toujours pas : / | | |
|
| |
Thalie
{ Membre actif }
Messages : 317
| essaye avec ce code - Code:
-
<table id="lnrbox"><tr><td> <iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"> <img src="http://i46.tinypic.com/301lmc0.png" onClick="document.getElementById('chatboxpop') .style.display=(this.src=='http://i46.tinypic.com/301lmc0.png')?'block':'none'; this.src=(this.src=='http://i46.tinypic.com/301lmc0.png')?'http://i50.tinypic.com/20ifn2g.png' :'http://i46.tinypic.com/301lmc0.png';"/></td></tr></table> | | |
|
| |
Twilli
{ Membre }
Messages : 10
| Ça marche ! Merci beaucoup ! | | |
|
| |
Thalie
{ Membre actif }
Messages : 317
| Je t'explique ton erreur, c'est dans ton adresse d'image qu'il y avait un problème - Code:
-
.style.display=(this.src=='http://i46.tinypic.com/301lmc0.pngg')?'block pngg n'existe pas | | |
|
| |
Imari
{ Membre hyper-actif }
Messages : 1538
| Bonjour ^^
Je vois que le problème est résolu, je classe donc ^^ | | |
|
| |
Contenu sponsorisé
| |
| |
| (Q) Chat Box en Spoiler Latérale . | |
|