Crear formulario de brusquedad  

 
Juan carlos
 Juan carlos
Usuario experto

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

Citar
Respondido : 04/07/2017 10:09 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

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.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 04/07/2017 10:47 pm

Cursos Gratuitos WordPress

Juan carlos
 Juan carlos
Usuario experto

Estoy algo confuso, donde pongo esos códigos, si coloco esos códigos lograre los mismos que se visualizan en la imagen que mande ?

ResponderCitar
Respondido : 04/07/2017 11:01 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

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

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 04/07/2017 11:13 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Juan carlos
 Juan carlos
Usuario experto

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');
}

ResponderCitar
Respondido : 05/07/2017 3:41 am
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola,

El código no parece estar funcionando, no veo que se muestre la lupa. De donde lo obtienes?

Si nuestra ayuda te ha sido útil, déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 05/07/2017 4:26 am

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Juan carlos
 Juan carlos
Usuario experto

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.

ResponderCitar
Respondido : 05/07/2017 4:35 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

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

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 05/07/2017 12:52 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Juan carlos
 Juan carlos
Usuario experto

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.

ResponderCitar
Respondido : 05/07/2017 4:14 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola.

Añade lo siguiente a tu archivo de estilos css:

.fa-search {
  background-color:#181818;
  padding:10px;
}

Un saludo

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 05/07/2017 6:00 pm

Cursos Gratuitos WordPress

Juan carlos
 Juan carlos
Usuario experto

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/.

ResponderCitar
Respondido : 05/07/2017 6:24 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

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.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 05/07/2017 8:51 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Juan carlos
 Juan carlos
Usuario experto

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

ResponderCitar
Respondido : 07/07/2017 1:46 am
Jhon
 Jhon
Soporte CMS Webempresa Moderator

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.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 07/07/2017 6:30 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Por favor Iniciar Sesión o Registro