Modifier l'apparence des champs quand on édite le profil

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Modifier l'apparence des champs quand on édite le profil

Message par Yunie16 Mar 3 Oct 2023 - 21:47

Détails techniques


Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonsoir !

Je suis en train de travailler les profils sur mon forum test, et j'aurais aimé pouvoir mettre un encadré autour des zones à remplir. Pour vous illustrer tout ça, voici ce que j'ai actuellement :
Spoiler:

Et ce que j'ai réussi à faire dans la partie supérieure que j'aimerais reproduire en bas (ainsi que dans les champs "contacts") :
Spoiler:

Le problème étant que pour la partie "finie" j'ai trouvé des codes "input" que j'ai modifiés pour obtenir ce que je voulais, et rien pour les autres parties, donc je ne sais pas où je dois caser mes bordures, j'ai l'impression d'avoir testé partout xD

Du coup vous aurez besoin de mon template (le CSS est intégré dedans pour un gain de place) :
Code:
<script type="text/javascript" src="{JSPWD}"></script>
<!-- BEGIN switch_display_menu -->
{UCP_TABS}
<!-- END switch_display_menu -->

{ERROR_BOX}

<div class="panel row3">
   <div class="inner">
      <span class="corners-top"><span></span></span>

      <div id="cp-main" class="ucp-main">
         <form action="{S_PROFILE_ACTION}" {S_FORM_ENCTYPE} method="post" name="post" id="ucp">
         <!-- BEGIN switch_informations_menu -->
                          <div class="page-title" style="align-items: center;display: flex;justify-content: space-between;padding: 10px;background:url(https://www.zupimages.net/up/23/37/yp3o.png);color: #444444;border-radius: 6px;height:35px;"><h2 style="border:none;margin: auto;box-sizing: border-box;font-size: 13px;text-transform: uppercase;font-weight: 700;font-family: Indie Flower;color:black;">・✫・{L_REGISTRATION_INFO}・✫・</h2></div>
            <div class="panel">
               <div class="inner"><span class="corners-top"><span></span></span>

               <p style="font-style:oblique">{L_ITEMS_REQUIRED}</p>
               <fieldset>
               <!-- BEGIN switch_namechange_disallowed -->
               <dl>
                  <dt><label>{L_USERNAME} : *</label></dt>
                  <dd><input type="hidden" name="username" value="{USERNAME}" class="inputbox" /><strong>{USERNAME}</strong></dd>
               </dl>
               <!-- END switch_namechange_disallowed -->
               <!-- BEGIN switch_namechange_allowed -->
               <dl>
                  <dt><label>{L_USERNAME} : *</label></dt>
                  <dd><input style="border:1px solid var(--couleur-tertiaire);border-radius:6px;padding-left:5px;" type="text" name="username" value="{USERNAME}" class="inputbox" maxlength="25" /></dd>
               </dl>
               <!-- END switch_namechange_allowed -->
               <!-- BEGIN switch_emailchange_disallowed -->
               <dl>
                  <dt><label>{L_EMAIL_ADDRESS} : *</label></dt>
                  <dd><input type="hidden" name="email" value="{EMAIL}" />
                     {EMAIL}
                     {L_INVALID_EMAIL}
                  </dd>
               </dl>
               <!-- END switch_emailchange_disallowed -->
               <!-- BEGIN switch_emailchange_allowed -->
               <dl>
                  <dt><label>{L_EMAIL_ADDRESS} : *</label></dt>
                  <dd><input style="border:1px solid var(--couleur-tertiaire);border-radius:6px;padding-left:5px;" type="email" name="email" value="{EMAIL}" class="inputbox" />
                     {L_INVALID_EMAIL}
                  </dd>
               </dl>
               <!-- END switch_emailchange_allowed -->

               <!-- BEGIN switch_change_password -->
               <dl>
                  <dt><label>{L_CHANGE_PASSWORD} : *</label></dt>
                  <dd>
                     <a href="{LINK_FOR_PASSWD_CHANGE}" target="_blank"><b>&lt;&nbsp;{L_MODIFY}&nbsp;&gt;</b></a>
                  </dd>
               </dl>
               <!-- END switch_change_password -->
               </fieldset>
               <span class="corners-bottom"><span></span></span></div>
            </div>
            <!-- BEGIN switch_span_div -->
            <!-- END switch_span_div -->

            <!-- BEGIN switch_profile_fields -->
                          <div class="page-title" style="align-items: center;display: flex;justify-content: space-between;padding: 10px;background:url(https://www.zupimages.net/up/23/37/yp3o.png);color: #444444;border-radius: 6px;height:35px;top:0;"><h2 style="border:none;margin: auto;box-sizing: border-box;font-size: 13px;text-transform: uppercase;font-weight: 700;font-family: Indie Flower;color:black;">・✫・{switch_informations_menu.switch_profile_fields.L_PROFILE_FIELDS} ・✫・</h2></div>
            <div class="panel">
               <div class="inner"><span class="corners-top"><span></span></span>
               <fieldset>
                  <!-- BEGIN field -->
                  <dl>
                     <dt>{switch_informations_menu.switch_profile_fields.field.NAME}</dt>
                     <dd>
                                                          {switch_informations_menu.switch_profile_fields.field.OBJECT}<br />
                        <span class="italic">{switch_informations_menu.switch_profile_fields.field.DESCRIPTION}</span>
                     </dd>
                  </dl>
                  <!-- END field -->
               </fieldset>
               <span class="corners-bottom"><span></span></span></div>
            </div>
            <!-- END switch_profile_fields -->

            <!-- BEGIN switch_profile_fields_register -->
            <div class="panel">
               <div class="inner"><span class="corners-top"><span></span></span>
               <fieldset>
               <!-- BEGIN field -->
               <dl>
                  <dt><label>{switch_informations_menu.switch_profile_fields_register.field.NAME} :</label></dt>
                                          <dd>{switch_informations_menu.switch_profile_fields_register.field.OBJECT}<br /><br /></dd>
               </dl>
               <!-- END field -->
               </fieldset>
               <span class="corners-bottom"><span></span></span></div>
            </div>
            <!-- END switch_profile_fields_register -->

                          <div class="page-title" style="align-items: center;display: flex;justify-content: space-between;padding: 10px;background:url(https://www.zupimages.net/up/23/37/yp3o.png);color: #444444;border-radius: 6px;height:35px;top:0;"><h2 style="border:none;margin: auto;box-sizing: border-box;font-size: 13px;text-transform: uppercase;font-weight: 700;font-family: Indie Flower;color:black;">・✫・{switch_informations_menu.RGPD_ACTION_TITLE}・✫・</h2></div>
            <!-- BEGIN rgpd_generate_or_download -->
            <div class="panel">
               <div class="inner"><span class="corners-top"><span></span></span>
                  <fieldset>
                     <dl>
                        <dt><label>{switch_informations_menu.rgpd_generate_or_download.RGPD_ACTION_LABEL} :</label></dt>
                        <dd>
                           <a href="{switch_informations_menu.rgpd_generate_or_download.RGPD_ACTION_LINK}" class="button1">{switch_informations_menu.rgpd_generate_or_download.RGPD_ACTION_CONTENT}</a>
                           <br /><br />
                                    {switch_informations_menu.rgpd_generate_or_download.RGPD_ACTION_EXPLAIN}
                        </dd>
                     </dl>
                  </fieldset>
                  <span class="corners-bottom"><span></span></span></div>
            </div>
            <!-- END rgpd_generate_or_download -->
            <!-- BEGIN rgpd_await_export -->
            <div class="panel">
               <div class="inner"><span class="corners-top"><span></span></span>
                  <fieldset>
                     <p>{switch_informations_menu.rgpd_await_export.RGPD_AWAIT_EXPORT}</p>
                  </fieldset>
                  <span class="corners-bottom"><span></span></span></div>
            </div>
            <!-- END rgpd_await_export -->
            <!-- END switch_informations_menu -->


