Editeur de messages - light

Rappel du premier message :

Editeur de messages - light

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" />&nbsp;
          </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à, à priori tout fonctionne ! Vous pouvez choisir la couleur de fond de la barre de menu de l'éditeur ainsi que le fond de la zone de texte dans Affichage > Couleurs > couleurs de fond




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.

merci!

Merci !

Merci !

Alumine a écrit:Haha merci ^^ J'espère qu'il sera utile à beaucoup de gens !

Alumine, je prends. 

Tout ce que tu fais est si simple pour les newbees !
Et efficace !

Le membre 'Dariel' a effectué l'action suivante : Lancer de dés

---

'DÉ ANNIVERSAIRE' :

Merci!

Un grand merci à toi, c'est pile ce que je recherche et le code fonctionne niquel ! Beau travail