- This topic has 50 replies, 3 voices, and was last updated 3 years, 7 months ago by Tom.
-
AuthorPosts
-
June 26, 2020 at 3:29 pm #1343125Pedro
Hola Tom! Espero que estés muy bien.
Quisiera que por favor me ayudes con una última cosa. Estoy implementando una búsqueda con ajax en mi sitio, y el plugin que usaré es este:
https://wordpress.org/plugins/advanced-woo-search/
Sin embargo, me gustaría que la barra de búsqueda que el plugin coloca en mi sitio (por medio de shortcode con hook) se viera lo más parecida a la que me ayudaste a hacer.
Aquí te dejo el CSS de la barra de búsqueda que actualmente tengo en mi sitio:
#primary-menu { margin-left: auto; } .main-navigation .searchform { order: 2; margin-right: auto; position: relative; } .main-navigation .searchform button svg { width: 1em; height: 1em; } .main-navigation .searchform button { position: absolute; right: 0; background: transparent; color: #232f3e; padding: 0 10px; height: 38px; line-height: 38px; } .main-navigation .searchform input[type="text"] { font-size: 15px; font-weight: 400; padding-right: 50px; box-sizing: border-box; width: 340px; max-width: 100%; padding: 0 16px; height: 38px; border-radius: 3px; } .main-navigation .navigation-branding { margin-right: 0; } .main-navigation .mobile-bar-items { order: 3; } .main-navigation .searchform svg.mobile-svg { display: none; position: absolute; width: 1em; height: 1em; left: 10px; top: calc(50% - 0.5em); color: #888; } @media (max-width: 768px) { .main-navigation .searchform svg.mobile-svg { display: block; } .main-navigation .searchform { order: 10; width: 100%; margin: 10px; margin-top: 0px; text-align: center; } .main-navigation .searchform input[type="text"] { font-size: 15px; font-weight: 400; max-width: 100%; width: 100%; padding-left: 36px; height: 40px; border-radius: 3px; } .main-navigation .searchform input[type="submit"] { display: none; } .mobile-bar-items.wc-mobile-cart-items { margin-left: auto; } .main-navigation .searchform button { display: none; } }
La nueva barra de búsqueda estoy intentando personalizarla en otro sitio, pero no he podido.
Puedes ver el sitio y la nueva barra de búsqueda aquí: https://compralibros.co/
Me gustaría implementar la nueva barra de búsqueda en este otro sitio: https://www.rebajaslocas.com/
Si no es mucha molestia, podrías ayudarme con esta personalización?
¡Muchas gracias!
June 27, 2020 at 7:46 am #1343596DavidStaffCustomer SupportHi there,
can you start a new topic with a link to the site with the AWS Search widget in place and an example of how you want it to look. It may be out of our scope or ability but we will take a look and let you know.
June 30, 2020 at 8:21 pm #1347659PedroHola! He colocado esta barra de búsqueda en un nuevo sitio: https://mejorapress.com/
Sin embargo en la versión móvil no logra verse bien, el menú no está bien ubicado.
El código CSS que usé en este nuevo sitio es el que envié en el mensaje anterior.
¿Pueden ayudarme?
¡Gracias!
July 1, 2020 at 9:56 am #1348555TomLead DeveloperLead DeveloperThis should fix it:
.main-navigation.has-branding .menu-toggle { margin-left: auto; }
July 1, 2020 at 10:34 am #1348614PedroHola Tom! Funcionó perfectamente.
Una última pregumta, el siguiente CSS debería quitarlo verdad?
#primary-menu { margin-left: auto; }
¡Gracias!
July 1, 2020 at 10:51 am #1348631PedroEs más la pregunta sería: Teniendo en cuenta que este nuevo sitio solo es un blog (que no usa WooCommerce) el CSS sería el mismo?
.main-navigation.has-branding .menu-toggle { margin-left: auto; } .main-navigation .searchform { order: 2; margin-right: auto; position: relative; } .main-navigation .searchform button svg { width: 1em; height: 1em; } .main-navigation .searchform button { position: absolute; right: 0; background: transparent; color: #32373c; padding: 0 10px; height: 38px; line-height: 38px; } .main-navigation .searchform input[type="text"] { font-size: 15px; font-weight: 400; padding-right: 50px; box-sizing: border-box; width: 300px; max-width: 100%; padding: 0 16px; height: 38px; border-radius: 3px; } .main-navigation .navigation-branding { margin-right: 0; } .main-navigation .mobile-bar-items { order: 3; } .main-navigation .searchform svg.mobile-svg { display: none; position: absolute; width: 1em; height: 1em; left: 10px; top: calc(50% - 0.5em); color: #888; } @media (max-width: 768px) { .main-navigation .searchform svg.mobile-svg { display: block; } .main-navigation .searchform { order: 10; width: 100%; margin: 10px; margin-top: 0px; text-align: center; } .main-navigation .searchform input[type="text"] { font-size: 15px; font-weight: 400; max-width: 100%; width: 100%; padding-left: 36px; height: 40px; border-radius: 3px; } .main-navigation .searchform input[type="submit"] { display: none; } .mobile-bar-items.wc-mobile-cart-items { margin-left: auto; } .main-navigation .searchform button { display: none; } }
July 1, 2020 at 1:27 pm #1348770TomLead DeveloperLead DeveloperThat CSS is likely still necessary.
If there’s no WC, you can likely remove the CSS referencing
wc-mobile-cart-items
.July 1, 2020 at 1:52 pm #1348787PedroMuchas gracias Tom!
July 1, 2020 at 2:50 pm #1348816TomLead DeveloperLead DeveloperNo problem 🙂
July 2, 2020 at 7:39 pm #1350046PedroHola de nuevo! Jaja
Tom, esta barra de búsqueda muestra también las páginas en los resultados.
Me gustaría que solo muestre las entradas del blog, sabes cómo puedo hacerlo?
Gracias!
July 3, 2020 at 9:23 am #1350820TomLead DeveloperLead DeveloperHi there,
Where’s the search bar coming from in this case? A plugin or custom code?
July 3, 2020 at 9:29 am #1350831PedroHola Tom! Fue la barra de búsqueda que me ayudaste a crear con HTML y CSS.
La barra de búsqueda está en este sitio: https://mejorapress.com/
Sin embargo, en las búsquedas me está mostrando páginas y entradas del blog.
Me gustaría que solo muestre las entradas del blog.
Este fue el hook que me diste:
<form role="search" method="get" id="searchform" class="searchform" action="https://mejorapress.com/"> <div> <svg class="mobile-svg" aria-hidden="true" data-prefix="fas" data-icon="search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path> </svg> <label class="screen-reader-text" for="s"></label> <input type="text" value="" name="s" id="s" placeholder="¿Qué estás buscando?"> <button><svg aria-hidden="true" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path> </svg></button> </div> </form>
July 3, 2020 at 2:29 pm #1351059TomLead DeveloperLead DeveloperIn the code, find this line:
<input type="text" value="" name="s" id="s" placeholder="¿Qué estás buscando?">
And add this under it:
<input type="hidden" post_type="post">
July 6, 2020 at 9:09 pm #1354673PedroHola Tom!
He añadido el código pero no ocurrió nada, en los resultados de búsqueda se siguen mostrando las páginas del sitio.
Solo quiero que se muestren las entradas del blog.
July 7, 2020 at 3:15 am #1354956DavidStaffCustomer SupportTry this instead:
<input type="hidden" name="post_type" value="post">
-
AuthorPosts
- You must be logged in to reply to this topic.