Insérer la shoutbox seulement sur la page index

Insérer la shoutbox seulement sur la page index




Attention... pour ce tutoriel, il faut dans votre administration/Contenu/Menus/Gestion le shoutbox/shoutbox_mini soit désactivé ..
Cette modification n'est applicable que si vous avez un index personnalisé!


Le dossier shoutbox



Pour avoir la shoutbox seulement sur la page index et pour les membres connectés, Voici comment procéder:

Pour commencer, copier le dossier shoutbox/templates qui est à la racine du site, dans le dossier "templatesVotre-Thèmemodules". Dans ce dossier que vous renommerez "shoutbox" il ne faut laisser que shoutbox_mini.css et shoutbox_mini.tpl. Le reste est à supprimer, ce qui nous reste:


shoutbox
shoutbox_mini.css
shoutbox_mini.tpl


L'index.php



Maintenant retour à la racine du site, éditez votre index.php. Et placer ce code là ou vous le souhaitez, mais de préférence à la suite d'un :

Code PHP :
 
 <?php require_once PATH_TO_ROOT . '/shoutbox/shoutbox_mini.php'; echo shoutbox_mini(0, BLOCK_POSITION__NOT_ENABLED);?>
 


La personnalisation



Le shoutbox_mini.tpl



Ouvrez le fichier shoutbox_mini.tpl qui se trouve dans "templatesVotre-Thèmemodules"

A la ligne 1 ajouter ceci:

Code TPL :
# IF C_USER_CONNECTED #


A la ligne 113 après la balise </script> supprimer tout et copiez ceci :

Code TPL :
 
<form action="?token={TOKEN}" method="post" onsubmit="return check_form_shout();">
<div class="module_container_shout">
<div class="module_top_shout" style="width:100%;">
<h5 class="sub_title">{L_SHOUTBOX}</h5>
</div>
<div class="module_contents_shout">
<div id="shout_container">
# START shout #
<p id="shout_container_{shout.IDMSG}">{shout.PSEUDO}<span class="text_small">: {shout.CONTENTS}</span></p>
# END shout #
</div>
# IF C_VISIBLE_SHOUT #
<label for="shout_pseudo"><span class="text_small">{L_PSEUDO}</span></label>
<input size="16" maxlength="25" type="text" class="text" name="shout_pseudo" id="shout_pseudo" value="{SHOUTBOX_PSEUDO}" />
# ENDIF #
# IF C_HIDDEN_SHOUT #
<input size="16" maxlength="25" type="hidden" class="text" name="shout_pseudo" id="shout_pseudo" value="{SHOUTBOX_PSEUDO}" />
# ENDIF #
<br />
<center><label for="shout_contents"><span class="text_small">{L_MESSAGE}</span></label>
<textarea class="post" id="shout_contents" name="shout_contents" rows="4" cols="16">< /textarea>
<br />
<input type="submit" name="shoutbox" id="shoutbox_submit" value="{L_SUBMIT}" class="submit" />
<script type="text/javascript">
<!--
document.getElementById('shoutbox_submit').style.display = 'none';
document.write('<input value="{L_SUBMIT}" onclick="XMLHttpRequest_shoutmsg();" type="button" class="submit" />');
-->
</script>
<a href="javascript:XMLHttpRequest_shoutrefresh();" title="{L_REFRESH}"><img src="{PATH_TO_ROOT}/templates/{THEME}/images/refresh_mini.png" id="shoutimg" alt="{L_REFRESH}" class="valign_middle" /></a>
<p style="margin:0;margin-top:10px;">
<a class="small_link" href="{PATH_TO_ROOT}/shoutbox/shoutbox.php{SID}" title="">{L_ARCHIVES}</a>
</p></center>
</div>
<div class="module_bottom_shout">
</div>
</div>
</form>
# ENDIF #
 


Enregistrez et fermez

Le shoutbox_mini.css



Ouvrez le fichier shoutbox_mini.css qui se trouve dans "templatesVotre-Thèmemodulesshoutbox" Supprimer tout et collez y ceci:

Code CSS :
 
.module_container_shout { 
border-bottom:medium none; width:96%; 
} 
div#shout_container { 
-moz-border-radius-bottomleft:5px; /* angles arrondis */ 
-moz-border-radius-bottomright:5px; /* angles arrondis */ 
-moz-border-radius-topleft:5px; /* angles arrondis */ 
-moz-border-radius-topright:5px; /* angles arrondis */ 
border:1px solid #CCCCCC; /* contour de couleur noir */ 
height:150px; /* Hauteur du textarea */ margin:3px; /* 
Décalage haut-droite du textarea */ overflow:auto; /* 
On ne touche pas */ padding:5px; /* Décalage haut-droite du texte dans textarea */ 
text-align:left; /* centrage du texte sur la gauche */ 
width:97%; /* largeur de la shoutbox */ 
} 
.module_top_shout { 
border-bottom:2px solid #515C68; /* Bordure */ 
color:#515C68; /* Couleur du texte */ 
font-size:14px; /* Taille du texte */ 
font-weight:bold; /* Style du texte en gras */ 
height:18px; /* Hauteur du container du texte */ 
text-indent:10px;/* Marge/ décalage du texte sur la droite */ 
} 
.module_contents_shout { 
border:1px solid #CCCCCC; /* Bordure */ 
clear:both; /* On ne touche pas */ 
padding:20px 15px 15px; /* On ne touche pas */ 
text-align:justify; /* pour justifier le texte */ 
}


Enregistrez et fermez.
Vous pouvez maintenant avec le css modifier le fichier shoutbox_mini.css, pour personnaliser votre shoutbox sur l'index.

Si vous avez des questions, n'hésitez pas à les poser sur le forum :)
Cette page a été consultée 2713 fois