[Tip]Cambiar estilo del buscador y Botones

Cambiar estilo del buscador y Botones

Descripcion:Con este tip podras cambiar el feo estilo del buscador del theme default y dejar un estilo elegante usando css3.

Show content

Vamos al index.template.php y buscamos:

Code: [Select]

<div class="news normaltext">
<form id="search_form" action="', $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '">
<input type="text" name="search" value="" class="input_text" />&nbsp;
<input type="submit" name="submit" value="', $txt['search'], '" class="button_submit" />
<input type="hidden" name="advanced" value="0" />';

// Search within current topic?
if (!empty($context['current_topic']))
echo '
<input type="hidden" name="topic" value="', $context['current_topic'], '" />';
// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))
echo '
<input type="hidden" name="brd[', $context['current_board'], ']" value="', $context['current_board'], '" />';

echo '</form>';
Modificamos por:

Code: [Select]

<div class="news normaltext">
<form id="form-wrapper" action="', $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '">
<input type="text" name="search" value="" class="input_text" />&nbsp;
<input type="submit" name="submit" value="', $txt['search'], '" class="button_submit" />
<input type="hidden" name="advanced" value="0" />';

// Search within current topic?
if (!empty($context['current_topic']))
echo '
<input type="hidden" name="topic" value="', $context['current_topic'], '" />';
// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))
echo '
<input type="hidden" name="brd[', $context['current_board'], ']" value="', $context['current_board'], '" />';

echo '</form>';
Ahora vamos al index.css y agregamos al final.

Code: [Select]

/* search form by Zoom
------------------------------------------------------- */
#form-wrapper
{
    width: 250px;
padding: 8px;
margin-top: 105px;
overflow: hidden;
border-width: 1px;
border-style: solid;
    border-color: #dedede #bababa #aaa #bababa;
-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: #f6f6f6;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}
Ahora para cambiar el estilo del boton vamos al index.css y buscamos:

Code: [Select]

.button_submit, .button_reset
{
   background: #cde7ff url(../images/theme/submit_bg.png) no-repeat;
   border: 1px solid #aaa;
   cursor: pointer;
   font-weight: normal;
Remplazamos por este:

Code: [Select]

.button_submit, .button_reset
{
background: #377ad0;
background: -moz-linear-gradient(top, #52a8e8 0%, #377ad0 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52a8e8), to(#377ad0));
color: #FFF;
text-shadow: 0 -1px 1px #3275bc;
border: 1px solid #2e69a3;
-moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
-webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
font-size: 12px;
font-weight: bold;
padding: 3px 6px;
}
Buscamos y eliminamos:

Code: [Select]

input:hover, textarea:hover, button:hover, select:hover
{
   border: 1px solid #454545;
Buscamos:

Code: [Select]

.button_submit:hover, .button_reset:hover
{
   border: 1px solid #aaa;
   background: url(../images/theme/submit_bg.png) no-repeat 0 -140px #cde7ff;
Remplazamos por:

Code: [Select]

.button_submit:hover, .button_reset:hover
{
border: 1px solid #2a73a6;
background: #206bcb;
background: -moz-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3e9ee5), to(#206bcb));
}

Excelente!

+1

excelente tip me gusta como queda +1

Lindo diseño para darle estilo a la caja del box!
Graciiiias! +1

Zoom Una pregunta

(../images/theme/submit_bg.png)  ese codigo que saque de ahi hace que haiga lo que est aalrededor de buscar

http://img832.imageshack.us/img832/109/buscadorg.png

Zoom Una pregunta

(../images/theme/submit_bg.png)  ese codigo que saque de ahi hace que haiga lo que est aalrededor de buscar

http://img832.imageshack.us/img832/109/buscadorg.png

La imagen submit_bg.png es el color de los botones Publicar y Previsualizar en la seccion de crear un post o responder.

Lo que esta alrededor de buscar es este codigo:

Code: [Select]

/* search form by Zoom
------------------------------------------------------- */
#form-wrapper
{
    width: 250px;
padding: 8px;
margin-top: 105px;
overflow: hidden;
border-width: 1px;
border-style: solid;
    border-color: #dedede #bababa #aaa #bababa;
-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: #f6f6f6;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}

Me sirvio, lo tengo color azul O:O te llevas mi aplauso:$

Muy bueno el tip, pero no es necesario modificar las clases del botón submit, se podría haber hecho una nueva para el puro botón del buscador.

Saludos y buen tip!

se ve muy bien

chevere chevere me gusta el estilo si cambia pero a mi me sale el boton casi en el centro de la pag no alineado a la derecha :S solo le deje el estilo si modificar el index.themplate.php