Beez 3 - Module Recherche et css

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

  • #16
    Re : Beez 3 - Module Recherche et css

    Bonjour Richter et pjuignet,

    Est-ce possible d'y remédier en creusant un peu dans le code, ou bien est-ce définitivement mort ?
    En informatique il est habituellement possible de remédier aux problèmes mais cela peut prendre un peu (beaucoup, passionnément, ...) de temps et/ou d'argent.

    A noter, pour clarifier le vocabulaire, qu'il s'agit de la vue du composant Recherche (com_search) et non pas du module Recherche (mod_search). Cette vue peut être appelée à partir d'un lien de menu, du module Recherche ou d'un lien dans un article (URL du type
    index.php?option=com_search&view=search).

    Le point de départ est
    :
    Cliquez sur l'image pour l'afficher en taille normale

Nom : beez3-search-01.png 
Affichages : 1 
Taille : 24,5 Ko 
ID : 1804329

    1) Avant de commencer
    • Faire une sauvegarde du site
    • Beez3 est natif dans Joomla! : les modifications proposées peuvent donc être écrasées lors d'une mise à jour de Joomla! : noter ces modifications pour pouvoir les reproduire ou travailler sur une copie de Beez3.

    2) Configurer Beez3 pour utiliser Bootstrap pour le composant Recherche
    • Aller dans Extensions > Gestion des templates > Beez3 - Défaut > Paramètres avancés
    • Dans le paramètre "Composants requérant Bootstrap" ajouter com_search

    Le résultat à cette étape est :
    Cliquez sur l'image pour l'afficher en taille normale

Nom : beez3-search-02.png 
Affichages : 1 
Taille : 29,6 Ko 
ID : 1804330
    • L'icône loupe a été ajoutée
    • le nombre de résultats a été mis en couleur
    • mais :
      • la bordure du fieldset (après "Rechercher :" et "Rechercher uniquement dans :" ) a disparu
      • les boutons radio sont "en vrac" avec double bouton (gros rond bleu et petit rond)
      • les boutons checkbox sont aussi "en vrac" avec double bouton (gros et petit carré)

    3) Ajouter du CSS pour corriger les "mais" du point précédent
    Avec Beez3 on peut choisir plusieurs "Styles de template", par défaut c'est Personnel. Dans ce cas, il faut ajouter à la fin du fichier templates/beez3/css/personal.css le code suivant :
    Code:
    /* ----- com_search ----- */
    #searchForm fieldset {
        padding: 10px;
    }
    #searchForm legend {
        width: auto;
    }
    #searchForm  label:before {
        display: none;
    }
    #searchForm fieldset.phrases label,
    #searchForm fieldset.only label {
        margin: 0 5px;
    }
    #searchForm .radio,
    #searchForm .checkbox {
        padding-left: 0;
    }
    #searchForm .radio input[type="radio"],
    #searchForm .checkbox input[type="checkbox"] {
        float: none;
        margin-left: 0px;
        margin-right: 5px;
    }
    Notes : les #searchForm limitent ces surcharges CSS au formulaire du composant de recherche pour ne pas risquer d'interférer avec un autre formulaire.

    Le résultat maintenant est :
    Cliquez sur l'image pour l'afficher en taille normale

