Module Backend btn-group-yesno

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Module Backend btn-group-yesno

    Bonjour, exite t'il une autre classe de style "btn-group-yesno" par défaut dans Joomla ?
    J'essaie de personnaliser le "btn-group-yesno" de l'admin d'un module perso pour avoir 2 autres couleurs (info & warning).
    Si il n'y en a pas d'autre, comment puis-je en ajouter une sur mesure ?
    J'essaie de le faire via un css personnalisé mais je n'arrive pas à attraper la classe du label.
    Faut-il aussi rajouter un js personnalisé pour le module concerné ?
    Merci d'avance.
    Dernière édition par djphil à 17/10/2017, 11h52
    Visit Digital Concepts - Salles de Chat 3D - DigiGrids @ http://digitalconcepts.free.fr/

  • #2
    Un indice ? Une piste ? Un lien ? Un tutoriel ?
    Un module duquel je pourrais m'inspirer ?
    Merci d'avance.
    Dernière édition par djphil à 20/10/2017, 12h23
    Visit Digital Concepts - Salles de Chat 3D - DigiGrids @ http://digitalconcepts.free.fr/

    Commentaire


    • #3
      regardes du coté de la classe btn de boostrap.
      C'est ce qui geres les boutons dans les templates standard.
      tu peut utiliser comme classe supplementaire btn-warning btn-primary btn-succes ou créer le tien créant une classe nommée btn-custom et en recopiant en modifiant le background une des classes précitées.

      Commentaire


      • #4
        C'est bien ce que j'ai essayé de faire mais ça n'a pas fonctionné.
        Soit erreur de ma part, soit mauvaise façon de procéder ...

        PS: il y a un javascript dans Isis qui gère les classes des boutons en backend.
        Visit Digital Concepts - Salles de Chat 3D - DigiGrids @ http://digitalconcepts.free.fr/

        Commentaire


        • #5
          Bonsoir,

          Essayez de cibler un attribut comme sélecteur CSS. Exemple :
          Code HTML:
          [for="jform_params_nomparamx"] {
              background-color: orange;
              color: red;
          }
          Sinon, il faut créer un bouton sur mesure dans un sous-dossier éléments. Chercher ce type de dossier pour avoir des exemples
          UP, le plugin universel à découvrir sur https//up.lomart.fr
          bgMax
          , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

          Commentaire


          • #6
            Une autre solution "plus limité" est d'intégrer le css dans la traduction.
            Exemple:
            Code:
            INFO_LABEL="<b style='color:blue'>info</b>"
            UP, le plugin universel à découvrir sur https//up.lomart.fr
            bgMax
            , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

            Commentaire


            • #7
              @lomart: Pour la 1ère proposition, qu'appelez-vous "attribut" ?
              Donc que mettre à la place de jform_params_nomparamx ?

              Voici un exemple de bouton extrait du fichier .xml
              Code:
              <field
                  name="bgtest"
                  type="radio"
                  class="btn-group btn-group-yesno"
                  default="1"
                  label="Background Test"
                  description="Ceci est un test.">
                  <option value="1">Avant</option>
                  <option value="0">Après</option>
              </field>
              Ceci dit, je vois mal comment ce css ...
              Code:
              [for="jform_params_nomparamx"] {
                  background-color: orange;
                  color: red;
              }
              ... pourrait modifier un fond de bouton lorsque l'on clic dessus.
              Je penses que js doit intervenir quelque part non ?

              La 2ème proposition, la modif dans le fichier lang, on peut l'oublier de suite.
              Elle n'agit que sur la partie texte, le radio ne change pas.
              Dernière édition par djphil à 19/10/2017, 20h19
              Visit Digital Concepts - Salles de Chat 3D - DigiGrids @ http://digitalconcepts.free.fr/

              Commentaire


              • #8
                Pour la 1ère proposition, qu'appelez-vous "attribut" ?
                Donc que mettre à la place de jform_params_nomparamx ?
                Attribut dans mon exemple, c'est for. Regardez avec un inspecteur de code pour trouver les informations à mettre
                Je penses que js doit intervenir quelque part non ?
                Non, c'est le js de Joomla qui s'en occupe
                Pour compléter mon exemple. Il faudrait mettre:
                Code:
                [for="jform_params_nomparamx"][B].active[/B] {
                    background-color: orange;
                    color: red;
                }
                UP, le plugin universel à découvrir sur https//up.lomart.fr
                bgMax
                , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                Commentaire


                • #9
                  le js qui s'occupe de changer les classes des boutons du template admin Isis est le suivant:
                  Code:
                  // Turn radios into btn-group
                  $('.radio.btn-group label').addClass('btn');
                  
                  $('fieldset.btn-group').each(function() {
                      // Handle disabled, prevent clicks on the container, and add disabled style to each button
                      if ($(this).prop('disabled')) {
                          $(this).css('pointer-events', 'none').off('click');
                          $(this).find('.btn').addClass('disabled');
                      }
                  });
                  
                  $('.btn-group label:not(.active)').click(function()
                  {
                      var label = $(this);
                      var input = $('#' + label.attr('for'));
                  
                      if (!input.prop('checked'))
                      {
                          label.closest('.btn-group').find('label').removeClass('active btn-success btn-danger btn-primary');
                  
                          if (label.closest('.btn-group').hasClass('btn-group-reversed'))
                          {
                              if (input.val() == '')
                              {
                                  label.addClass('active btn-primary');
                              }
                              else if (input.val() == 0)
                              {
                                  label.addClass('active btn-success');
                              }
                              else
                              {
                                  label.addClass('active btn-danger');
                              }
                          }
                          else
                          {
                              if (input.val() == '')
                              {
                                  label.addClass('active btn-primary');
                              }
                              else if (input.val() == 0)
                              {
                                  label.addClass('active btn-danger');
                              }
                              else
                              {
                                  label.addClass('active btn-success');
                              }
                  
                          }
                          input.prop('checked', true);
                          input.trigger('change');
                      }
                  });
                  $('.btn-group input[checked=checked]').each(function()
                  {
                      var $self  = $(this);
                      var attrId = $self.attr('id');
                  
                      if ($self.parent().hasClass('btn-group-reversed'))
                      {
                          if ($self.val() == '')
                          {
                              $('label[for=' + attrId + ']').addClass('active btn-primary');
                          }
                          else if ($self.val() == 0)
                          {
                              $('label[for=' + attrId + ']').addClass('active btn-success');
                          }
                          else
                          {
                              $('label[for=' + attrId + ']').addClass('active btn-danger');
                          }
                      }
                      else
                      {
                          if ($self.val() == '')
                          {
                              $('label[for=' + attrId + ']').addClass('active btn-primary');
                          }
                          else if ($self.val() == 0)
                          {
                              $('label[for=' + attrId + ']').addClass('active btn-danger');
                          }
                          else
                          {
                              $('label[for=' + attrId + ']').addClass('active btn-success');
                          }
                      }
                  });
                  Le soucis est qu'il fait partie du template ...
                  Je voudrais ce mécanisme dans le module.
                  Je pourrais alors modifier aisément les classes des boutons.
                  Non ?
                  Visit Digital Concepts - Salles de Chat 3D - DigiGrids @ http://digitalconcepts.free.fr/

                  Commentaire


                  • #10
                    Je viens d'essayer comme ceci:
                    Code:
                    [for="jform_params_balanceposition0"].active {
                        background-color: blue;
                        color: red;
                    }
                    Où jform_params_nomparamx a été changé en jform_params_balanceposition0 suivant ce que j'ai pu inspecter.
                    Hélas, aucun effet sur mon bouton module en admin.

                    La proposition css me plait bien mais il faudrait arriver à attraper ce label de bouton radio.
                    Dernière édition par djphil à 20/10/2017, 02h42
                    Visit Digital Concepts - Salles de Chat 3D - DigiGrids @ http://digitalconcepts.free.fr/

                    Commentaire


                    • #11
                      C'est ton module ?
                      Si c'est pour un cas précis, dont tu maitrise le code, ma solution doit marcher. Le plus délicat est où mettre le CSS

                      Sinon pour tout faire de a à z, j'ai indiqué de regarder du coté des elements. Je n'ai pas d'exemple sous la main, mais beaucoup de modules et plugins ont ce dossier avec des exemples pour s'inspirer
                      UP, le plugin universel à découvrir sur https//up.lomart.fr
                      bgMax
                      , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                      Commentaire


                      • #12
                        Hélas, aucun effet sur mon bouton module en admin.
                        chez moi, ça marche
                        Cliquez sur l'image pour l'afficher en taille normale

