Changer la couleur du menu du tuto "Barre de recherche instantanée"

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Changer la couleur du menu du tuto "Barre de recherche instantanée"

Message par Mat Jeu 24 Aoû 2017, 13:59

Bonjour Wink
J'ai suivi ce tuto :
Changer la couleur du menu du tuto  "Barre de recherche instantanée" 2550807179 Live Search par Ange Tuteur
Il vient du forum anglais de Forumactif Wink
Je voudrais savoir comment je pourrais faire pour changer la couleur ici Changer la couleur du menu du tuto  "Barre de recherche instantanée" Icon_biggrin  :

Changer la couleur du menu du tuto  "Barre de recherche instantanée" Aperyu12

Voici mon code pour l'instant Changer la couleur du menu du tuto  "Barre de recherche instantanée" Icon_wink :

Code:
(function() {
          'DEVELOPED BY ANGE TUTEUR';
          'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
          'ORIGIN : http://fmdesign.forumotion.com/t1118-live-search#26404';
          window.fa_ajax_search = {
            input_fields : 'input[name="search_keywords"]', // input elements you want to enable ajax searching on
            delay : 100, // delay before sending search
            // language settings
            lang : {

Merci d'avance  Very Happy
Mat

Mat
Membre habitué

Masculin
Messages : 1494
Inscrit(e) le : 05/09/2015

Voir le profil de l'utilisateur http://www.dixily.fr
Mat a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Changer la couleur du menu du tuto "Barre de recherche instantanée"

Message par Neptunia Jeu 24 Aoû 2017, 16:09

Bonjour ^^


Le problème vient du fait que la boîte de résultats hérite des propriétés de son ancêtre, ici la toolbar. Or le script n'est pas prévu pour gérer la toolbar.

Il suffit d'ajouter au css le bloc suivant :
Code:
#fa_toolbar .fa_ajax_search-topics a {
    color: #00487D;
    }

Code couleur personnalisable à volonté, pour ma part j'ai choisi la couleur de tous les autres liens du fofo. Et plutôt que de charger ma feuille CSS, j'ai embarqué le CSS dans le corps du javascript.
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17832
Inscrit(e) le : 08/08/2010

Voir le profil de l'utilisateur https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la couleur du menu du tuto "Barre de recherche instantanée"

Message par Mat Jeu 24 Aoû 2017, 20:43

Merci Wink
Neptunia a écrit:Code couleur personnalisable à volonté, pour ma part j'ai choisi la couleur de tous les autres liens du fofo. Et plutôt que de charger ma feuille CSS, j'ai embarqué le CSS dans le corps du javascript.
Je veux bien la version javascript alors Smile

Et le mot que l'on cherche est resté blanc  Very Happy
Changer la couleur du menu du tuto  "Barre de recherche instantanée" Lien_b12

Merci d'avance Wink
Mat

Mat
Membre habitué

Masculin
Messages : 1494
Inscrit(e) le : 05/09/2015

Voir le profil de l'utilisateur http://www.dixily.fr
Mat a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Changer la couleur du menu du tuto "Barre de recherche instantanée"

Message par Neptunia Jeu 24 Aoû 2017, 20:50

Pour la couleur du mot recherché c'est pareil ailleurs que sur la toolbar

Il s'agit de la couleur définie ici :
Right PA > Affichage > Couleurs > Couleur initiale du groupe [Administrateur]

Pour la version javascript incluant la gestion de la toolbar mais pas nécessairement les mêmes traductions que chez toi :

Code:
(function() {
          'DEVELOPED BY ANGE TUTEUR';
          'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
          'ORIGIN : http://fmdesign.forumotion.com/t1118-live-search#26404';
       
          window.fa_ajax_search = {
            input_fields : 'input[name="search_keywords"]', // input elements you want to enable ajax searching on
       
            delay : 100, // delay before sending search
       
            // language settings
            lang : {
              title : 'Résultats de la recherche',
              searching : 'recherche des sujets contenant "{KEYWORDS}"...',
              no_results : 'aucun résultat pour "{KEYWORDS}"',
              view_all : 'lister les résultats sur une page',
              close : 'fermer'
            },
       
       
            // wait before sending the search
            queue : function (caller) {
              fa_ajax_search.clear(); // clear ongoing searches
       
              fa_ajax_search.wait = window.setTimeout(function() {
                fa_ajax_search.query(caller);
              }, fa_ajax_search.delay);
            },
       
       
            // create the search result popup
            createPopup : function (caller) {
              if (!fa_ajax_search.popup) {
                var popup = document.createElement('DIV');
       
                popup.className = 'fa_ajax_search-results';
                popup.innerHTML =
                  '<a href="javascript:fa_ajax_search.clear();" class="fa_ajax_search-close" title="' + fa_ajax_search.lang.close + '">X</a>'+
                  '<div class="fa_ajax_search-title">' + fa_ajax_search.lang.title + '</div>'+
                  '<ul class="fa_ajax_search-topics"></ul>'+
                  '<p style="text-align:center;">'+
                    '<a href="#" class="button1">' + fa_ajax_search.lang.view_all + '</a>'+
                  '</p>';
       
                fa_ajax_search.popup = popup;
              }
       
              fa_ajax_search.popup.getElementsByTagName('UL')[0].innerHTML = '<li>' + fa_ajax_search.lang.searching.replace('{KEYWORDS}', caller.value) + '</li>';
              fa_ajax_search.popup.lastChild.getElementsByTagName('A')[0].href = fa_ajax_search.url(caller);
              caller.parentNode.appendChild(fa_ajax_search.popup);
            },
       
       
            // submit a search
            query : function (caller) {
              fa_ajax_search.createPopup(caller);
       
              fa_ajax_search.request = $.get(fa_ajax_search.url(caller), function(d) {
                fa_ajax_search.showResults(caller, $('.topictitle', d));
              });
            },
       
       
            // create and return the search URL
            url : function (caller) {
              var form = $(caller).closest('form')[0],
                  where = form ? form.search_where : null;
       
              return '/search?search_keywords=' + encodeURIComponent(caller.value) + '*' + ( where ? '&search_where=' + where.value : '' );
            },
       
       
            // show the results in the popup
            showResults : function (caller, results) {
              var i = 0,
                  j = results.length,
                  list = fa_ajax_search.popup.getElementsByTagName('UL')[0],
                  frag = document.createDocumentFragment(),
                  li;
       
              if (j) {
                for (; i < j; i++) {
                  li = document.createElement('LI');
       
                  results[i].href = results[i].href.replace(/%2A$/, '');
       
                  li.appendChild(results[i]);
                  frag.appendChild(li);
                }
       
                list.innerHTML = '';
                list.appendChild(frag);
              } else {
                list.innerHTML = '<li>' + fa_ajax_search.lang.no_results.replace('{KEYWORDS}', caller.value) + '</li>';
              }
            },
       
       
            // initialize the selected input(s)
            init : function (node) {
              $(node).keyup(function() {
                if (this.value.length >= 3) {
                  fa_ajax_search.queue(this);
                } else {
                  fa_ajax_search.clear();
                }
              }).attr('autocomplete', 'off');
            },
       
       
            // clear and abort ongoing searches
            clear : function () {
              if (fa_ajax_search.wait) {
                window.clearTimeout(fa_ajax_search.wait);
                delete fa_ajax_search.wait;
              }
       
              if (fa_ajax_search.request) {
                fa_ajax_search.request.abort();
                delete fa_ajax_search.request;
              }
       
              if (fa_ajax_search.popup && fa_ajax_search.popup.parentNode) {
                fa_ajax_search.popup.parentNode.removeChild(fa_ajax_search.popup);
              }
            }
          };
       
       
          // search result styles
          $('head').append(
            '<style type="text/css">'+
              '.fa_ajax_search-results {'+
                'font-family:arial, verdana, sans-serif;'+
                'font-size:12px;'+
                'text-align:left;'+
                'white-space:normal;'+
                'background:#FFF;'+
                'border:1px solid #CCC;'+
                'box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);'+
                'margin-top:3px;'+
                'position:absolute;'+
                'z-index:1;'+
              '}'+
       
              '.fa_ajax_search-title {'+
                'color:#FFF;'+
                'background:#69C;'+
                'font-size:16px;'+
                'height:25px;'+
                'line-height:25px;'+
                'margin:-1px -1px 0 -1px;'+
                'padding:0 40px 0 6px;'+
              '}'+
       
              '.fa_ajax_search-results a.fa_ajax_search-close {'+
                'color:#FFF !important;'+
                'background:none;'+
                'display:block;'+
                'position:absolute;'+
                'top:-1px;'+
                'right:-1px;'+
                'text-align:center;'+
                'text-decoration:none !important;'+
                'font-size:18px;'+
                'line-height:25px;'+
                'height:25px;'+
                'width:35px;'+
                'margin:0 !important;'+
                'padding:0 !important;'+
              '}'+
       
              '.fa_ajax_search-results a.fa_ajax_search-close:hover { background:#F33 !important; }'+
       
              '.fa_ajax_search-results > p { padding:3px; }'+
       
              '.fa_ajax_search-topics {'+
                'width:100%;'+
                'max-height:300px;'+
                'overflow-y:auto;'+
                'overflow-x:hidden;'+
              '}'+
       
              '.fa_ajax_search-topics {'+
                'color:#333;'+
                'border-top:1px solid #CCC;'+
                'border-bottom:1px solid #CCC;'+
                'padding:0 !important;'+
              '}'+
       
              '.fa_ajax_search-topics li {'+
                'padding:3px;'+
                'display:block !important;'+
                'line-height:14px !important;'+
              '}'+
       
              '.fa_ajax_search-topics li:nth-child(even) { background:rgba(0, 0, 0, 0.05); }'+
              '.fa_ajax_search-topics li:nth-child(odd) { background:rgba(0, 0, 0, 0.1); }'+
              '#fa_toolbar .fa_ajax_search-topics a { color:#00487D; }'+
              '.fa_ajax_search-topics a.topictitle, #ipbwrapper .fa_ajax_search-results > p > a {'+
                'font-size:12px;'+
                'font-weight:normal !important;'+
                'padding:0 !important;'+
                'background:none !important;'+
              '}'+
            '</style>'
          );
       
       
          // wait for the document to be ready before initializing
        $(function() {
          $(function() {
            fa_ajax_search.init(fa_ajax_search.input_fields);
          });
        });
       
        }());

J'ai ajouté la ligne 199.
Comme la numérotation semble absente de mon message c'est cette ligne :
Code:
              '#fa_toolbar .fa_ajax_search-topics a { color:#00487D; }'+

Le 00487D correspond à la couleur que j'ai définie ici :
Right PA > Affichage > Couleurs > Couleur du lien
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17832
Inscrit(e) le : 08/08/2010

Voir le profil de l'utilisateur https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la couleur du menu du tuto "Barre de recherche instantanée"

Message par Mat Jeu 24 Aoû 2017, 21:33

Merci, ça fonctionne Wink

Encore une chose, sur ton forum et sur le mien tu as ce texte :
Changer la couleur du menu du tuto  "Barre de recherche instantanée" Lister10

Pour le supprimer, je fais comment Smile ?
Je dois juste supprimer la partie traduction Smile?
Mat

Mat
Membre habitué

Masculin
Messages : 1494
Inscrit(e) le : 05/09/2015

Voir le profil de l'utilisateur http://www.dixily.fr
Mat a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Changer la couleur du menu du tuto "Barre de recherche instantanée"

Message par Neptunia Jeu 24 Aoû 2017, 21:57

Tu peux remplacer :
Code:
              view_all : 'lister les résultats sur une page',
par :
Code:
              view_all : '',

Mais il restera une petite bande blanche que je n'ai pas réussi à supprimer sans altérer la fonctionnalité.
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17832
Inscrit(e) le : 08/08/2010

Voir le profil de l'utilisateur https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la couleur du menu du tuto "Barre de recherche instantanée"

Message par Mat Jeu 24 Aoû 2017, 22:01

Merci, ça marche Wink
Mat

Mat
Membre habitué

Masculin
Messages : 1494
Inscrit(e) le : 05/09/2015

Voir le profil de l'utilisateur http://www.dixily.fr
Mat a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum