Insérer une mini-barre bbcode sur la mini-shoutbox

Introduction



Voici comment mettre la mini-barre BBcode dans la mini-shoutbox.


L'insertion de la mini barre



Pour cela il vous faudra éditer le fichier "shoutbox_mini.tpl", dans le dossier "shoutboxtemplates" ou dans votre thème "templatesvotre-thememodulesshoutbox".

Ouvrez le "shoutbox_mini.tpl", et rendez vous à la ligne 132; vous avez ceci:
Code TPL :
 
<label for="shout_contents"><span class="text_small">{L_MESSAGE}</span></label>
 


Vous allez copier le code ci-dessous, en dessous de la ligne 132 dans votre fichier tpl.

Code HTML :
<script src="/kernel/framework/js/bbcode.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function bbcode_color_shoot_contents()
{
var i;
var br;
var contents;
var color = new Array(
'black', 'maroon', '#333300', '#003300', '#003366', '#000080', '#333399', '#333333',
'#800000', 'orange', '#808000', 'green', '#008080', 'blue', '#666699', '#808080',
'red', '#FF9900', '#99CC00', '#339966', '#33CCCC', '#3366FF', '#800080', '#ACA899',
'pink', '#FFCC00', 'yellow', '#00FF00', '#00FFFF', '#00CCFF', '#993366', '#C0C0C0',
'#FF99CC', '#FFCC99', '#FFFF99', '#CCFFCC', '#CCFFFF', '#CC99FF', '#CC99FF', 'white');
contents = '<table style="border-collapse:collapse;margin:auto;"><tr>';
for(i = 0; i < 40; i++)
{
br = (i+1) % 8;
br = (br == 0 && i != 0 && i < 39) ? '</tr><tr>' : '';
contents += '<td style="padding:2px;"><a onclick="insertbbcode('[color=' + color[i] + ']', '[/color]', 'contents');" class="bbcode_hover"><span style="background:' + color[i] + ';padding:0px 4px;border:1px solid #ACA899;">&nbsp;</span></a></td>' + br;
}
document.getElementById("bbcolorcontents").innerHTML = contents + '</tr></table>';
}
function bbcode_url_shoot_contents()
{
var url = prompt("Adresse du lien ?");
if( url != null && url != '' )
insertbbcode('[url=' + url + ']', '[/url]', 'shout_contents');
else
insertbbcode('[url]', '[/url]', 'shout_contents');
}
-->
</script>
<br />
<table class="bbcode" style="width:210px;">
<tr>
<td style="padding:1px;">
 
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/form/bold.png" class="bbcode_hover"  onclick="insertbbcode('[b]', '[/b]', 'shout_contents');" alt="Texte en gras : [b]texte[/b]" title="Texte en gras : [b]texte[/b]" />
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/form/italic.png" class="bbcode_hover"  onclick="insertbbcode('[i]', '[/i]', 'shout_contents');" alt="Texte en italique : [i]texte[/i]" title="Texte en italique : [i]texte[/i]" />
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/form/underline.png" class="bbcode_hover"  onclick="insertbbcode('[u]', '[/u]', 'shout_contents');" alt="Texte souligné : [u]texte[/u]" title="Texte souligné : [u]texte[/u]" />
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/form/strike.png" class="bbcode_hover"  onclick="insertbbcode('[s]', '[/s]', 'shout_contents');" alt="Texte barré : [s]texte[/s]" title="Texte barré : [s]texte[/s]" />
<img title="Ajouter un lien : [url]lien[/url], ou [url=lien]nom du lien[/url]" alt="Ajouter un lien : [url]lien[/url], ou [url=lien]nom du lien[/url]" onclick="bbcode_url_shoot_contents();" class="bbcode_hover" src="{PATH_TO_ROOT}/templates/{THEME}/images/form/url.png">
<img title="Ajouter une image : [img]url image[/img]" alt="Ajouter une image : [img]url image[/img]" onclick="insertbbcode('[img]', '[/img]', 'shout_contents');" class="bbcode_hover" src="{PATH_TO_ROOT}/templates/{THEME}/images/form/image.png">
<a title="Couleur du texte : [color=X]texte de couleur X[/color]" class="bbcode_hover" onmouseout="bb_hide_block('5', 'contents', 0);" href="javascript:bbcode_color_shoot_contents();bb_display_block('5', 'contents');"><img alt="Couleur du texte : [color=X]texte de couleur X[/color]" src="{PATH_TO_ROOT}/templates/{THEME}/images/form/color.png"></a>
</td>
</tr>
</table>


Enregistrez votre fichier.

Le résultat



Voici la mini barre BBcode active sur le site de Mixomatik.com:



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