Nom : Image 1.png 
Affichages : 154 
Taille : 97,2 Ko 
ID : 1967716
                        UP, le plugin universel à découvrir sur https//up.lomart.fr
                        bgMax
                        , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                        Commentaire


                        • #13
                          Après vérification, je constate que mon fichier css n'est chargé qu'en frontend.
                          Voilà qui explique pas mal de choses ...
                          Mais pourquoi n'est il pas chargé en backend ?

                          Dans le cas présent ce n'est pas mon module mais j'en "maitrise" le code.
                          Je lui ai ajouté une 20ène de nouveaux paramètres (essentiellement de style).
                          Sinon j'ai fais plusieurs autres modules entièrement de A à Z.

                          La solution pour créer des nouveaux éléments, je l'avais vue sur le web.
                          Il y a plusieurs tutos qui expliquent comment procéder.
                          Je n'ai pas opté pour cette façon car me semble bien compliqué juste pour changer une couleur ...

                          Mince alors ça fonctionne super chez vous!
                          Dernière édition par djphil à 19/10/2017, 21h25
                          Visit Digital Concepts - Salles de Chat 3D - DigiGrids @ http://digitalconcepts.free.fr/

                          Commentaire


                          • #14
                            Si je met votre css dans le custom.css d'Isis alors oui ça fonctionne ...

                            Pour ma part j'avais déjà mis d'autres css similaires dans un template Isis de ma mouture mais dans la cas qui nous concerne, je veux le mécanisme dans le module car je ne pas toucher au Template Isis.

                            Dans mon css Isis j'utilise ceci (légèrement différent):
                            Code:
                            label[for="jform_params_backtotoptype0"].active,
                            label[for="jform_params_backtotoptype1"].active {
                                background:#FF8000;
                                border-color:#FF8000;
                            }
                            Maintenant qu'on est arrivé à cibler via css, comment charge t'on ce css dans la partie admin du module sans toucher au template et sans utiliser de plugin additionnel tel que plg_customcss et consores ?

                            Pour l'instant je charge mon css comme ceci:
                            Code:
                            $assetpath = JUri::base(true)."/modules/mod_custom_test/assets/";
                            $doc->addStyleSheet($assetpath.'mod_custom_test.css');
                            Et j'ai aussi essayé avec JURI::root(true) à la place de JUri::base(true)
                            Dernière édition par djphil à 19/10/2017, 21h58
                            Visit Digital Concepts - Salles de Chat 3D - DigiGrids @ http://digitalconcepts.free.fr/

                            Commentaire


                            • #15
                              Bonjour,

                              Ca ne peut pas marcher. Si j'ai bien compris, tu veux ajouter des règles CSS aux champs Joomla utilisés pour la configuration du module.

                              Le GROS problème est que, à ma connaissance, les scripts PHP ne sont pas appelés.
                              Joomla affiche le fichier XML selon les règles des types de champs et sauve le résultat dans la BD. Jamais tu n'as pas la main sur ce processus, SAUF en créant un champ personnalisé dans le sous-dossier elements.
                              Si l'on veut faire un module installable par tout le monde, il n'y a pas d'autres choix. Si c'est pour un développement spécifique et unique, l'ajout dans custom.css est une solution

                              Ci-joint, une adaptation d'un de mes champs personnalisés pour charger une feuille de style
                              Il suffit de :
                              - copier le dosssier "elements" du zip dans le dossier du module
                              - ajouter le chemin dans le manifest.xml du module : <fields name="params" addfieldpath="/modules/ton_module/elements/">
                              - modifier le fichier "elements/custom.css" avec ses règles
                              - créer un champ "xtitle". Son contenu a peu d'importance, mais il permet de faire un titre plus sexy que celui de base. LABEL est le titre, DESC est le sous-titre

                              Fichiers joints
                              UP, le plugin universel à découvrir sur https//up.lomart.fr
                              bgMax
                              , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X