Avisos
Vaciar todo

Edición de Cabecera StoreFront  

 
Francisco
 Francisco
Estimable Member

Hola, acabo de encontrar cómo modificar la cabecera de Storefront, pero sólo el acomodo del logo en el centro y el índice, sin embargo, no he logrado encontrar el tema del tamaño del logo y el acomodo de la caja de búsqueda de productos.

Por lo que mi pregunta son las siguientes:

- Cómo aumentar el tamaño del logotipo
- Quiero acomodar la caja de búsqueda arriba del logo del lado derecho.

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 08/06/2019 9:41 pm
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Francisco,

¿Ya intentaste hacer esos cambios mediante reglas CSS? Creo que esa sería la manera de hacerlo. Si desconoces CSS no t preocupes, podemos ayudarte con ello.

Saludos.

ResponderCitar
Respondido : 08/06/2019 11:37 pm

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

Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Francisco,

¿Ya intentaste hacer esos cambios mediante reglas CSS? Creo que esa sería la manera de hacerlo. Si desconoces CSS no t preocupes, podemos ayudarte con ello.

Saludos.

ResponderCitar
Respondido : 08/06/2019 11:37 pm
Francisco
 Francisco
Estimable Member

Hola, Bulmaro

Muchas gracias, la verdad, no conozco cómo hacerlo mediante CSS, el movimiento que hice que está visible en donde el logo está centrado fue una regla que encontré.

Así que si me ayudas con la regla para agrandar el sitio y otra regla para poner la búsqueda de productos arriba del logo del lado derecho te lo agradecería muchísimo 🙂

ResponderCitar
Respondido : 09/06/2019 12:05 am

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

Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Francisco,

Claro, estamos para auxiliarte en estos casos.

  1. Para cambiar el tamaño del logo añade el siguiente CSS:
    @media (min-width: 768px){
    .site-header .site-branding img {
        height: auto;
        max-width: 500px !important;
    }}

    Donde 500px indica el tamaño en píxeles de la imagen.

  2. El buscador ya no lo veo como aparece en la captura que enviaste. Asumo que ya lograste quitarlo, ¿Cierto?
ResponderCitar
Respondido : 09/06/2019 3:51 am
Francisco
 Francisco
Estimable Member

Muchas gracias, ha quedado excelente lo del logo.

Sì, había quitado el buscador de productos mientras esperaba la respuesta, pero ya lo he activado nuevamente,

Me podrías ayudar con eso, para colocarlo arriba del logo pero dejarlo del lado izquierdo o derecho.

Gracias.

ResponderCitar
Respondido : 09/06/2019 4:30 am

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

Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Francisco.

Para ello podemos crear un widget y asignarle un área:

  1. En Apariencia -> Editar tema -> functions.php, al final del contenido agrega:
    function wpb_widgets_init() {
     
        register_sidebar( array(
            'name'          => 'Search Before Header',
            'id'            => 'custom-header-widget',
            'before_widget' => '
    ', 'after_widget' => '
    ', 'before_title' => '

    ', 'after_title' => '

    ', ) ); } add_action( 'widgets_init', 'wpb_widgets_init' );
  2. En Apariencia -> Editar tema ->header.php, justo debajo de la etiqueta :
  3. En Apariencia -> Widtgets, verás que aparece un área llamada "Search Before Header", agrégale el widtget llamado "Search products"
  4. En Apariencia -> CSS Adicional agrega:
    #header-widget-area{
    margin-top: 3%;
    }
    
    #header-widget-area div.chw-widget .woocommerce-product-search button[type='submit']{
    	display: none; 
    }

Nota: Recuerda crear un respaldo del archivo functions.php y header.php antes de agregar lo anterior.

Si no te funciona por favor indícame cómo agregaste el logo, si solo usaste CSS no debería haber problema con lo que te he pedido agregar.

Saludos.

ResponderCitar
Respondido : 09/06/2019 1:21 pm
Francisco
 Francisco
Estimable Member

No me funcionó, de hecho mi tema no me permite hacer los cambios directamente en el área de apariencia, así que me fui al CPanel, al área de Theme y ahí me metí tanto en functions como en Header,
Anexo archivos para que veas lo que hice.

ResponderCitar
Respondido : 11/06/2019 2:06 am

Cursos Gratuitos WordPress

Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Francisco,

¿Podrías enviarme una captura de tu functions.php y header.php, tambien una vista de la pagína de widgets? Por favor.

Si estás usando Storefront no entiendo por qué no te dejaría editar los archivos anteriores desde Apariencia -> Editor de temas, yo utilicé ese tema para crear el widget y no tuve ningún problema.

Saludos.

ResponderCitar
Respondido : 11/06/2019 2:16 am
Francisco
 Francisco
Estimable Member

Sí te los mandé, a lo mejor se te pasó ver los archivos anexos, pero esta ves los voy a insertar para mayor facilidad.

Muchas gracias,

ResponderCitar
Respondido : 11/06/2019 7:15 pm

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

Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Para mostrar la búsqueda en la parte superior derecha, usa el siguiente código CSS:

header.site-header{
    position:relative;
}

header.site-header .site-search{
    display:block;
    position:absolute;
    right:20px;
}    

Si quieres que la búsqueda igual se muestre en movil agrega adicionalmente:

@media(max-width:768px){
    header.site-header .site-search{
        position:static;
    }   
}

Saludos.

ResponderCitar
Respondido : 11/06/2019 7:55 pm
Francisco
 Francisco
Estimable Member

Funcionó excelente, gracias.

ResponderCitar
Respondido : 13/06/2019 10:18 pm

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

Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Que bien que lo solucionaste.

Saludos.

ResponderCitar
Respondido : 13/06/2019 10:32 pm