DIY: Cómo personalizar la barra de navegación del cuadro de búsqueda en la Tesis

El tema de tesis para Wordpress creado por Temas de bricolaje funciona permitiendo a los usuarios personalizar su diseño y el aspecto general y sin ningún tipo de HTML o conocimientos previos CSS. Cada área del tema tiene su propia sección en el panel de control de la tesis donde los usuarios pueden cambiar el tipo de letra, tamaño y color. Además de personalizar el número de columnas tiene un blog de Wordpress, los usuarios también pueden personalizar sus barras de búsqueda en el menú de navegación. Para personalizar el cuadro de búsqueda en la tesis, que necesita para insertar unas pocas líneas de código en el cuadro de CSS en Tesis y cambiar los colores a su gusto.

Instrucciones

1 Ingrese a su panel de WordPress utilizando su nombre de usuario y contraseña. Haga clic en el enlace "Apariencia" en el menú de la izquierda y activar el tema de tesis si no lo ha hecho ya.

2 Abra el archivo de "funciones personalizadas" y asegúrese de que tiene el código PHP para el cuadro de búsqueda instalado. Si no tiene instalado el código, puede utilizar el código abajo y construir fuera de él más tarde. Pega el siguiente código en la parte superior de su archivo "funciones personalizadas":

custom_search función () {

// Enter your custom search text here

$ SearchText = "Su búsqueda de texto personalizado";

// Ingrese su costumbre presentar el texto aquí

$ Submittext = "Tu presentar un texto personalizado";

?>

<div id="search_bar">

& Lt; form method = "get" action = "& lt;? Php echo bloginfo (" URL ");?>">

& Lt; p>

& Lt; entrada type = "text" id = valor "text_entry" = "& lt;? Php echo $ searchText;?>" Name = "s" onfocus = "si (this.value == '& lt;? Php echo $ searchText ;?> ') {this.value =' ';} "onblur =" si (this.value ==' ') {this.value =' & lt;? php echo $ searchText;?> ';} "/>

& Lt; input type = "submit" id = valor "search_submit" = "& lt;? Php echo $ submittext;?>" />

& Lt; / p>

& Lt; / form>

& Lt; / div>

<? Php}

3 Sustituir donde dice "su texto de búsqueda personalizada" y "Tu me envíen el texto de encargo" de lo que quiera. Usar la palabra "Buscar" en ambas áreas, por ahora, ya que siempre se puede cambiar más adelante. Guarda el archivo.

4 Abra el archivo CSS y pegar el siguiente código en la parte superior de la página:

.custom #search_bar {background: # 212121; padding: 10px; text-align: center; }

.custom #search_bar #text_entry {background: #efefef; padding: 5px 8 píxeles; frontera: 1px solid # e6e6e6; }

.custom #search_bar #search_submit {background: # 888; padding: 5px 8 píxeles; frontera: #aaa sólido 1px; }

Tenga en cuenta que la etiqueta ".custom #search_bar" dice Tesis, donde se llevarán a cabo estas personalizaciones. Observe los códigos de tres a seis dígitos después de donde dice "background: #" en las líneas anteriores. Estos códigos son los códigos de lo que algunos hexagonales llamada o de color.

5 Cambiar la etiqueta "#search_bar .custom" y el "background: #" etiqueta para cambiar los colores de fondo de la caja de búsqueda. Utilice sitios en línea como "colorcombos.com", "html-color-codes.com" y "html-color-codes.info" para recoger algunas de sus colores preferidos.

6 Cambiar el color del borde, siguiendo las instrucciones en el paso cinco o eliminar por completo, haciendo que el 0px frontera. Mantenga el relleno de la forma en que es menos que le gustaría que mover el cuadro de búsqueda a la derecha o izquierda. Por lo tanto, si desea quitar el borde alrededor de su cuadro de búsqueda sin borrar el código, reemplace donde dice "border: 1px código #hex sólida" con "border: 0px código #hex sólida."

7 Guarde el archivo CSS y una vista previa de su sitio. Prestar atención al color de su cuadro de búsqueda y botón de búsqueda. Si entran en conflicto con el resto de su sitio o si no puede ver el texto de búsqueda personalizada que hizo en el paso 3, es posible que desee volver a su archivo CSS y cambiar los colores de fondo.