modifiche search box

**web0x** · 24-08-2016, 00:04

Salve a tutti non so se postare questa discussione nella sezione html o css quindi la posterï¿½ in entrambe e aspetto che qualche moderatore mi faccia sapere cosa devo fare la prossima volta. Allora vi spiego, ho da poco scaricato una piattaforma dal nome vbulletin dove ï¿½ presente un search box che vorrei personalizzare in quanto attualmente non mi soddisfa. Mi sarebbe molto utile se qualcuno di voi mi potesse aiutare. Ho trovato molti esempi nel web ma ho paura di commettere qualche sbaglio che magari possa "rompere" il codice. Vorrei ottenere un search box simile all'allegato che inserisco.
In pratica, come vedete dall'allegato vorrei l'input a sinistra (del testo) con il testo all'interno che sparisce appena ci clicchi per digitare la ricerca e il pulsante affiancato a destra con l'icona di ricerca che vorrei aggiungere con fontawesome (la libreria delle icone web) e quindi rimuovere il type image con il codice dell'immagine. Ho inoltre bisogno dei codici css fatti ad hoc per il search box modificato. (Se potete aiutarmi posso valutare anche di pagarvi il lavoro anche se non sembra particolarmente difficile)
Poi ho notato che il codice ha nei div sia il div id che il div class come mai contiene tutti e due? Non ï¿½ meglio utilizzare solo l'id o il class? Quale ï¿½ meglio dei due?
Ah dimenticavo il codice html del search box ï¿½ questo:

codice:

<vb:if condition="$vboptions['enablesearches']">
        <div id="globalsearch" class="globalsearch">
            <form action="search.php?{vb:raw session.sessionurl}do=process" method="post" id="navbar_search" class="navbar_search">
                <vb:comment><input type="hidden" name="s" value="{vb:raw session.sessionurl}" /></vb:comment>
                <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
                <input type="hidden" name="do" value="process" />
                <input type="text" value="" name="query" class="textbox" tabindex="99"/>
                <input type="image" class="searchbutton" src="{vb:stylevar imgdir_button}/search<vb:if condition="$stylevar['textdirection'] == 'rtl'">_rtl</vb:if>.<vb:if condition="is_browser('ie') AND !is_browser('ie', 7)">gif<vb:else />png</vb:if>" name="submit" onclick="document.getElementById('navbar_search').submit;" tabindex="100"/>
            </form>
        </div>
    </vb:if>

Attendo riscontro, grazie.
searchbox.jpg

**web0x** · 24-08-2016, 15:11

Originariamente inviata da m4rko80

Id o quant'altro non usato nell'esempio li puoi levare.
Così è fisso a 40px in altezza, per la locazione sulla destra prova a mettere il float nel css in #searchContent

codice:

<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">




<style>
::-webkit-input-placeholder {color: #E1CCAF;}
:-moz-placeholder {color: #E1CCAF;  }
::-moz-placeholder {color: #E1CCAF;  }
:-ms-input-placeholder {  color: #E1CCAF;  }


#searchContent {
    
}
#searchInput {
    color: #E1CCAF;
    height: 40px;
    font-size: 1.2em;
}
#searchButton:hover {
    border-color: #ccc;
}
#searchButton {
    background: #DA6D0E;
    border: 1px solid #DA6D0E;        
    color: #fff;
    font-weight: bold;
    height: 40px;
    cursor: pointer;
    position: relative;
    left: -5px;
    top:3px;
}
</style>
</head>
<body>


 <div id="searchContent">
            <form action="search.php?{vb:raw session.sessionurl}do=process" method="post">
                <vb:comment><input type="hidden" name="s" value="{vb:raw session.sessionurl}" /></vb:comment>            
                <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
                <input type="hidden" name="do" value="process" />
                <input type="text" id="searchInput" value="" name="query" tabindex="99" placeholder="Cerca..."/>             
                <button type="submit" id="searchButton" name="submit" tabindex="100"><i class="fa fa-2x fa-search"></i></button>            
            </form>
        </div>


    </body>
    </html>

