Hacer un cajon de busqueda

-evil- 8 May, 2011, 7:14 pm

Hola companeros de Mybb-es quisiera si me apoyaran a como hacer la caja de busqueda como la que tiene implementada mybb-es, ya que veo muchos foros con esa caja pero no encuentro ningun tutorial o plugins.

P.D: encontre una pero no es la que quiero, que sea lo mas parecido a la caja que tiene implementada el foro Big Grin

! ya que me agrado mucho esa caja

P.D: es la caja que esta en el header.

Gustavo R. 8 May, 2011, 8:43 pm

Esto ponlo después de el código del logo en plantilla header

Código PHP:
<?php 

<div id="search">

                    <form action="/search.php" method="post"><fieldset class="noborder"><label for="search_box"><span id="search_left"> </span></label><input name="keywords" id="search_box" onblur="if(this.value=='')this.value='Buscar...';" onclick="if(this.value=='Buscar...')this.value='';" value="Buscar..."  title="Introduce las palabras clave que desees buscar" type="text" /><input value="Iniciar Busqueda" name="submit-search" id="search_button" type="submit" /><input type="hidden" name="action" value="do_search" /></fieldset></form>

                </div> 

Ahora ve a global.css y mete esto al final:

Código PHP:
<?php 

div#search {

    top: 55px;

  right: -5px;

  height: 26px;

  position: absolute;

  display: inline-table;

  float: right;

}

span#search_left {

    background: url(../../../images/search_left.gif) no-repeat;

  cursor: text;

  width: 3px;

  height: 26px;

  display: block;

  position: relative;

  float: left;

  top: 0;

  font-size: 2px;

}

input#search_box {

    background: #fff url(../../../images/search.png) 5px no-repeat;

opacity: 0.8;

  border: 1px solid #705102;

  border-left: 0;

    font-family: Tahoma, 'Trebuchet MS', Arial, sans-serif;

  padding: 5px;

  padding-left: 25px;

  width: 150px;

    height: 14px;

    float: left;

    top: 0;

}

input#search_button {

    background: url(../../../images/search_button.gif) 100% 0% no-repeat; 

    font-family: Tahoma, 'Trebuchet MS', Arial, sans-serif;

    color: #fff;

    border: 0;

    padding: 4px 6px 4px 6px;

    float: left;

    top: 0;

    width: 99px;

    height: 26px;

    cursor: pointer;

}

input#search_button:hover {

    background-position: 100% 100%;

}

Ahora mete estas 3 imagenes en la carpeta images:
[Imagen: search_left.gif]

Y listo

Los créditos son de solstice por que el hizo el tema.

Edit: Se me paso ya te puse la respuesta pero tienes que tener las reglas de soporte:
http://www.mybb-es.com/Anuncio-reglas-ge...de-mybb-es

Por favor ponlas por que a la otra no se te dara soporte Tongue

Última modificación: 8 May, 2011, 8:45 pm por sadnem.

[Imagen: http://i.imgur.com/l7Qimoa.png]