Avisos
Vaciar todo

Logo más pequeño para verlo en el móvil responsive Tema Palene  

 
Carlos Javier
 Carlos Javier
Usuario eminente

Buenas tardes despues de seguir al pie de la letra este foro vuestro relativo a este tema.

No he podido conseguir que mi logo se haga mas pequeño a la hora de ver mi web por el movil y que no descuadre.

Os adjunto archivos

 

 

URL del sitio: Contenido solo visible a usuarios registrados

Este debate ha sido modificado el hace 4 años por antonio
Citar
Respondido : 14/03/2017 7:23 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

El caso que comentas en la url enviada es diferente, en ese caso se cambia el logo por otro más largo de allí que hay una altura mayor, en tu caso no es así.

Igual veo que usar una url de otro sitio
Contenido solo visible a usuarios registrados

Siempre que toques CSS tienes que ver cómo se aducua a tu sitio, en este caso particular el código que has usado es incorrecto y no aplica a tu situación.

Te sugiero guiarte del siguiente artículo, debes usar lógicamente tus propias rutas de imagen.

https://decodecms.com/cambiar-el-logo-en-la-version-movil-de-tu-sitio-web/

Saludos.

ResponderCitar
Respondido : 14/03/2017 9:14 pm

Carlos Javier
 Carlos Javier
Usuario eminente

Despues de ver el video , no me queda claro.
Te adjunto imagen de firebug del logo de mi web para que me digas si debo hacerlo según la primera parte del video o la segunda.

Yo estoy usando firebug me podrias decir que extendión usas tu en tus videos?

Perdona por mi torpeza.

ResponderCitar
Respondido : 15/03/2017 10:58 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Carlos.

Una forma de forzar que en dispositivos móviles tu logo tenga un tamaño ajustado 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) {
	#rt-logo { 
	  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.

Un saludo

ResponderCitar
Respondido : 15/03/2017 1:31 pm

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

Carlos Javier
 Carlos Javier
Usuario eminente

Como accedo a child-theme (tema hijo) de estilos, o a custom.css ?

ResponderCitar
Respondido : 15/03/2017 4:10 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Carlos.

Puedes añadirlo con el editor de estilos desde tu administrador de wordpress seleccionando Apariencia -> Editor y lo añades a la hoja de estilos de tu plantilla.

Recuerda que tienes que modificar la URL del logo y el nombre por la la URL donde tienes tu logo y el nombre del logo para la versión móvil.

Un saludo

ResponderCitar
Respondido : 15/03/2017 4:33 pm

Cursos Gratuitos WordPress

Carlos Javier
 Carlos Javier
Usuario eminente

He subido el logo mas pequeño para la versión movil en:
wp-content/themes/palene_wp/images/mobile-logo.png

He puesto tu código en style.css te dejo adjunto

Y NO SALE

Tambien he probado subiendo el logo-mobil a la biblioteca de mdios y esta es la direccion
y Nada Tampoco

ResponderCitar
Respondido : 15/03/2017 6:03 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Al código CSS que tienes prueba agregar un / delante de la ruta, es decir quedaría:

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

Sin embargo esta imagen tiene que ser otra imagen, veo que has puesto la misma que usas para tu logo en desktop

Saludos.

ResponderCitar
Respondido : 15/03/2017 9:38 pm

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

Carlos Javier
 Carlos Javier
Usuario eminente

La he cambiado por mobile-logo2.png en la misma direción.
mobile-logo2.png es más pequeña 300x71 pixel 72 resolución
Mientras que la del logo es de 450x100
Y sigue sin salir

ResponderCitar
Respondido : 15/03/2017 10:04 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Carlos.

Edita el archivo palene.css que encontraras en wp-content/themes/tuplatilla/css

Busca el siguiente codigo

#rt-logo {
    background: url( http://www.expresodelsur.es/wp-content/uploads/logo6.jpg ) 50% 0 no-repeat !important;
}

Modifica-lo por lo siguiente:

#rt-logo {
    background: url( http://www.expresodelsur.es/wp-content/uploads/logo6.jpg ) 50% 0 no-repeat;
}

Añade el siguiente código a tu archivo de estilos ( no se si tienes creado el archivo de modificaciones, si no lo tienes te aconsejo que lo crees y añadas a ese archivo todo lo que modifiques de estilos )
Agregar archivo CSS personalizado para plantillas Gantry

@media only screen and (max-width: 767px) {
	#rt-logo { 
	  background: url('http://www.expresodelsur.es/wp-content/uploads/mobile-logo2.png') no-repeat !important;; 
	}
}

Un saludo

ResponderCitar
Respondido : 16/03/2017 9:13 am

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

Carlos Javier
 Carlos Javier
Usuario eminente

El archivo palene.css no exite en tu ruta: wp-content/themes/tuplatilla/css solo aparece estos dos archivos:
master-ie8.css y master-ie9.css

ResponderCitar
Respondido : 16/03/2017 9:43 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Carlos.

Ok, esa plantilla tiene otra estructura.
Lo tienes que tener en themes/tuplantilla/style.css

Un saludo

ResponderCitar
Respondido : 16/03/2017 12:32 pm

Carlos Javier
 Carlos Javier
Usuario eminente

Esto es lo que me sale en style.css que es lo mismo que en /Apariencia/editor

Theme URI: https://www.webempresa.com
Description: Palene theme for Wordpress
Version: 1.0.0
Author: Webempresa
Author URI: https://www.webempresa.com
*/

Como ves aquí no puedo buscar el codigo

#rt-logo {
background: url( ) 50% 0 no-repeat !important;
}

Para Modificarlo por:

#rt-logo {
background: url( ) 50% 0 no-repeat;
}

ResponderCitar
Respondido : 16/03/2017 3:17 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Lo que sucede es que tienes un !important en tu código que te muestra el logo actual, para que pueda tener efecto el código que quieres agregar debes hacerlo más específico por ejemplo agregando #rt-header, el código quedaría:

@media only screen and (max-width: 767px) {
	#rt-header #rt-logo { 
	  background: url('http://www.expresodelsur.es/wp-content/uploads/mobile-logo2.png') no-repeat !important;; 
	}
}

Puedes agregar este código en luegar del código que has agregado en:
/wp-content/themes/palene_wp/style.css

Saludos

ResponderCitar
Respondido : 16/03/2017 6:35 pm

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