Module Backend btn-group-yesno

[djphil]

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.

[djphil]

Un indice ? Une piste ? Un lien ? Un tutoriel ?
Un module duquel je pourrais m'inspirer ?
Merci d'avance.

[lefabdu51]

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.

[djphil]

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.

[lomart]

Bonsoir,

Essayez de cibler un attribut comme sélecteur CSS. Exemple :

[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

[lomart]

Une autre solution "plus limité" est d'intégrer le css dans la traduction.
Exemple:

INFO_LABEL="<b style='color:blue'>info</b>"

[djphil]

@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

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

[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.

[lomart]

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:

[for="jform_params_nomparamx"][B].active[/B] {
    background-color: orange;
    color: red;
}

[djphil]

le js qui s'occupe de changer les classes des boutons du template admin Isis est le suivant:

// 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 ?

[djphil]

Je viens d'essayer comme ceci:

[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.

[lomart]

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

[lomart]

Hélas, aucun effet sur mon bouton module en admin.

chez moi, ça marche

[djphil]

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!

[djphil]

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):

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:

$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)

[lomart]

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