Réponses

• kowalsky Member

  juillet 2023 juillet 2023 modifié

  salut @santini
  Pour le nom et l'email sur la même ligne, voir la documentation de PluCSS pour les colonnes : https://plucss.pluxml.org/#grid.
  Une proposition prenant en compte l'accessibilité : sur grand écran, nom et email à coté, sur petit l'un en dessous de l'autre:

                  <div class="grid">
                      <div class="col sml-12 med-6">
                          <label for="id_name"><span><i aria-hidden="true" class="fa fa-user">*</i></span></label>
                          <input id="id_name" name="name" type="text" size="20" value="<?php $plxShow->comGet('name',''); ?>" maxlength="30" required="required" />
                      </div>
                      <div class="col sml-12 med-6">
                          <label for="id_mail"><span><i aria-hidden="true" class="fa fa-envelope"></i></span></label>
                          <input id="id_mail" name="mail" type="text" size="20" value="<?php $plxShow->comGet('mail',''); ?>" />
                      </div>
                  </div>
  

  Pour inverser les commentaires et le formulaire, tu déplaces tout le code compris entre les lignes 3 et 36, et tu le places après la ligne 113 (et avant 115) :

      </script>
  
              <?php if($plxShow->plxMotor->plxRecord_coms): ?>
                  ...
              <?php endif; ?>
  
      <?php $plxShow->comFeed('rss',$plxShow->artId(), '<p><a href="#feedUrl" title="#feedTitle">#feedName</a></p>'); ?>
  

  Je n'ai pas regardé le CSS (car il n'y a aucune modification à faire sur celui par défaut). Si tu veux changer la couleur du bouton, remplacer class="blue" par class="green" (https://plucss.pluxml.org/#buttons)

  <input class="green" type="submit" value="<?php $plxShow->lang('SEND') ?>" />

  Pour le formulaire en gris, rajoute le code suivant à la fin de theme.css (attention, cela va concerner tous les formulaires de ton site, à ajuster si trop d'effets de bord :

  form input,
  form textarea {
      background: #eee;
  }
  

  **Page COMMENTAIRE.PHP modifiée ** :

  <?php if(!defined('PLX_ROOT')) exit; ?>
  
  
  
      <?php if($plxShow->plxMotor->plxRecord_arts->f('allow_com') AND $plxShow->plxMotor->aConf['allow_com']): ?>
  
      <h3>
          <?php $plxShow->lang('WRITE_A_COMMENT') ?>
      </h3>
  
      <form id="form" action="<?php $plxShow->artUrl(); ?>#form" method="post">
  
          <fieldset>
  
              <div class="grid">
                  <div class="col sml-12 med-6">
                      <label for="id_name"><?php $plxShow->lang('NAME') ?>* :</label>
                      <input id="id_name" name="name" type="text" size="20" value="<?php $plxShow->comGet('name',''); ?>" maxlength="30" required="required" />
                  </div>
                  <div class="col sml-12 med-6">
                      <label for="id_mail"><?php $plxShow->lang('EMAIL') ?> :</label>
                      <input id="id_mail" name="mail" type="text" size="20" value="<?php $plxShow->comGet('mail',''); ?>" />
                  </div>
              </div>
              <div class="grid">
                  <div class="col sml-12">
                      <div id="id_answer"></div>
                      <label for="id_content" class="lab_com"><?php $plxShow->lang('COMMENT') ?>* :</label>
                      <textarea id="id_content" name="content" cols="35" rows="6" required="required"><?php $plxShow->comGet('content',''); ?></textarea>
                  </div>
              </div>
  
              <?php $plxShow->comMessage('<p id="com_message" class="#com_class"><strong>#com_message</strong></p>'); ?>
  
              <?php if($plxShow->plxMotor->aConf['capcha']): ?>
  
              <div class="grid">
                  <div class="col sml-12">
                      <label for="id_rep"><strong><?php echo $plxShow->lang('ANTISPAM_WARNING') ?></strong>*</label>
                      <?php $plxShow->capchaQ(); ?>
                      <input id="id_rep" name="rep" type="text" size="2" maxlength="1" style="width: auto; display: inline;" required="required" />
                  </div>
              </div>
  
              <?php endif; ?>
  
              <div class="grid">
                  <div class="col sml-12">
                      <input type="hidden" id="id_parent" name="parent" value="<?php $plxShow->comGet('parent',''); ?>" />
                      <input class="blue" type="submit" value="<?php $plxShow->lang('SEND') ?>" />
                  </div>
              </div>
  
          </fieldset>
  
      </form>
  
  <script>
  function replyCom(idCom) {
      document.getElementById('id_answer').innerHTML='<?php $plxShow->lang('REPLY_TO'); ?> :';
      document.getElementById('id_answer').innerHTML+=document.getElementById('com-'+idCom).innerHTML;
      document.getElementById('id_answer').innerHTML+='<a rel="nofollow" href="<?php $plxShow->artUrl(); ?>#form" onclick="cancelCom()"><?php $plxShow->lang('CANCEL'); ?></a>';
      document.getElementById('id_answer').style.display='inline-block';
      document.getElementById('id_parent').value=idCom;
      document.getElementById('id_content').focus();
  }
  function cancelCom() {
      document.getElementById('id_answer').style.display='none';
      document.getElementById('id_parent').value='';
      document.getElementById('com_message').innerHTML='';
  }
  var parent = document.getElementById('id_parent').value;
  if(parent!='') { replyCom(parent) }
  </script>
  
      <?php if($plxShow->plxMotor->plxRecord_coms): ?>
  
          <h3 id="comments">
              <?php echo $plxShow->artNbCom(); ?>
          </h3>
  
          <?php while($plxShow->plxMotor->plxRecord_coms->loop()): # On boucle sur les commentaires ?>
  
          <div id="<?php $plxShow->comId(); ?>" class="comment <?php $plxShow->comLevel(); ?>">
  
              <div id="com-<?php $plxShow->comIndex(); ?>">
  
                  <small>
                      <a class="nbcom" href="<?php $plxShow->ComUrl(); ?>" title="#<?php echo $plxShow->plxMotor->plxRecord_coms->i+1 ?>">#<?php echo $plxShow->plxMotor->plxRecord_coms->i+1 ?></a>&nbsp;
                      <time datetime="<?php $plxShow->comDate('#num_year(4)-#num_month-#num_day #hour:#minute'); ?>"><?php $plxShow->comDate('#day #num_day #month #num_year(4) - #hour:#minute'); ?></time> -
                      <?php $plxShow->comAuthor('link'); ?>
                      <?php $plxShow->lang('SAID'); ?> :
                  </small>
  
                  <blockquote>
                      <p class="content_com type-<?php $plxShow->comType(); ?>"><?php $plxShow->comContent(); ?></p>
                  </blockquote>
  
              </div>
  
              <?php if($plxShow->plxMotor->plxRecord_arts->f('allow_com') AND $plxShow->plxMotor->aConf['allow_com']): ?>
              <a rel="nofollow" href="<?php $plxShow->artUrl(); ?>#form" onclick="replyCom('<?php $plxShow->comIndex() ?>')"><?php $plxShow->lang('REPLY'); ?></a>
              <?php endif; ?>
  
          </div>
  
          <?php endwhile; # Fin de la boucle sur les commentaires ?>
  
      <?php endif; ?>
  
  
      <?php $plxShow->comFeed('rss',$plxShow->artId(), '<p><a href="#feedUrl" title="#feedTitle">#feedName</a></p>'); ?>
  
      <?php else: ?>
  
      <p>
          <?php $plxShow->lang('COMMENTS_CLOSED') ?>.
      </p>
  
      <?php endif; # Fin du if sur l'autorisation des commentaires ?>
  
• santini Member

  juillet 2023

  Salut Kowalsky,
  Merci beaucoup pour ton aide, je rencontre un nouveau problème, le bouton d'envoie du formulaire ne fonctionne plus, et rien a changer pour le placement des champs du formulaire, je t'envoie le lien pour que tu est un aperçu en direct, merci beaucoup
• kowalsky Member

  juillet 2023 juillet 2023 modifié

  1) Pour le positionnement des champs, c'est parce que tu n'utilises pas la feuille de style plucss.css dans ton thème alors que tu utilises les balises CSS qui vont avec... donc cela ne marche pas

  J'avais présumé que tu avais modifié le thème par défaut de PluXml pour faire le tiens et non utilisé un thème repris ailleurs avec des appels CSS différents, donc le système de grid utilisé par commentaire.php ne fonctionne pas et tu as le style par défaut des champs "input".

  Lignes 952 et suivantes à récupérer dans themes/defaut/css/plucss.css ou depuis https://plucss.pluxml.org/ et à adapter selon ton besoin.

  2) Pour le bouton, c'est à cause d'un recouvrement par un autre élément, lignes 427 et 428 à retirer de style.css :

          .comment {
              background-image: url('../img/user.png');
              background-repeat: no-repeat;
              margin-bottom: 0.5rem;
              padding-left: 6rem;
     --->   border-top: 100px solid transparent;
     --->   margin-top: -100px;
  

  Accessoirement, je pense que tu peux aussi retirer les lignes 412 à 415

          #form {
              border-top: 130px solid transparent;
              margin: -130px 0 0;
          }
  
• santini Member

  juillet 2023

  Merci beaucoup, effectivement j'avais complètement zapper le fichier plucss,
  du coup j'ai ajouter le code de plucss dans style.css