Changer couleur des résultats de recherche dans la Toolbar

2 participants

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

Résolu Changer couleur des résultats de recherche dans la Toolbar

Message par orpheus Sam 7 Sep 2019 - 20:00

Version du forum : Phbb2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://empiredesouvenirs.forumactif.com/

Bonjour à tous ! ^^

Actuellement entrain de faire plusieurs essai sur mon forum à propos de la Toolbar, je me retrouve confronté à un petit soucis, voila lorsque j'effectue des recherches via celle-ci, les résultats apparaissent en couleur blanc.

Changer couleur des résultats de recherche dans la Toolbar Blanc110

Je souhaiterai savoir comment faire pour que les résultats apparaissent avec une couleur noir car du blanc sur du blanc c'est pas top pour la lecture ...

Merci.
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: Changer couleur des résultats de recherche dans la Toolbar

Message par Neptunia Sam 7 Sep 2019 - 20:07

Neptunia

Neptunia
Membre actif

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

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

Résolu Re: Changer couleur des résultats de recherche dans la Toolbar

Message par orpheus Sam 7 Sep 2019 - 20:21

Je te remercie pour ton aide Neptunia ! Smile
J'ai testé l'ajout via la feuille de CSS ça fonctionne mais j'ai lu dans le fil qu'il y a moyen de modifier la couleur directement dans le Javascript également.

Ne maîtrisant pas trop tout ce qui est codage et ne souhaitant pas faire de bêtises, pourrais tu me dire comment faire pour le modifier directement dedans ? Car sur le topic, tu parles d'un ajout à la ligne 199 mais il semblerai que j'en ai pas autant dans le mien.

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_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 ton aide.

Ps : je souhaiterai savoir aussi, hormis le fait de rajouter des lignes supplémentaires, le fait de faire l'ajout dans le CSS ou le Javascript a t-il une influence quelconque sur le forum ?
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: Changer couleur des résultats de recherche dans la Toolbar

Message par Neptunia Sam 7 Sep 2019 - 20:43

Effectivement ton code a moins de sauts de ligne que nous.

Colle la ligne supplémentaire juste après ceci (ligne 158 et 159) :
Code:
                  '.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); }'+





Concernant le P.S. ça ne fait aucune différence. C'est juste une question de goût ! les puristes diront que le CSS n'a rien à faire dans un code HTML ou un script. D'autres comme moi diront que c'est mieux d'avoir tout au même endroit, plus facile à maintenir et à supprimer.

Ca présente aussi l'intérêt d'épargner la feuille CSS qui a une taille maximale (64 kio). Les scripts javascript ont la même limite, mais elle est plus rarement atteinte.
Neptunia

Neptunia
Membre actif

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

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

Résolu Re: Changer couleur des résultats de recherche dans la Toolbar

Message par orpheus Sam 7 Sep 2019 - 22:00

Je viens de procéder à l'ajout dans mon Javascript (ça fait mieux de tout mettre au même endroit Mr. Green), tout fonctionne nickel.
Merci pour ton aide et pour tes explications Smile
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