<!-- BEGIN switch_confirm_password -->
                          <div class="page-title" style="align-items: center;display: flex;justify-content: space-between;padding: 10px;background:url(https://www.zupimages.net/up/23/37/yp3o.png);color: #444444;border-radius: 6px;height:35px;top:0;"><h2 style="border:none;margin: auto;box-sizing: border-box;font-size: 13px;text-transform: uppercase;font-weight: 700;font-family: Indie Flower;color:black;">・✫・{L_REGISTRATION_INFO}・✫・</h2></div>
<div class="panel">
<div class="inner"><span class="corners-top"><span></span></span>
<fieldset>
<dl>
        <dt><label>{L_CURRENT_PASSWORD}&nbsp;: *</label></dt>
        <dd><input type="password" style="border:1px solid var(--couleur-tertiaire);border-radius:6px;padding-left:5px;" name="cur_password" value="{CUR_PASSWORD}" class="inputbox" /></dd>
</dl>
</fieldset>
<span class="corners-bottom"><span></span></span>
</div>
</div>
<!-- END switch_confirm_password -->
<!-- BEGIN switch_confirm_password_new -->
<div class="panel">
<div class="inner"><span class="corners-top"><span></span></span>
<fieldset>
<dl>
        <dt><label>{L_NEW_PASSWORD}&nbsp;: *</label></dt>
        <dd><input type="password" style="border:1px solid var(--couleur-tertiaire);border-radius:6px;padding-left:5px;" name="new_password" value="{NEW_PASSWORD}" class="inputbox" maxlength="25" /></dd>
