Avisos
Vaciar todo

Letras y logo color blanco solo en primera pagina  

 
Natalia
 Natalia
Estimable Member

Hola,

Quisiera poner el logo y las letras del menú en color blanco en la primera página, tanto para ordenador, como para móvil. 

¿Cómo podría hacerlo? 

Muchas gracias.

Dominio:

 

Este debate ha sido modificado el hace 5 días por Karen Rios
Citar
Respondido : 20/10/2020 11:15 am
Natalia
 Natalia
Estimable Member

Pude lograr lo de las letras con este código:

/*color blanco de las letras del menú en la primera pagina*/

.page-id-15 #top-menu-nav a, .page-id-15 .et-cart-info, .page-id-15 #et_search_icon:before, .page-id-15 .mobile_menu_bar:before {
color: #ffffff !important;
}

Se podría optimizar? 

Gracias. 

ResponderCitar
Respondido : 20/10/2020 11:34 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Natalia.

El logo es una imagen, tendrías que cargar una imagen con el logo en blanco y en CSS pasarle esa URL:

.page-id-15 #logo {
     background-image: url("../wp-content/uploads/logo.png");
     background-repeat: no-repeat;
   background-size: cover; 
}

Del código tienes que modificar la URl de la imagen.

 

Par la versión móvil tienes que utilizar el mismo código añadiendo el @media, un ejemplo seria este:

@media only screen and (max-width: 600px) {
.page-id-15 #logo {
     background-image: url("../wp-content/uploads/logo.png");
     background-repeat: no-repeat;
   background-size: cover; 
}
}

 

Con " max-width: 600px " le indicamos la resolución que tiene que tener el dispositivo para mostrar ese código.

 

Un saludo

ResponderCitar
Respondido : 20/10/2020 12:20 pm
Natalia
 Natalia
Estimable Member

@pepesoler

Hola Pepe, buenos días, muchas gracias por tu ayuda.

Al cargar el logo en la primera página, se solapa con el otro. Trato de quitar el logo negro con el siguiente código pero desaparecen los dos:

.page-id-15 #logo {
display: none;
}

¿Cómo puedo hacer?

Adicionalmente el logo blanco no se ajusta al tamaño que tiene. 

¿Qué puede estar pasando? Gracias!

 

ResponderCitar
Respondido : 21/10/2020 9:38 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Natalia.

Si, solo era un ejemplo para que vieras como esta construido

Prueba lo siguiente

.page-id-15 .et_header_style_left .logo_container {
background-image: url( http://buscatunorte-cp5012.wordpresstemporal.com/berilotemp/wp-content/uploads/2020/10/logo-blanco-transpa3.png )!important;
background-repeat: no-repeat;
}

.page-id-15 #logo {
display:none;
}


Un saludo

ResponderCitar
Respondido : 21/10/2020 10:36 am
Natalia
 Natalia
Estimable Member

@pepesoler

Hola Pepe, 

Coloqué el código completo que me dijiste pero se desaparecen ambos logos.

Si coloco solo este código, solo aparece el logo negro : 

.page-id-15 .et_header_style_left .logo_container {
background-image: url( http://buscatunorte-cp5012.wordpresstemporal.com/berilotemp/wp-content/uploads/2020/10/logo-blanco-transpa3.png )!important;
background-repeat: no-repeat;
}

Muchas gracias!
ResponderCitar
Respondido : 21/10/2020 11:22 am
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Natalia,

Prueba añadir el siguiente código en el apartado Divi -> Opciones del tema ->  Integración - Body, debes colocar la url de tu logo en la sección que te lo indica el código

Screenshot
Screenshot
Screenshot
<script>
jQuery(function($){
$('.logo_container').append('<a href="/"><img src="COLOCA LA URL DE TU LOGO BLANCO AQUÍ" class="home-logo" id="logo" style="display:none;" /></a>');
});
</script>
<style>
body.home #logo { display: none!important; }
body.home #page-container .home-logo { display: inline-block!important; }
</style>

Nos comentas como ha ido todo

Un Saludo

ResponderCitar
Respondido : 21/10/2020 1:10 pm
Natalia
 Natalia
Estimable Member

@karen

Hola Karen, muchísimas gracias! Sí funcionó.

Otra cosa que quisiera hacer con el logo: ese logo es muy grande para la versión móvil, por lo cual, quisiera poner un logo más pequeño para la versión móvil, que fuera blanco en la primera página y negro en las demás, tal como en la versión para ordenador. 

Actualmente tengo cargado un logo blanco más pequeño para la versión móvil, que se ve bien en la primera página, pero en las otras no se ve porque el fondo del menú es blanco, igual que el logo. 

Entonces, cómo podría hacer lo que quiero? Es decir, ¿poner un logo más pequeño para la versión móvil, blanco en la primera página y negro en las demás?. 

Muchas gracias de antemano por tu ayuda. 

ResponderCitar
Respondido : 22/10/2020 10:20 am
Natalia
 Natalia
Estimable Member

Este es el código que estoy usando para cargar el logo en la versión móvil: 

/* Cambiar logo para version movil */
@media only screen and (max-width: 981px) {
#logo {
content: url("http://buscatunorte-cp5012.wordpresstemporal.com/berilotemp/wp-content/uploads/2020/10/logo-berilo-blanco-transp4.png");
}

}
ResponderCitar
Respondido : 22/10/2020 10:22 am
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Natalia,

Navegando en tu sitio web veo que el logo blanco solo se aplica a tu pagina de Inicio y en las internas carga el logo negro.

imagen
imagen

 

Para colocar un poco mas pequeño el botón en el inicio puedes probar con el siguiente código CSS, debes añadirlo en el apartado Apariencia -> Personalizar -> CSS adicional

@media only screen and (max-width: 467px) {
.et_header_style_left #logo {
max-width: 70%;
}
}

Guardar los cambios y compruebas si con ello logra colocar el logo del tamaño que deseas

Un Saludo

ResponderCitar
Respondido : 22/10/2020 1:35 pm
Natalia
 Natalia
Estimable Member

@karen

Hola Karen, 

Tenía cargado el logo blanco para la versión móvil, pero no sé por qué no lo podía ver. 

Sin embargo, quité ese logo blanco versión móvil y puse el código que me dijiste para ajustar el tamaño del logo (el blanco y el negro) en la versión móvil y funcionó.

Muchas gracias!

ResponderCitar
Respondido : 23/10/2020 11:02 am
Natalia
 Natalia
Estimable Member

Sin embargo, por favor, no cierres el tema que aún no aparece del todo bien. GRacias!

ResponderCitar
Respondido : 23/10/2020 11:05 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Natalia.

Ok dejo el hilo abierto.

 

Un saludo

ResponderCitar
Respondido : 23/10/2020 11:10 am
Natalia
 Natalia
Estimable Member

@pepesoler

Hola Pepe,

El ícono del carrito aparece alineado junto a la hamburguesa del menú en la página Home, pero en otras páginas aparece arriba. ¿Cómo podría alinearlo para que se vea en todas las páginas como en la página de inicio? 

Muchas gracias.

alinear carrito 2
alinear carrito

 

ResponderCitar
Respondido : 23/10/2020 12:22 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Natalai,

En este caso prueba el siguiente código CSS

/* cambios menu movil*/
@media only screen and (max-width: 467px) {
#et-top-navigation {
padding-left: 190px !important;
}

}

Verifica si con el tu menú queda alineado en todas las paginas

Un Saludo

ResponderCitar
Respondido : 23/10/2020 1:10 pm