Tweet
Re : Beez 3 - Module Recherche et css
Bonjour Richter et pjuignet,
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
:
1) Avant de commencer
2) Configurer Beez3 pour utiliser Bootstrap pour le composant Recherche
Le résultat à cette étape est :
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 :
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
:
Amicalement,
Rajoz
[MODIF]
Le fichier à modifier est personal.css non pas personnal.css
[/MODIF]
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 ?
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
: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 :
- 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;
}
Le résultat maintenant est
:Amicalement,
Rajoz
[MODIF]
Le fichier à modifier est personal.css non pas personnal.css
[/MODIF]
Commentaire