[PhpBB3] Problème couleur avec Live Search

[orpheus]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://univers-dorothee.forumactif.com/

Description du problème

Bonsoir à tous ! ^^

Excusez moi si la question a déjà été posé, voila je me retrouve confronté avec un problème de couleurs dans ma toolbar avec le Live Search.

Voici une capture du dit problème :


Comme vous voyez, la phrase « Afficher dans la page de recherche » apparaît en blanc ce qui rend le texte totalement illisible.

Comment faire pour solutionner ce problème ?

Je vous joint le code que j'ai utilisé (qui de base, servait pour un autre forum en phpBB2) :

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 de sujets pour "{KEYWORDS}"...',
                  no_results : 'Aucun résultat n\'a été trouvé pour "{KEYWORDS}"',
                  view_all : 'Afficher dans la page de recherche',
                  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:#020001; }'+
                  '.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);
  });
});
        }());

Merci d'avance pour votre aide.

[gigi68]

Bonsoir orpheus,

Il semblerais que plusieurs codes de couleurs sois mal renseigné ! #FFF , #333, #69C;
Repère ces codes couleur et modifie les



Fais un test avec celui que je viens de modifier

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 de sujets pour "{KEYWORDS}"...',
                  no_results : 'Aucun résultat n\'a été trouvé pour "{KEYWORDS}"',
                  view_all : 'Afficher dans la page de recherche',
                  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:#D18C8C;'+
                    '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:#06AD00;'+
                    'background:#273259;'+
                    '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:#D18C8C !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:#365BD6 !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:#06AD00;'+
                    '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:#020001; }'+
                  '.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);
  });
});
        }());

Cordialement

[orpheus]

Bonsoir gigi68,

concernant le script, je comprends pas d'où viennent tous ces problèmes de couleurs car de mémoire j'avais eu ce script sur ce forum de support.

J'ai essayé ton script, il a effectivement modifier des couleurs mais pas les bonnes ... Le texte « afficher dans la page de recherche », reste blanc :

[demeter1]

Bonjour Orpheus,

en passant via le outil du navigateur, ce css fonctionne

Code:

a.button1 {
    color: black!important;
}

[orpheus]

Je viens d'essayer ton css Demeter1, je confirme qu'il a solutionné mon problème.
Merci pour ton aide !