Nom : beez3-search-04.png 
Affichages : 1 
Taille : 27,3 Ko 
ID : 1804331

    Amicalement,
    Rajoz

    [MODIF]
    Le fichier à modifier est personal.css non pas personnal.css
    [/MODIF]
    Dernière édition par Rajoz à 18/06/2015, 11h25

    Commentaire


    • #17
      Re : Beez 3 - Module Recherche et css

      Bonjour pjuignet,

      Comme tu utilises le style Rouge de Beez3, les surcharges CSS sont à mettre à la fin de templates/beez3/css/red.css (au lieu de personal.css).

      Amicalement,
      Rajoz

      Commentaire


      • #18
        Re : Beez 3 - Module Recherche et css

        Envoyé par Rajoz Voir le message
        Bonjour pjuignet,

        Comme tu utilises le style Rouge de Beez3, les surcharges CSS sont à mettre à la fin de templates/beez3/css/red.css (au lieu de personal.css).

        Amicalement,
        Rajoz
        autre solution, renommer turq.less en red.less, effectuer les changements dans le fichier les et ensuite cliquer sur le bouton compiler less du gestionnaire de template pour obtenir le fichier css correspondant.
        Le style red a pour base le meme fichier less que le style turquoise (turq.less).
        Il y a un seul fichier pour les differents styles.
        Les changements ne sont que des changements de variables.

        Commentaire


        • #19
          Re : Beez 3 - Module Recherche et css

          Bonjour lefabdu51,

          C'est vrai qu'il y a souvent plusieurs solutions...

          Personnellement, j'aurai préféré continuer la méthode de Beez3 qui est de faire des surcharges pour les vues de Joomla! Mais je n'avais pas le temps de regarder une surcharge de la vue de com_search. Alors j'en suis resté au plus court : la surcharge CSS.

          Là aussi, la surcharge aurait pu être dans un custom.css pour pouvoir marcher quelque soit le style de Beez3. Mais mon post était déjà assez long...

          Note : je n'ai jamais utilisé Beez3 en dehors des réponses faites dans ce forum. Je préfère de loin Protostar ou des frameworks comme Blank Template, Helix ou YJSG.

          Amicalement,
          Rajoz

          Commentaire


          • #20
            Re : Beez 3 - Module Recherche et css

            Envoyé par Rajoz Voir le message
            *Tour de magie*
            Jamais je n'aurai pensé à inclure com_search comme composant recquérant Bootstrap...

            Un seul mot : M E R C I ! ! !

            C'est parfait !

            Commentaire


            • #21
              Re : Beez 3 - Module Recherche et css

              Envoyé par Rajoz Voir le message
              Bonjour lefabdu51,

              C'est vrai qu'il y a souvent plusieurs solutions...

              Personnellement, j'aurai préféré continuer la méthode de Beez3 qui est de faire des surcharges pour les vues de Joomla! Mais je n'avais pas le temps de regarder une surcharge de la vue de com_search. Alors j'en suis resté au plus court : la surcharge CSS.

              Là aussi, la surcharge aurait pu être dans un custom.css pour pouvoir marcher quelque soit le style de Beez3. Mais mon post était déjà assez long...

              Note : je n'ai jamais utilisé Beez3 en dehors des réponses faites dans ce forum. Je préfère de loin Protostar ou des frameworks comme Blank Template, Helix ou YJSG.

              Amicalement,
              Rajoz
              salut Rajoz,
              moi j'ai étudié le template Beez 2 pour comprendre les principes de fonctionnement.
              J'ai crée mon propre framework basé sur beez 2, car c'est le template qui est le plus simple à personnaliser et le plus simple à étendre avec de nouvelles fonctionnalités.

              La, quand j'ai du temps, je adaptes les fonctionnalités que j ai crées (ou récupérés dans d'autres templates) dans beez 3.

              Peut être qu'un jour je le sortirais sous forme de package....

              Ce template est simple à personnaliser, mais il necessites plus de travail qu un template fait par un fournisseur car tout est à personnaliser.

              C'est un template idéal pour celui qui a envie d'apprendre le fonctionnement des templates Joomla.

              Pour ce qui est du style custom, il faut creer un fichier css/custom.css, utiliser le style custom dans les paramètres.
              Ensuite tu recopies le fichier personal.css, nature.css ou le fichier css du style.

              Il n y a qu'un seul fichier less car les styles obtenus avec ce fichier ne correspondent qu a des changements de variables.
              Les regles sont les mêmes.

              Dans touts les cas, merci pour les cours que tu donnes ici sur ce template.....

              Commentaire

              Annonce

              Réduire
              Aucune annonce pour le moment.

              Partenaire de l'association

              Réduire

              Hébergeur Web PlanetHoster
              Travaille ...
              X