</dl>
<dl>
        <dt><label>{L_CONFIRM_PASSWORD}&nbsp;: *</label></dt>
        <dd>
         <input type="password" style="border:1px solid var(--couleur-tertiaire);border-radius:6px;padding-left:5px;" name="password_confirm" value="{PASSWORD_CONFIRM}" class="inputbox" maxlength="25" />
         <input type="hidden" style="border:1px solid var(--couleur-tertiaire);border-radius:6px;padding-left:5px;" name="change_password" value="change_password" />
      </dd>
</dl>
</fieldset>
<span class="corners-bottom"><span></span></span>
</div>
</div>
<!-- END switch_confirm_password_new -->


            <!-- BEGIN switch_preferences_menu -->
            <h1 class="page-title">{L_PREFERENCES}</h1>
            <div class="panel">
               <div class="inner"><span class="corners-top"><span></span></span>

               <fieldset>
               <dl>
                  <dt><label>{L_PUBLIC_VIEW_EMAIL} :</label></dt>
                  <dd>
                     <label><input type="radio" name="viewemail" value="2" {VIEW_EMAIL_FORM} />{L_YES}</label>
                     <!-- BEGIN switch_enable_mail_view --><label><input type="radio" name="viewemail" value="2" {VIEW_EMAIL_FORM} />{L_FORM}</label>
                     <label><input type="radio" name="viewemail" value="1" {VIEW_EMAIL_MAILTO} />{L_MAILTO}</label>
                     <!-- END switch_enable_mail_view --><label><input type="radio" name="viewemail" value="0" {VIEW_EMAIL_NO} />{L_NO}</label>
                  </dd>
               </dl>
               <!-- BEGIN switch_view_pm -->
               <dl>
                  <dt><label>{L_PUBLIC_VIEW_MP}&nbsp;:</label></dt>
                  <dd>
                     <label><input type="radio" name="view_pm" value="1" {VIEW_MP_YES} />{L_YES}</label>
                     <label><input type="radio" name="view_pm" value="0" {VIEW_MP_NO} />{L_NO}</label>
                  </dd>
               </dl>
               <!-- END switch_view_pm -->
               <!-- BEGIN switch_profile_advanced -->
               <dl>
                  <dt><label>{switch_preferences_menu.switch_profile_advanced.L_ALLOW_PROFILE_MSGS} :</label></dt>
                  <dd>
                     <label><input type="radio" name="profilemsgs" value="2" {switch_preferences_menu.switch_profile_advanced.PROFILE_MSGS_ALL} />{L_ALL_USERS}</label> &nbsp;
                     <label><input type="radio" name="profilemsgs" value="1" {switch_preferences_menu.switch_profile_advanced.PROFILE_MSGS_FRIENDS} />{L_MY_FRIENDS}</label> &nbsp;
                     <label><input type="radio" name="profilemsgs" value="0" {switch_preferences_menu.switch_profile_advanced.PROFILE_MSGS_NONE} />{L_NO_ONE}</label> &nbsp;
                     <label><input type="radio" name="profilemsgs" value="-1" {switch_preferences_menu.switch_profile_advanced.PROFILE_MSGS_HIDE} />{L_HIDE_TAB}</label>
                  </dd>
               </dl>
               <!-- END switch_profile_advanced -->
               <!-- BEGIN switch_fb_connect -->
               <dl>
                  <dt><label>{switch_preferences_menu.switch_fb_connect.L_FB_LINK_ACCOUNT} :</label></dt>
                  <dd>
                     <!-- BEGIN switch_fb_account_linked -->
                     <span class="italic">{switch_preferences_menu.switch_fb_connect.switch_fb_account_linked.L_FB_ACCOUNT_LINKED}</span>
                     <!-- END switch_fb_account_linked -->

                     <!-- BEGIN switch_fb_account_not_linked -->
                            <div class="fb-login-button" onlogin="facebook_link">{switch_preferences_menu.switch_fb_connect.switch_fb_account_not_linked.L_FB_LOGIN_BUTTON}</div>
                     <!-- END switch_fb_account_not_linked -->
                  </dd>
               </dl>
               <!-- BEGIN switch_fb_account_linked -->
               <dl>
                  <dt><label>{switch_preferences_menu.switch_fb_connect.switch_fb_account_linked.L_UNLINK_FB_ACCOUNT_EXPLAIN} :</label></dt>
                  <dd>
                     <label><input type="radio" name="unlink_fb_account" value="1" />{L_YES}</label>
                     <label><input type="radio" name="unlink_fb_account" value="0" checked="checked" />{L_NO}</label>
                  </dd>
               </dl>
               <!-- END switch_fb_account_linked -->
               <!-- END switch_fb_connect -->
               <dl>
                  <dt><label>{L_NEWSLETTER_ACCEPT} :</label></dt>
                  <dd>
                     <label><input type="radio" name="newsletter" value="1" {NEWSLETTER_YES} />{L_YES}</label>
                     <label><input type="radio" name="newsletter" value="0" {NEWSLETTER_NO} />{L_NO}</label>
                     <br /><span class="italic">{L_NEWSLETTER_ACCEPT_EXPLAIN}</span>
                  </dd>
               </dl>
               <!-- BEGIN display_newsletter_auto -->
               <dl>
                  <dt><label>{L_NEWSLETTER_AUTO_ACCEPT} :</label></dt>
                  <dd>
                     <label><input type="radio" name="newsletter_auto" value="1" {NEWSLETTER_AUTO_YES} />{L_YES}</label>
                     <label><input type="radio" name="newsletter_auto" value="0" {NEWSLETTER_AUTO_NO} />{L_NO}</label>
                     <br /><span class="italic">{L_NEWSLETTER_AUTO_ACCEPT_EXPLAIN}</span>
                  </dd>
               </dl>
               <!-- END display_newsletter_auto -->
               <dl>
                  <dt><label>{L_HIDE_USER} :</label></dt>
                  <dd>
                     <label><input type="radio" name="hideonline" value="1" {HIDE_USER_YES} />{L_YES}</label>
                     <label><input type="radio" name="hideonline" value="0" {HIDE_USER_NO} />{L_NO}</label>
                  </dd>
               </dl>
               <dl>
                  <dt><label>{L_NOTIFY_ON_REPLY} :</label></dt>
                  <dd>
                     <label><input type="radio" name="notifyreply" value="1" {NOTIFY_REPLY_YES} />{L_YES}</label>
                     <label><input type="radio" name="notifyreply" value="0" {NOTIFY_REPLY_NO} />{L_NO}</label>
                     <br /><span class="italic">{L_NOTIFY_ON_REPLY_EXPLAIN}</span>
                  </dd>
               </dl>
               <!-- BEGIN switch_can_disable_mass_pm -->
               <dl>
                  <dt><label>{L_ENABLE_MASS_PM} : </label></dt>
                  <dd>
                     <label><input type="radio" name="allow_mass_pm" value="4" {ALLOW_MASS_PM_NOTIFY_CHECKED} />{L_YES}</label>
                     <label><input type="radio" name="allow_mass_pm" value="2" {ALLOW_MASS_PM_CHECKED} />{L_NO}</label>
                     <label><input type="radio" name="allow_mass_pm" value="0" {DISABLE_MASS_PM_CHECKED} />{L_NO_MASS_PM}</label>
                     <br /><span class="italic">{L_ENABLE_MASS_PM_EXPLAIN}</span>
                  </dd>
               </dl>
               <!-- END switch_can_disable_mass_pm -->
               <!-- BEGIN switch_notify_subscriptions -->
               <dl>
                  <dt><label>{L_NOTIFY_SUBSCRIPTIONS} :</label></dt>
                  <dd>
                     <label><input type="radio" name="notify_subscriptions" value="1" {NOTIFY_SUBSCRIPTIONS_YES} />{L_YES}</label>
                     <label><input type="radio" name="notify_subscriptions" value="0" {NOTIFY_SUBSCRIPTIONS_NO} />{L_NO}</label>
                  </dd>
               </dl>
               <!-- END switch_notify_subscriptions -->
               <dl>
                  <dt><label>{L_POPUP_ON_PRIVMSG} :</label></dt>
                  <dd>
                     <label><input type="radio" name="popup_pm" value="1" {POPUP_PM_YES} />{L_YES}</label>
                     <label><input type="radio" name="popup_pm" value="0" {POPUP_PM_NO} />{L_NO}</label>
                     <br /><span class="italic">{L_POPUP_ON_PRIVMSG_EXPLAIN}</span>
                  </dd>
               </dl>
               <dl>
                  <dt><label>{L_NOTIFY_POST_PREVENT} :</label></dt>
                  <dd>
                     <label><input type="radio" name="post_prevent" value="1" {POST_PREVENT_YES} />{L_YES}</label>
                     <label><input type="radio" name="post_prevent" value="0" {POST_PREVENT_NO} />{L_NO}</label>
                     <br /><span class="italic">{L_NOTIFY_POST_PREVENT_EXPLAIN}</span>
                  </dd>
               </dl>
               <!-- BEGIN switch_report -->
               <dl>
                     <dt><label>{switch_preferences_menu.switch_report.L_NO_REPORT_POPUP} :</label></dt>
                  <dd>
                     <label><input type="radio" name="no_report_popup" value="0" {switch_preferences_menu.switch_report.NO_REPORT_POPUP_YES} />{L_YES}</label>
                     <label><input type="radio" name="no_report_popup" value="1" {switch_preferences_menu.switch_report.NO_REPORT_POPUP_NO} />{L_NO}</label>
                  </dd>
               </dl>
               <!-- END switch_report -->
               <!-- BEGIN switch_signature -->
               <dl>
                  <dt><label>{switch_preferences_menu.switch_signature.L_ALWAYS_ADD_SIGNATURE} :</label></dt>
                  <dd>
                     <label><input type="radio" name="attachsig" value="1" {switch_preferences_menu.switch_signature.ALWAYS_ADD_SIGNATURE_YES} />{L_YES}</label>
                     <label><input type="radio" name="attachsig" value="0" {switch_preferences_menu.switch_signature.ALWAYS_ADD_SIGNATURE_NO} />{L_NO}</label>
                  </dd>
               </dl>
               <!-- END switch_signature -->
               <!-- BEGIN switch_bbcode_allowed -->
               <dl>
                  <dt><label>{switch_preferences_menu.switch_bbcode_allowed.L_ALWAYS_ALLOW_BBCODE} :</label></dt>
                  <dd>
                     <label><input type="radio" name="allowbbcode" value="1" {switch_preferences_menu.switch_bbcode_allowed.ALWAYS_ALLOW_BBCODE_YES} />{L_YES}</label>
                     <label><input type="radio" name="allowbbcode" value="0" {switch_preferences_menu.switch_bbcode_allowed.ALWAYS_ALLOW_BBCODE_NO} />{L_NO}</label>
                  </dd>
               </dl>
               <!-- END switch_bbcode_allowed -->
               <!-- BEGIN switch_html_allowed -->
               <dl>
                  <dt><label>{switch_preferences_menu.switch_html_allowed.L_ALWAYS_ALLOW_HTML} :</label></dt>
                  <dd>
                     <label><input type="radio" name="allowhtml" value="1" {switch_preferences_menu.switch_html_allowed.ALWAYS_ALLOW_HTML_YES} />{L_YES}</label>
                     <label><input type="radio" name="allowhtml" value="0" {switch_preferences_menu.switch_html_allowed.ALWAYS_ALLOW_HTML_NO} />{L_NO}</label>
                  </dd>
               </dl>
               <!-- END switch_html_allowed -->
               <!-- BEGIN switch_smilies_allowed -->
               <dl>
                  <dt><label>{switch_preferences_menu.switch_smilies_allowed.L_ALWAYS_ALLOW_SMILIES} :</label></dt>
                  <dd>
                     <label><input type="radio" name="allowsmilies" value="1" {switch_preferences_menu.switch_smilies_allowed.ALWAYS_ALLOW_SMILIES_YES} />{L_YES}</label>
                     <label><input type="radio" name="allowsmilies" value="0" {switch_preferences_menu.switch_smilies_allowed.ALWAYS_ALLOW_SMILIES_NO} />{L_NO}</label>
                  </dd>
               </dl>
               <!-- END switch_smilies_allowed -->
               <dl>
                  <dt><label>{L_BOARD_LANGUAGE} :</label></dt>
                  <dd>{LANGUAGE_SELECT}</dd>
               </dl>
               <dl>
                  <dt><label>{L_TIMEZONE} :</label></dt>
                  <dd>{TIMEZONE_SELECT}</dd>
               </dl>
               <dl>
                  <dt><label>{L_DATE_FORMAT} :</label></dt>
                  <dd>{DATE_FORMAT}
                     <br /><span class="italic">{CURRENT_TIME}</span>
                  </dd>
               </dl>
               </fieldset>

               <span class="corners-bottom"><span></span></span></div>
            </div>
            <!-- END switch_preferences_menu -->

            <!-- BEGIN switch_avatar_block -->
            <h1 class="page-title">{L_AVATAR_PANEL}</h1>
            <div class="panel">
               <div class="inner"><span class="corners-top"><span></span></span>

               <fieldset>
               <dl>
                  <dt><label>{L_AVATAR_EXPLAIN}</label></dt>
                  <dd>
                     {L_CURRENT_IMAGE}
                     <br />{AVATAR}
                     <br /><input type="checkbox" name="avatardel" />{L_DELETE_AVATAR}
                  </dd>
               </dl>

               <!-- BEGIN switch_avatar_local_upload -->
               <dl>
                  <dt><label>{L_UPLOAD_AVATAR_FILE} :</label></dt>
                  <dd><input type="file" name="avatar" class="inputbox" /></dd>
               </dl>
               <!-- END switch_avatar_local_upload -->
               <!-- BEGIN switch_avatar_remote_upload -->
               <dl>
                  <dt><label>{L_UPLOAD_AVATAR_URL} :</label></dt>
                  <dd><input type="text" name="avatarurl" class="inputbox" />
                     <br /><span class="italic">{L_UPLOAD_AVATAR_URL_EXPLAIN}</span>
                  </dd>
               </dl>
               <!-- END switch_avatar_remote_upload -->
               <!-- BEGIN switch_avatar_remote_link -->
               <dl>
                  <dt><label>{L_LINK_REMOTE_AVATAR} :</label></dt>
                  <dd><input type="text" name="avatarremoteurl" class="inputbox" />
                     <br /><span class="italic">{L_LINK_REMOTE_AVATAR_EXPLAIN}</span>
                  </dd>
               </dl>
               <!-- END switch_avatar_remote_link -->
               <!-- BEGIN switch_avatar_local_gallery -->
               <dl>
                  <dt><label>{L_AVATAR_GALLERY} :</label></dt>
                  <dd><input type="submit" name="avatargallery" value="{L_SHOW_GALLERY}" class="button1" /></dd>
               </dl>
               <!-- END switch_avatar_local_gallery -->
               </fieldset>
               <span class="corners-bottom"><span></span></span></div>
            </div>
            <!-- END switch_avatar_block -->

            <fieldset class="submit-buttons">
               {S_HIDDEN_FIELDS}
               <input class="button1" type="submit" name="submit" value="{L_SUBMIT}" />&nbsp;
               <input class="button2" type="reset" name="reset" value="{L_RESET}" />
            </fieldset>
         </form>
      </div>
      <div class="clear"></div>
      <span class="corners-bottom"><span></span></span>
   </div>
