Avisos
Vaciar todo
Preguntas sobre WordPress
14
Respuestas
4
Usuarios
0
Reactions
539
Visitas
Topic starter
Saludos, quien me puede ayudar a crear los códigos HTML para un formulario de búsqueda como el que deje en la imagen de abajo.
URL del sitio: Contenido solo visible a usuarios registrados
Respondido : 04/07/2017 9:09 pm
Hola
Supongo que te refieres a estilizarlo un poco, lo más práctico es que trabajes sobre el html que ya tienes, en tu caso puedes mejorar un poco la apariencia con :
#searchform{
margin-bottom: 20px;
}
#searchform #s{
padding:8px 12px;
border:none;
}
#searchsubmit{
width:100px;
border-radius: 0!important;;
border:none;
background:black;
color:white;
padding:9px;
}
Coloca este código al final del archivo style.css de tu theme
Si quieres un icono de lupa, tendría que tu theme cargar ya una fuente de iconos, podrías también revisar:
https://decodecms.com/insertar-una-fuente-de-iconos-en-wordpress/
Sin embargo tendrías que hacer modificaciones adicionales.
Saludos.
Respondido : 04/07/2017 9:47 pm
Topic starter
Estoy algo confuso, donde pongo esos códigos, si coloco esos códigos lograre los mismos que se visualizan en la imagen que mande ?
Respondido : 04/07/2017 10:01 pm
Hola
Puedes probar colocando este código CSS al final del archivo :
/transparencia/wp-content/themes/alyoum/style.css
De manera general no será posible que tengas un icono de lupa para esto tendrías que tener una fuente de íconos como parte de tu theme, revisa el link que te envié anteriormente.
Con los estilos que te envié tu formulario se verá mas o menos como se muestra en la siguiente imagen adjunta.
Nota: Tienes que refrescar el navegador para ver los cambios luego de poner el código CSS.
Saludos
Respondido : 04/07/2017 10:13 pm
Topic starter
Hola pude colocarlo como me dicen, seguí el hilo que me comentaban y logre poner este código en la función del theme pero quiero que el icono aparezca en cuadro negro que tiene este codigo.
Ahora como pongo que este código me salga en el cuadro negro del formulario de busqueda ya que lo coloco y me sale fuera despegado o del buscador, quiero que salga como en la imagen adjunta.
Puse este codigo en function del theme
add_action( 'wp_enqueue_scripts', 'fonts_style_sheet' );
function fonts_style_sheet(){
wp_enqueue_style( 'custom-stylesheet', get_stylesheet_directory_uri() . '/css/font-awesome.min.css');
}
Respondido : 05/07/2017 2:41 am
Hola,
El código no parece estar funcionando, no veo que se muestre la lupa. De donde lo obtienes?
Respondido : 05/07/2017 3:26 am
Topic starter
La plantilla tiene una fuente de iconos como parte del theme, lo que no se es como integrarla a este código que pongo mediante fuente HTML en la plantilla, para que se vea como la imagen adjunta.
Respondido : 05/07/2017 3:35 am
Hola.
Añadelo después de la linea
Seria algo como esto:
Después de eso veremos cómo podemos centrar con algo de CSS para que se muestre donde tu quieres.
Otra opción más sencilla es que utilices un plugin, por ejemplo:
https://es.wordpress.org/plugins/add-search-to-menu/
un saludo
Respondido : 05/07/2017 11:52 am
Topic starter
Hola pepe, coloque el código como indicas y se me Genera la imagen que le dejo adjunta, pero realmente quiero lograr que la lupa salga dentro de un cuadro al lado del formulario de búsqueda como se muestra en esta web http://www.pasp.gob.do/.
Necesito que se vea como el que se visualiza en el capture 2, es un patrón que me exigen, espero contar con ustedes y gracias.
Respondido : 05/07/2017 3:14 pm
Hola.
Añade lo siguiente a tu archivo de estilos css:
.fa-search {
background-color:#181818;
padding:10px;
}
Un saludo
Respondido : 05/07/2017 5:00 pm
Topic starter
Perfecto, así quedo, hay un detalle por que cuando pongo algo para buscar y le doy a la lupa no me funciona la búsqueda, ver en la web http://www.pasp.gob.do/transparencia/.
Respondido : 05/07/2017 5:24 pm
Hola
No funciona el click porque no es un boton ni un enlace, elimina el código:
(también tu código CSS asociado)
En su lugar coloca:
Esto es un botón con el valor de bucar (Según fontawesome), en el ar´ticulo anterior que te envié en el punto 4 se detalla esto.
Nota: No dejes espacio entre la caja de búsqueda y este input porque de lo contrario te saldrá un espacio entre ambos.
Luego agrega el siguiente código CSS al final de tu archivo style.css
#searchform input[type="submit"]{
font-family:fontawesome;
height: 31px;
width:36px;
border:none;
background-color:black;
color:white;
}
Este último código hace verse el icono cuando le asignas el tipo de letra fontawesome.
Saludos.
Respondido : 05/07/2017 7:51 pm
Topic starter
Saludos, gracias me ha salido todo perfecto, una ultima consulta sobre este tema, como podria colocar este mismo formulario de búsqueda dentro del menú de la versión móvil de mi sitio web http://www.pasp.gob.do/transparencia
Respondido : 07/07/2017 12:46 am
Hola
En este caso se complica más, ya que veo que el formulario de búsqueda en movil es otro y además tiene funcionalidad añadida con el menú.
Saludos.
Respondido : 07/07/2017 5:30 pm
