Editeur de messages - light
PHPBB2 - Templates et CSS - police utilisée: Amatic SC - CSS légendé pour la personnalisation - Aperçu - Personnaliser aussi la revue des sujets !
Okay, donc là on personnalise l'éditeur de FA !Cette version est très simplifiée, et certaines options n'y sont plus (par exemple les titres de messages - les titres de sujets sont encore disponibles, et heureusement...). L'éditeur de messages privés est aussi affecté par ce LS
Vous devez être administrateur pour accéder aux templates.
Template Posting_body
Bon c'est un template qu'on ne touche pas trop d'habitude !On le trouve ici:
Affichage > Templates > Poster et messages privés > posting_body
Voilà, en théorie vous nedevriez pas avoir touché à ce bout de HTMl, alors vous pouvez remplacer tout le template par elui-ci, plus court et un peu restructuré (notamment quelques tables converties en divs...)
- Code:
<script src="{JS_DIR}extendedview.js" type="text/javascript"></script>
<!-- BEGIN privmsg_extensions -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellspacing="2" cellpadding="0" height="40">
<tr valign="middle">
<td>{INBOX_IMG}</td>
<td><span class="cattitle">{INBOX_LINK}</span></td>
<td>{SENTBOX_IMG}</td>
<td><span class="cattitle">{SENTBOX_LINK}</span></td>
<td>{OUTBOX_IMG}</td>
<td><span class="cattitle">{OUTBOX_LINK}</span></td>
<td>{SAVEBOX_IMG}</td>
<td><span class="cattitle">{SAVEBOX_LINK}</span></td>
</tr>
</table>
</td>
</tr>
</table>
<br clear="all" />
<!-- END privmsg_extensions -->
{POST_PREVIEW_BOX}{ERROR_BOX}
<form action="{S_POST_ACTION}" method="post" name="post" enctype="multipart/form-data">
<table class="forumline ombre" width="100%" border="0" cellspacing="0" cellpadding="0" style="border:none;">
<!-- BEGIN switch_username_select -->
<tr>
<td class="row1" colspan="2" align="center" style="padding:3px;"><span class="gen">{L_USERNAME}</span>
<span class="genmed"><input class="post" type="text" name="username" maxlength="25" value="{USERNAME}" size="25" tabindex="1" /></span>
</td>
</tr>
<!-- END switch_username_select -->
<!-- BEGIN switch_privmsg -->
<tr>
<td class="row1" width="22%" style="padding:3px;"><span class="gen"><b> Destinataire</b></span></td>
<td class="row2" width="78%" style="padding:3px;">
<span class="genmed">
<!-- BEGIN switch_username -->
<input style="margin:1px 0;" type="text" name="username[]" value="{switch_privmsg.switch_username.USERNAME}" size="25" /><br />
<!-- END switch_username -->
<input style="margin:1px 0;" type="text" id="username" name="username[]" value="{USERNAME}" size="25" tabindex="1" />
<img id="add_username" src="{ADD_USERNAME_IMG}" class="selectHover" alt="" />
<input class="liteoption" type="button" id="find_user" value="{L_FIND_USERNAME}" /><br /><br />
</span>
</td>
</tr>
<!-- BEGIN switch_privmsg_friend -->
<tr>
<td class="row1" width="22%" style="padding:3px;"><span class="gen"><b> Ou un ami</b></span></td>
<td class="row2" width="78%" style="padding:3px;">{switch_privmsg.switch_privmsg_friend.FRIEND_PM}</td><br />
</tr>
<!-- END switch_privmsg_friend -->
<!-- BEGIN switch_privmsg_group -->
<tr>
<td class="row1" width="22%" style="padding:3px;"><span class="gen"><b> Ou un groupe</b></span></td>
<td class="row2" width="78%">{switch_privmsg.switch_privmsg_group.MASS_PM}<input type="button" value=" ? " title="{switch_privmsg.switch_privmsg_group.MASS_PM_EXPLAIN}" class="button2" /></td>
</tr>
<!-- END switch_privmsg_group -->
<!-- END switch_privmsg -->
<!-- BEGIN switch_groupmsg -->
<tr>
<td class="row1" colspan="2" style="padding:3px;"><span class="gen"><b> {L_USERNAME}</b></span><span class="genmed">{USERNAME}</span><br /></td>
</tr>
<!-- END switch_groupmsg -->
<!-- BEGIN switch_subject -->
<tr>
<td class="postitre" width="100%" align="center" colspan="2">
<span class="gen">
TITRE <input class="post" style="width:450px" type="text" name="subject" value="{SUBJECT}" size="45" maxlength="{TOPIC_TITLE_MAXLENGTH}" tabindex="2" title="{TOPIC_TITLE_LENGTH_EXPLAIN}" onkeypress="if (event.keyCode==13){return false}" />
<!-- BEGIN switch_subject_color -->
<script type="text/javascript">
//<![CDATA[
input = document.getElementsByName('subject');
//]]>
</script>
<select name="topic_color" onchange="input[0].style.color = topic_color.value" style="margin-left:10px">
{switch_subject.switch_subject_color.TOPIC_TITLE_COLOR_OPTIONS}
</select>
<script type="text/javascript">
//<![CDATA[
input[0].style.color = '{switch_subject.switch_subject_color.TOPIC_TITLE_COLOR_DEFAULT}';
//]]>
</script>
<!-- END switch_subject_color -->
</span>
</td>
</tr>
<!-- END switch_subject -->
<!-- BEGIN switch_icon_checkbox -->
<tr>
<td class="row1" valign="top"><span class="gen"><b>{L_ICON_TITLE}</b></span></td>
<td class="row2">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<!-- BEGIN row -->
<tr>
<td nowrap="nowrap"><span class="gen"><!-- BEGIN cell --><label><input type="radio" name="post_icon" value="{switch_icon_checkbox.row.cell.ICON_ID}" {switch_icon_checkbox.row.cell.ICON_CHECKED} id="post_icon_{switch_icon_checkbox.row.cell.ICON_ID}" /> <span onclick="document.forms['post'].post_icon_{switch_icon_checkbox.row.cell.ICON_ID}.checked=true">{switch_icon_checkbox.row.cell.ICON_IMG}</span></label><!-- END cell --></span></td>
</tr>
<!-- END row -->
</table>
</td>
</tr>
<!-- END switch_icon_checkbox -->
<tr id="parent_editor_simple" {EDITOR_DISPLAY_SIMPLE}>
<td valign="top" colspan="2">
<div id="smileyContainer" style="width:200px;float:left;height:365px;">
{L_SMILIES_PREVIEW_NEW}
</div>
<div style="margin-left:200px;">
<textarea id="text_editor_textarea" class="post" name="message" tabindex="3" wrap="virtual">{MESSAGE}</textarea>
</div>
<div clear="all"></div>
</td>
</tr>
{CODE_CONFIRM}
</table>
<div class="forumline ombre">
<div style="width:40%;float:left;">
<div id="optionsitems" style="display:{OPTIONSITEMS_CLOSE};">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="optionmsg">
<div align="center" width="100%" style="position:relative;"><span class="gen">Options</span>
<div width="10" style="position:absolute;left:10px; top:7px;"><a href="javascript:ShowHideLayernew('optionsitems')"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></div>
</div>
</td>
</tr>
</table>
</div>
<div id="optionsitems_show" style="display:{OPTIONSITEMS_OPEN};">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="optionmsg" colspan="2">
<div align="center" width="100%" style="position:relative;"><span class="gen">Options</span>
<div width="10" style="position:absolute;left:10px;top:7px;"><a href="javascript:ShowHideLayernew('optionsitems')"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></div>
</div>
</td>
</tr>
<!-- BEGIN switch_topic_modif -->
<!-- BEGIN switch_icon_checkbox -->
<tr>
<td class="row1"><label class="gen">{POST_ICON_TITLE}</label></td>
<td class="row2">
<!-- BEGIN row -->
<!-- BEGIN cell -->
<label class="gen"><input type="radio" name="post_icon" value="{switch_topic_modif.switch_icon_checkbox.row.cell.ICON_ID}" id="post_icon_{switch_topic_modif.switch_icon_checkbox.row.cell.ICON_ID}" {switch_topic_modif.switch_icon_checkbox.row.cell.ICON_CHECKED} />?<span onclick="document.forms['post'].post_icon_{switch_topic_modif.switch_icon_checkbox.row.cell.ICON_ID}.checked=true">{switch_topic_modif.switch_icon_checkbox.row.cell.ICON_IMG}</span></label>
<!-- END cell -->
<!-- END row -->
</td>
</tr>
<!-- END switch_icon_checkbox -->
<tr>
<td class="row1"><label for="modif_topic_title" class="gen">{L_TOPIC_TITLE_MODIFY}</label></td>
<td class="row2">
<input class="post" style="width:250px" type="text" name="modif_topic_title" id="modif_topic_title" value="{MODIF_TOPIC_TITLE}" class="gen" maxlength="{TOPIC_TITLE_MAXLENGTH}" onkeypress="if (event.keyCode==13){return false}" />
<!-- BEGIN switch_topic_button -->
<input type="button" value="{L_SOLVED_WITHOUT_BRAKETS}" class="button" onclick="set_solved(this.form.elements['modif_topic_title'],'{L_SOLVED}')" style="display:none" id="button_solved" />
<script type="text/javascript">
//<![CDATA[
document.getElementById('button_solved').style.display = 'inline';
//]]>
</script>
<!-- END switch_topic_button -->
</td>
</tr>
<!-- END switch_topic_modif -->
<tr>
<td class="row2" width="100%" colspan="2"><span class="gen"> </span>
<table border="0" cellspacing="0" cellpadding="0">
<!-- BEGIN switch_signature_checkbox -->
<tr>
<td><input type="checkbox" name="attach_sig"{S_SIGNATURE_CHECKED} /></td>
<td><span class="gen">{L_ATTACH_SIGNATURE}</span></td>
</tr>
<!-- END switch_signature_checkbox --><!-- BEGIN switch_notify_checkbox -->
<tr>
<td><input type="checkbox" name="notify"{S_NOTIFY_CHECKED} /></td>
<td><span class="gen">{L_NOTIFY_ON_REPLY}</span></td>
</tr>
<!-- END switch_notify_checkbox --><!-- BEGIN switch_delete_checkbox -->
<tr>
<td><input type="checkbox" name="delete" /></td>
<td><span class="gen">{L_DELETE_POST}</span></td>
</tr>
<!-- END switch_delete_checkbox -->
<!-- BEGIN switch_type_toggle -->
<tr>
<td></td>
<td><span class="gen">{S_TYPE_TOGGLE}</span></td>
</tr>
<!-- END switch_type_toggle -->
</table>
</td>
</tr>
</table>
</div>
</div>
<div class="optionmsg" align="right" width="60%">
<input type="hidden" name="lt" value="{LAST_TOPIC_ID}" />
{S_HIDDEN_FORM_FIELDS}
<!-- BEGIN switch_preview -->
<input class="liteoption" type="submit" name="preview" value="{L_PREVIEW}" tabindex="5" />
<!-- END switch_preview -->
<!-- BEGIN switch_draft -->
<input class="liteoption" type="submit" name="draft" value="{L_DRAFT}" tabindex="7" accesskey="d" />
<!-- END switch_draft -->
<!-- BEGIN switch_publish -->
<input class="liteoption" type="submit" name="publish" value="{L_PUBLISH}" tabindex="8" accesskey="p" />
<!-- END switch_publish -->
<input class="mainoption" type="submit" name="post" value="{L_SUBMIT}" tabindex="6" accesskey="s" />
</div>
</div>
<br /><br />
{POLLBOX}
<!-- BEGIN switch_display_menus -->
<script type="text/javascript">
//<![CDATA[
ShowHideLayernew('optionsitems');
ShowHideLayernew('pollitems');
//]]>
</script>
<!-- END switch_display_menus -->
</form>
{TOPIC_REVIEW_BOX}
<!-- BEGIN switch_privmsg -->
<div id="find_username" class="jqmWindow"></div>
<script src="{JS_DIR}jquery/jqmodal/jqmodal.js" type="text/javascript"></script>
<!-- END switch_privmsg -->
<script type="text/javascript">
//<![CDATA[
$(function(){
<!-- BEGIN switch_privmsg -->
privmsg_add_username('{U_SEARCH_USER}', '<br /><span class="genmed"><input style="margin:1px 0" type="text" name="username[]" size="25" /></span>');
<!-- END switch_privmsg -->
<!-- BEGIN switch_image_resize -->
resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} });
<!-- END switch_image_resize -->
});
//]]>
</script>
{SCEDITOR}
Validez, publiez, puis CSS !
CSS
Affichage > Couleurs > Feuille de style CSS
Rajoutez simplement ceci à votre code ( j'ai légendé pour que changer les couleurs soit facile ^^ En revanche changer autre chose peut être beaucoup plus compliqué !)
- Code:
/*EDITEUR PERSONNALISE PAR ALU POUR NEVER UTOPIA*/
.ombre{ box-shadow:2px 2px 5px lightgrey; background-color:white;}
.optionmsg{ background-color:#C4FF6B;/*couleur de fond de la barre options*/}
#optionsitems_show, #optionsitems{
position:absolute;
width:30%;
z-index:1;
background-color:#FFFFFF;/*couleur de fond des options*/
}
#optionsitems_show .row2, #optionsitems_show .row1{ padding:10px;}
#optionsitems .optionmsg, #optionsitems_show .optionmsg{ height:38px;}
.optionmsg{height:36px;padding-top:4px;}
.optionmsg .gen, .postitre .gen{color:white;/*couleur du texte dans la barre options et la zone titre*/}
#sce_smilies_body, div.sceditor-group{background-color:#F5F5F5!important;/*couleur de fond du cadre smileys et des boutons d edition*/}
#sceditor_smilies #smilies_header {display:none/*désactiver le haut du cadre smileys*/}
#sceditor_smilies{width:200px;}
#sceditor_smilies body {margin:0;}
#smileyContainer iframe{height:365px;}
.sceditor-container iframe, .sceditor-container textarea{
height:300px !important;
margin:0 !important;
padding:10px !important;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.sceditor-grip{display:none;}
.sceditor-container{height:365px !important;width:auto !important;}
.sceditor-container, .sceditor-toolbar {border-radius:0 !important;border:none !important;}/*enlever les angles arrondis*/
.forumline .row1, .forumline .row2, .forumline .row3, .forumline .row3Right {padding:0}
.postitre .post{margin: 30px auto;position: relative;}
.postitre{background-color:#68BF56;/*Couleur de fond de la partie titre*/}
/*BOUTONS*/
.optionmsg .liteoption, .optionmsg .mainoption{
background-color: #68BF56;/*couleur de fond*/
box-shadow: 0px 3px 0px 0px #3D992B;/*ombre du bouton*/
padding: 3px;
border: medium none;
border-radius: 2px;/*arrondi des angles*/
text-align: center;
color: #FFF;/*couleur du texte*/
font: 600 18px "Amatic SC" !important;/*police: gras, taille, police*/
letter-spacing: 2px;/*espacement des lettres*/
text-shadow: 0px 1px 0px #008000;/*ombre du texte: décalage X, Y, rayon du flou, couleur*/
transition: #EBE2D2 0.2s ease-in-out 0s;
}
.optionmsg .liteoption:hover, .optionmsg .mainoption:hover {background-color: #54B341;/*couleur de fond au survol*/}
.optionmsg .liteoption:active, .optionmsg .mainoption:active {box-shadow: 0px 1px 0px 0px #3D992B;/*ombre au clic*/padding-top:6px; padding-bottom:4px;}
Et voilà, un éditeur tout neuf ! N'hésitez pas à demander de l'aide ici sur N-U si vous avez du mal à le personnaliser (= Je vous demanderai aussi de mettre un crédit à Never-Utopia sur votre forum.
Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Si vous avez des problèmes avec ce LS, venez poster ici.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^