</div>
<script type="text/javascript">
$(function(){
    $('input[name=reset]').click(function(){
        $("#pwd_good,#pwd_middle,#pwd_bad").hide();
    });
    $('input[name=new_password],input[name=username]').keyup(function() {
        if ( $('input[name=new_password]').val() != "" )
        {
            var level = passwordStrength($('input[name=new_password]').val(),$('input[name=username]').val());
        switch(level)
        {
            case 'bad' :
                $("#pwd_middle,#pwd_good").hide();
                $("#pwd_bad").show();
                break;
            case 'good' :
                $("#pwd_good,#pwd_bad").hide();
                $("#pwd_middle").show();
                break;
            case 'strong' :
                $("#pwd_middle,#pwd_bad").hide();
                $("#pwd_good").show();
                break;
            }
        }
        else
        {
            $("#pwd_middle,#pwd_good,#pwd_bad").hide();
        }
    });
});

$(document).ready(function() {
   var contact_fields = document.querySelectorAll("[id*='profile_field_3_'],[id^='profile_field_3_']");
   for (var i = 0; i < contact_fields.length; i++) {
      contact_fields[i].addEventListener('focusout', validateField, false);
   }
});
</script>

Merci d'avance ♥
Yunie16

Yunie16
***

Messages : 134
Inscrit(e) le : 22/08/2023

