[PhpBB3] Problème couleur avec Live Search

3 participants

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

Résolu [PhpBB3] Problème couleur avec Live Search

Message par orpheus Ven 8 Nov 2019 - 20:23

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 :
[PhpBB3] Problème couleur avec Live Search Nkj1

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

orpheus
*****

Messages : 736
Inscrit(e) le : 21/05/2009

https://empiredesouvenirs.forumactif.com
orpheus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [PhpBB3] Problème couleur avec Live Search

Message par gigi68 Ven 8 Nov 2019 - 22:13

Bonsoir orpheus,

Il semblerais que plusieurs codes de couleurs sois mal renseigné ! #FFF , #333, #69C; Neutral
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
gigi68

gigi68
****

Masculin
Messages : 283
Inscrit(e) le : 31/05/2014

https://motardsdoubs.forumactif.com/
gigi68 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [PhpBB3] Problème couleur avec Live Search

Message par orpheus Ven 8 Nov 2019 - 22:40

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 :
[PhpBB3] Problème couleur avec Live Search 17rr
orpheus

orpheus
*****

Messages : 736
Inscrit(e) le : 21/05/2009

https://empiredesouvenirs.forumactif.com
orpheus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [PhpBB3] Problème couleur avec Live Search

Message par demeter1 Ven 8 Nov 2019 - 23:48

Bonjour Orpheus,

en passant via le outil du navigateur, ce css fonctionne
Code:
a.button1 {
    color: black!important;
}
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [PhpBB3] Problème couleur avec Live Search

Message par orpheus Sam 9 Nov 2019 - 1:28

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

orpheus
*****

Messages : 736
Inscrit(e) le : 21/05/2009

https://empiredesouvenirs.forumactif.com
orpheus 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