Come detto prima senza aver la pagina reale, e' difficile fare una cosa ad-hoc. Devi sistemare nel caso un pò i css

Grazie, finalmente ho il search che volevo. Mi sei stato di grande aiuto. Ho ancora qualche domanda da farti poi ho finito. Come mai bisogna sistemare il pulsante con la posizione relative e non si "attacca" da solo al box di sinistra? E' normale o dipende dal codice html? Inoltre sai come posso tramite i css diminuire la grandezza dell'icona fontawesome tramite i px? Grazie ancora.

**m4rko80** · 24-08-2016, 16:15

Il fatto dei margini o quant'altro sono regola default html. Ovviamente si possono personalizzare come ho fatto.
Solitamente gli elementi sono così attaccati.
Font-awesome di defautl ha l'icona più piccola, basta levare la classe fa-2x QUI ci sono gli esempi delle sue classi.
Ho messo fa-2x per ingrandire.
EDIT:
puoi modificare la dimensione dell'icona agento da css sul font-size per il tag <i> del caso.
In questo caso per esempio potrebbe far comodo un ID piuttosto che eroneamente settare un font per la classe .fa o fa-2x la quale agirebbe su tutte le classi uguali presenti in pagina

**web0x** · 24-08-2016, 18:20

Originariamente inviata da m4rko80

Il fatto dei margini o quant'altro sono regola default html. Ovviamente si possono personalizzare come ho fatto.
Solitamente gli elementi sono così attaccati.
Font-awesome di defautl ha l'icona più piccola, basta levare la classe fa-2x QUI ci sono gli esempi delle sue classi.
Ho messo fa-2x per ingrandire.
EDIT:
puoi modificare la dimensione dell'icona agento da css sul font-size per il tag <i> del caso.
In questo caso per esempio potrebbe far comodo un ID piuttosto che eroneamente settare un font per la classe .fa o fa-2x la quale agirebbe su tutte le classi uguali presenti in pagina

Ciao, grazie per le dritte! Come posso fare per usare il font-size per il tag <i>?

**m4rko80** · 24-08-2016, 18:25

Aggiungendo una regola di css o nel tag stesso con l'attributo style

codice:

  style="font-size:0.9em"

0.9em l'ho messo d'esempio

**web0x** · 24-08-2016, 18:29

Originariamente inviata da m4rko80

Aggiungendo una regola di css o nel tag stesso con l'attributo style

codice:

  style="font-size:0.9em"

0.9em l'ho messo d'esempio

Se volessi aggiungere una regola Css come sarebbe?

**m4rko80** · 24-08-2016, 18:38

Ci sarà un foglio si stile. Sara un file del tipo .css (l'estensione) e di solito hanno nomi tipo style.css main.css ... i più comuni ed usati. Oppure nell'html stesso aggiundendo un tag style http://www.w3schools.com/tags/tag_style.asp

**web0x** · 24-08-2016, 18:45

Originariamente inviata da m4rko80

Ci sarà un foglio si stile. Sara un file del tipo .css (l'estensione) e di solito hanno nomi tipo style.css main.css ... i più comuni ed usati. Oppure nell'html stesso aggiundendo un tag style http://www.w3schools.com/tags/tag_style.asp

Si so dove aggiungere i Css ma non so come deve essere il richiamo Css per aggiungere font-size all'icona. Ho capito che il tag è <li> però a cosa lo devo unire?

**m4rko80** · 25-08-2016, 09:00

Dai un id all'icona, così com'è aggiungendo id="searchIcon" per esempio.
Nel css dovrai aggiungere #searchIcon {font-size:0.9em;} (0.9em o quel che sarà meglio usare)

**web0x** · 25-08-2016, 11:56

Originariamente inviata da m4rko80

Dai un id all'icona, così com'è aggiungendo id="searchIcon" per esempio.
Nel css dovrai aggiungere #searchIcon {font-size:0.9em;} (0.9em o quel che sarà meglio usare)

Ok, grazie. Mi sei stato di grande aiuto!

Discussione: modifiche search box

Strumenti discussione

Ricerca discussione

Visualizza

modifiche search box

Permessi di invio