Avisos
Vaciar todo

Añadir logo móvil responsive Tema Palene

13 Respuestas
4 Usuarios
0 Reactions
1,659 Visitas
 Raul
Respuestas: 16
Active Member
Topic starter
 

Buenas tardes,

Me gustaría saber si existe la posibilidad de tener 2 logos, uno para ordenadores y otro para móviles.
Vi en un post lo siguiente:

//COPIO//
Una forma de forzar a que en dispositivos móviles tu logo tenga un tamaño ajustable o más responsivo seria añadiendo un CSS en el archivo del child-theme (tema hijo) de estilos, o en el custom.css similar a este:

@media only screen and (max-width: 767px) {
.header-image .site-header .wrap {
background: url('images/mobile-logo.png') no-repeat left;
}
}

Donde images/mobile-logo-png deberías sustituirlo por la versión del logo para móviles. Es decir, deberías tener el logo normal de la web y un logo especifico para mostrarse en dispositivos móviles, naturalmente más pequeño.
//NO COPIO//

He seguido estos pasos, pero en el móvil se sigue viendo el logo super largo que se ve en el ordenador.
El logo del ordenador son 1160x150px, y el que configuré para móvil es de 512x512px.

Gracias!

URL del sitio: Contenido solo visible a usuarios registrados


 
Respondido : 21/02/2016 11:19 pm
Luis Mendez Alejo
Respuestas: 23273
Illustrious Member
 

Hola Raúl,

Veo que el logo original tiene un tamaño de 1 160px × 150px

Donde puedo ver el logo que estás usando para móviles ¿ruta?

Saludos


 
Respondido : 21/02/2016 11:42 pm
 Raul
Respuestas: 16
Active Member
Topic starter
 

Hola Luis,

Aquí tienes la ruta:
/public_html/wp-content/themes/palene_wp/images/mobile-logo.png

Ya me dices.

Un saludo!


 
Respondido : 21/02/2016 11:45 pm
Luis Mendez Alejo
Respuestas: 23273
Illustrious Member
 

Hola Raúl,

No veo que cargue ningún logo desde la url Contenido solo visible a usuarios registrados

Puedes indicarnos desde el frontal de tu web la url exacta de ese logo y el CSS que usas para llamar desde dispositivos móviles a dicho logo y desde que archivo CSS exacto.

Gracias


 
Respondido : 22/02/2016 12:31 am
 Raul
Respuestas: 16
Active Member
Topic starter
 

Hola Luis,

Te adjunto 2 pantallazos para que puedas chequear ambas cosas.

Gracias!


 
Respondido : 22/02/2016 12:51 am
Luis Mendez Alejo
Respuestas: 23273
Illustrious Member
 

Hola Raúl,

Has probado cambiando la ruta actual:

images/mobile-logo.png

Por la ruta:

/wp-content/themes/palene_wp/images/mobile-logo.png

Saludos


 
Respondido : 22/02/2016 5:04 am
 Raul
Respuestas: 16
Active Member
Topic starter
 

Hola Luis,

Si, es donde dices dónde tengo subida la imagen desde un principio y no se ve.

Ya me dices, saludos


 
Respondido : 22/02/2016 8:00 am
Rafael
Respuestas: 1975
Noble Member Moderator
 

Buenos días Raúl,

Es importante que nos abras la página web para que podamos revisar el código que se generar y ver el comportamiento del logotipo de la web en sus dos versiones.

Agradecemos tu colaboración

Saludos


 
Respondido : 22/02/2016 9:26 am
 Raul
Respuestas: 16
Active Member
Topic starter
 

Hola Rafael,

Disculpa, ya la tenéis abierta 🙂

Saludos!


 
Respondido : 22/02/2016 11:17 am
 Raul
Respuestas: 16
Active Member
Topic starter
 

Hola Rafael,

Pfv avísame cuando vayáis a entrar y abro la web al segundo.

La he vuelto a cerrar mientras tanto.

Gracias!


 
Respondido : 22/02/2016 2:34 pm
Jhon
 Jhon
Respuestas: 44989
Illustrious Member Moderator
 

Hola

No hemos podido ver tu sitio web, tendrías que habilitarlo.

Saludos.


 
Respondido : 22/02/2016 5:21 pm
 Raul
Respuestas: 16
Active Member
Topic starter
 

Hola Jhon,

Ok lo acabo de habilitar.

Gracias!


 
Respondido : 22/02/2016 5:23 pm
Jhon
 Jhon
Respuestas: 44989
Illustrious Member Moderator
 

Hola

Lo primero que te sugiero es qeu bajes el tamaño del archivo, este archivo pesa 200kb aprox lo cual es mucho:
Contenido solo visible a usuarios registrados

Luego elimina el código que has colocado, lo que pasa es que has copiado un código de un sitio web pero tu estructura html es diferente, puedes probar con el siguietne código :

@media only screen and (max-width: 767px) {
	#rt-logo {
    background: rgba(0, 0, 0, 0) url("http://planetfallas.com/wp-content/uploads/mobile-logo.png") no-repeat scroll left center!important;
		width:auto!important;
		height:500px!important;
	}
}

Refresca tu navegador para ver los cambios

Saludos.


 
Respondido : 22/02/2016 6:11 pm