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
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.
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.
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
Como accedo a child-theme (tema hijo) de estilos, o a custom.css ?
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
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
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.
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
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
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
Hola Carlos.
Ok, esa plantilla tiene otra estructura.
Lo tienes que tener en themes/tuplantilla/style.css
Un saludo
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;
}
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