AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment : -38%
TV QLED Samsung TQ65Q80D 165 cm 4K UHD 2024 (Via ODR ...
Voir le deal
799 €

    Editeur de messages - light

    Alumine
    Alumine
    FémininAge : 27Messages : 487

    Mar 26 Mai 2015 - 21:29

    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" />&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.

    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 ^^



    Alumine
    Cruelly
    Cruelly
    FémininAge : 31Messages : 2605

    Mer 27 Mai 2015 - 1:52

    Je suis désoler de te le dire mais ... JE T'AIME <3
    J'adore ton nouveau code merci beaucoup Very Happy



    :heart: :heart:
    Alumine
    Alumine
    FémininAge : 27Messages : 487

    Mer 27 Mai 2015 - 10:46

    Haha merci ^^ J'espère qu'il sera utile à beaucoup de gens !



    Alumine
    Cruelly
    Cruelly
    FémininAge : 31Messages : 2605

    Mer 27 Mai 2015 - 14:27

    Il marche très bien chez moi ^^



    :heart: :heart:
    TiGraou
    TiGraou
    MasculinAge : 31Messages : 243

    Mar 9 Juin 2015 - 9:16

    Merci
    Heartfilia
    Heartfilia
    FémininAge : 24Messages : 98

    Dim 5 Juil 2015 - 20:50

    Merci !



    YOU HELLA SAVED MY LIFE
    - chloe price
    avatar
    Løve
    MasculinAge : 29Messages : 189

    Lun 6 Juil 2015 - 11:04

    Merci ! :)
    NanoiHime
    NanoiHime
    FémininAge : 26Messages : 566

    Sam 15 Aoû 2015 - 14:43

    merci !



    Anonymous
    Invité

    Dim 16 Aoû 2015 - 22:55

    Merci beaucoup du partage ! (*^▽^*)
    Neffaly
    Neffaly
    MasculinAge : 29Messages : 47

    Lun 17 Aoû 2015 - 0:47

    mrc
    Chione
    Chione
    MasculinAge : 23Messages : 397

    Lun 24 Aoû 2015 - 18:28

    Merci, c'est génial!



    Editeur de messages - light 1435969469-signd
    FEZ!FEZ!
    Editeur de messages - light 150804081846482087
    Kiowa
    Kiowa
    FémininAge : 35Messages : 220

    Mer 9 Sep 2015 - 2:44

    merci
    Aile
    Aile
    FémininAge : 36Messages : 134

    Jeu 10 Sep 2015 - 12:50

    C'est un super code!!! Franchement j'adore. Merci beaucoup.



    Editeur de messages - light 799284Sanstitre1
    patriciadpt30
    patriciadpt30
    FémininAge : 61Messages : 240

    Ven 16 Oct 2015 - 0:43

    Ho ! Merci :)



    Patricia :)
    Flaura
    Flaura
    FémininAge : 21Messages : 152

    Ven 16 Oct 2015 - 13:15

    C'est beau, merci !
    Antithée
    Antithée
    FémininAge : 27Messages : 69

    Dim 13 Mar 2016 - 14:22

    Merci beaucoup ♥
    KinThoa
    KinThoa
    FémininAge : 29Messages : 29

    Jeu 24 Mar 2016 - 18:38

    J'adore !
    Borée
    Borée
    MasculinAge : 25Messages : 56

    Ven 25 Mar 2016 - 14:50

    Merciii!
    KTMiz
    KTMiz
    MasculinAge : 25Messages : 47

    Dim 27 Mar 2016 - 1:43

    Merci



    Editeur de messages - light Kjod95_sick_religion
    Iguolta
    Iguolta
    MasculinAge : 24Messages : 209

    Lun 28 Mar 2016 - 17:23

    Merci :)
    Fiery Aura
    Fiery Aura
    FémininAge : 25Messages : 57

    Jeu 31 Mar 2016 - 15:16

    Merci bien !
    Clémentine
    Clémentine
    FémininAge : 32Messages : 223

    Ven 1 Avr 2016 - 9:16

    Mercii!!! *_*



    Editeur de messages - light 9w9t
    erika02
    erika02
    FémininAge : 28Messages : 278

    Dim 3 Avr 2016 - 6:03

    Merci



    Editeur de messages - light 45054210
    Madness of Wonderland
    Madness of Wonderland
    FémininAge : 24Messages : 60

    Dim 3 Avr 2016 - 14:25

    merci
    Err0r
    Err0r
    FémininAge : 31Messages : 134

    Dim 3 Avr 2016 - 17:29

    je pique !



    Editeur de messages - light 150519095409324327
    Contenu sponsorisé


      La date/heure actuelle est Mar 5 Nov 2024 - 16:36