Casella di ricerca in fondo al forum


Tutorial Casella di ricerca in fondo al forum

Messaggio Da Niko Mar 23 Feb 2021 - 3:17

Casella di ricerca in fondo al forum


Con questo codice, saremo in grado di creare una casella di ricerca alla fine del forum, consentendo così maggiore comodità e facilità agli utenti del tuo forum.

Installazione

Andiamo verso Pannello di amministrazione ► Moduli ► HTML & Javascript ► Gestione del codice Javascript, assicuriamoci che la Gestione del codice Javascript sia attivata e creiamone uno nuovo con queste impostazioni:
  • Titolo: a tua scelta
  • Dove:
    1. Nell'indice: il codice verrà applicato all'indice del forum.
    2. Sul portale: il codice verrà applicato al portale del forum.
    3. Nei forum secondari (Forum): il codice verrà applicato nei forum e nei forum secondari.
    4. Informazioni sugli argomenti: il codice verrà applicato agli argomenti del forum.
    5. Nella galleria: il codice verrà applicato alla tua galleria di immagini.
    6. Su tutte le pagine: il codice verrà applicato su tutte le pagine del forum. (Seleziona questa opzione)

  • Codice:
    Codice:
            $(document).ready(function(){
    var searchLabel = "Cerca nel forum";
    var searchPlaceholder = "Ricerca...";

                            $('body').append('<br><center><div><span id="pesqButton">'+searchLabel+'</span><div id="formPesq"><form target="_blank" action="/search"><input type="text" id="pesquisaCaixa" name="search_keywords"><input id="pesquisaButton" type="submit" value="OK"></form></div><br></div></center>');$('#pesquisaCaixa').val(searchPlaceholder);
                            $('#pesquisaCaixa').focus(function(){if($(this).val() == "Buscar..."){$(this).val('');}});
                            $('#pesquisaCaixa').blur(function(){if($(this).val() == ""){$(this).val('Buscar...');}});
                            $('#formPesq').hide();$('#pesqButton').click(function(){$('#formPesq').focus();$('#formPesq').slideToggle();movimento('formPesq');});});
                            function movimento(para) {jQuery('html,body').animate(
                            {scrollTop: jQuery("#"+para).offset().top}, 500);}


Modifiche al codice Javascript

Puoi modificare due variabili di testo:
  • var searchLabel = "Cerca nel forum"; per il titolo del campo di ricerca
  • var searchPlaceholder = "Ricerca..."; per il testo visualizzato di sfondo nella casella di ricerca


Foglio di stile CSS

Andiamo verso Pannello di amministrazione ► Visualizzazione ► Immagini e CSS ► Foglio di stile CSS e aggiungiamo:
Codice:
        #pesquisaButton:hover{background: rgba(50, 50, 50, 0.9);}
                      #pesquisaButton{
                margin-left: 10px !important;padding: 5px;cursor:pointer;padding-left: 12px;border: 1px solid black;background: rgba(50, 50, 50, 0.7);padding-right: 9px;font-weight: 800;}
                      #pesquisaCaixa{height: 30px;background: #121212;color: white;border-top:0px;
                      border-right:0px;border-bottom:0px;border-left: 2px solid #181818;font-weight: 800;font: arial;
                      width:300px;}
                      #formPesq{max-width:400px;padding:14px;margin-top:7px;border: 2px solid #181818;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;background: #252525;}
                      #pesqButton:hover{color:black;adding: 9px;border-top: 2px solid #121212;border-left: 2px solid #181818;
                      border-right: 2px solid ##121212;color: white;font-weight:bold;font: verdana;cursor:pointer;
                      border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;background: #181818;
                transition-duration: 2s;
                transition-duration: 4s;
                transition-duration: 6s;
                transition-timing-function: linear;
                transition: color 2s ease 3s;
                -webkit-transition: all 2s linear;
                -moz-transition: all 2s linear;
                -o-transition: all 2s linear;
                transition: all 2s linear; 
                }
                      #pesqButton{padding: 9px;border-top: 2px solid #181818;border-left: 2px solid #181818;
                      border-right: 2px solid #181818;color: #fafafa;font-weight:bold;font: verdana;cursor:pointer;
                      border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;background: #121212;
                margin-top: -10px !important;}

Questa parte è interamente personalizzabile a seconda delle proprie esigenze e secondo le regole del CSS


Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 24
Messaggi : 8233
Località : Provincia di Varese

Visualizza il profilo https://www.openstudio.one
Niko è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Torna in alto


 
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.