modifiche search box

[web0x]

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:

<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

[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

[web0x]

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]

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

  style="font-size:0.9em"

0.9em l'ho messo d'esempio

[web0x]

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

  style="font-size:0.9em"

0.9em l'ho messo d'esempio

Se volessi aggiungere una regola Css come sarebbe?

[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

[web0x]

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]

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]

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!

[web0x]

Ciao scusate se riapro il topic ma avrei ancora qualche domanda da fare. Ho notato che molte persone usano per fare il box testo e il pulsante questi richiami css input[type="text"] e input[type="submit"] che differenza c'è dall'usare semplicemente il richiamo dell'id? Inoltre mi chiedevo questo codice name="esempio" presente nei codici assegna un nome ad un elemento giusto? Ma se è presente <button type="submit" ha senso inserire name="submit" nella stessa riga di codice? Ho scoperto anche che esiste un codice javascript per inserire il testo dentro l'input (value="Cerca..." onfocus="if (this.value == 'Cerca...') this.value = '';" onblur="if (this.value == '') this.value = 'Cerca...';") secondo voi è meglio usare questo considerando il resto del codice base che avevo postato all'inizio del topic o meglio utilizzare placeholder come mi avete detto? C'è differenza tra i due modi o sono solo linguaggi differenti?