https://second-chances.forumactif.com/
Yunie16 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier l'apparence des champs quand on édite le profil

Message par Toryudo Mer 4 Oct 2023 - 11:25

Bonjour !

En fait, vous n'allez pas pouvoir voir les <input> directement dans le Template, puisque ces champs sont "variabilisés".
Si je vous partage la configuration de mon forum test par exemple :
Modifier l'apparence des champs quand on édite le profil Image192

Le contenu de la colonne "Type de champ" va déterminer ce qu'on trouvera dans la page profil en face du libellé du champ.
Ce sera un <input> pour les champs "Champ texte" par exemple, un <select> pour les champs "Date", un <textarea> pour les champs "Zone de texte", etc. Sachant que la balise n'est pas connue à l'avance par le Template, elle est contenue dans une variable : vous ne pourrez donc pas lui associer un style comme vous le faites avec les champs "Nom d'utilisateur" et "Mot de passe".

Mieux vaut passer par la feuille CSS pour les cibler, vous n'avez pas le choix pour le coup !
Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1315
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier l'apparence des champs quand on édite le profil

Message par Yunie16 Jeu 5 Oct 2023 - 12:24

Ooohhh merci j'ai appris quelque chose, je ne savais pas du tout à quoi correspondait le "input", j'avais trouvé au pif honnêtement pour le pseudo/mail xD
Du coup j'ai réussi à tout mettre en page comme je voulais, merci beaucoup !
Je passe en résolu ♥
Yunie16

Yunie16
***

Messages : 134
Inscrit(e) le : 22/08/2023

https://second-chances.forumactif.com/
Yunie16 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum