Ajustar Logo al Ancho de página en pack webempresa Atlas  

Hola

Tal como te comenté anteriormente, tener esta funcionalidad para el logo te complica en modo responsive, el problema es que tienes una altura fija ya que la imagen es un fondo.

Lo que podrías hacer es ir definiendo una nueva altura para el contenedor de acuerdo al ancho, coloca por ejemplo el siguiente código:

@media(max-width:768px){
	#rt-logo{
		height:80px!important;
	}
}

@media(max-width:480px){
	#rt-logo{
		height:60px!important;
	}
}

Saludos.

Voy a probarlo...

Ahora se me va ajustando a la página por alto y por ancho perfectamente, os dejo el código por si alguién lo quiere usar abajo.

Y ahora una última duda, en cada opción del menú tendré una imagen de logo diferente ( con una pàgina estática diferente) como puedo poner este codigo para cada imagen diferente?

.rt-showcase-pattern .rt-container,
.rt-showcase-pattern .rt-container .rt-grid-12{
	width:100%;
    height:100%;
}

#gantry_logo-5 #rt-logo{
	background-size: contain!important;
}

.logo-block {
    margin: 0;
    padding: 0;
}

@media (max-width: 1500px) {
#gantry_logo-5 #rt-logo {
    background-size: contain!important;
}
 
}

@media(max-width:768px){
	#rt-logo{
		height:90px!important;

	}
}
 
@media(max-width:480px){
	#rt-logo{
		height:50px!important;

	}
}

#rt-logo {background: url( http://creativaonline.cat/provaweb/wp-content/uploads/logo-dalt-1.jpg ) 50% 0 no-repeat !important;}
#rt-logo {width: 100%; height: 180px;}

Hola Jordi.

como puedo poner este código para cada imagen diferente?
Para indicarte una solución, añade las imágenes en el menú y luego veremos como podemos ajustarlas.

Un saludo

Saludos,

Me he explicado mal, cada página tendrà un Logo diferente , no cada opción del menú.... sorry.

Hola Jordi.

Tienes que crear un Override para cada pagina, una vez creado en la pestaña Estilo, el apartado Logo, seleccionas Personalizado y añades el logo que quieras que se muestre en esa pagina

En el siguiente enlace tienes un tutorial de como modificar la plantilla:
Contenido solo visible a usuarios registrados

Revisa sobre todo el apartado 11 Overrides (mostrar distintos diseños del tema por página)

Un saludo

Si he entendido bien pues, este codigo que uso para la pàgina principal :

.rt-showcase-pattern .rt-container,
.rt-showcase-pattern .rt-container .rt-grid-12{
	width:100%;
    height:100%;
}
 
#gantry_logo-5 #rt-logo{
	background-size: contain!important;
}
 
.logo-block {
    margin: 0;
    padding: 0;
}
 
@media (max-width: 1500px) {
#gantry_logo-5 #rt-logo {
    background-size: contain!important;
}
 
}
 
@media(max-width:768px){
	#rt-logo{
		height:90px!important;
 
	}
}
 
@media(max-width:480px){
	#rt-logo{
		height:50px!important;
 
	}
}
 
#rt-logo {background: url( http://creativaonline.cat/provaweb/wp-content/uploads/logo-dalt-1.jpg ) 50% 0 no-repeat !important;}
#rt-logo {width: 100%; height: 180px;}

Lo tendré que poner todo en este sitio?

Por lo que si es asin tendré que quitar todo mi codigo general de CSS que puse y poner-lo en cada override....

Hola Jordi.

no hace falta, es lo mismo añadirlo desde ese apartado o en el archivo custom de tu plantilla, los resultados son los mismos.

Si quisieras que un código que solo fuera para esa página en concreto y que no se muestre en las demas paginas si que podrías añadirlo en ese apartado, pero si es un código global no hace falta.

Un saludo

Al menos si que tendré que quitar este trozo no?

Y poner el nombre la la nuev imagen...

#rt-logo {background: url( http://creativaonline.cat/provaweb/wp-content/uploads/logo-dalt-1.jpg ) 50% 0 no-repeat !important;}
#rt-logo {width: 100%; height: 180px;}

Hola Jordi.

Ok. el logo es un background, si añade ese trozo de código.

Un saludo

Muchas gracias, este tema queda resuelto.

Ahora me queda otro tema, me gustaria poder el copyright de la pàgina de unos 40px como adjunto el la siguiente captura y con el mismo color, he logrado poner el mismo color pero no los 40px , alguna solución ?

Código puesto:

#rt-copyright {
    background: #e4e6e8 none repeat scroll 0 0;
    color: #4b728c;
    height:40px!important;
}

COMO TIENE QUE QUEDAR:

COMO QUEDA REALMENTE:

Hola

Mejor consulta esto último en un nuevo hilo de discusión con el título adecuado.

De esta manera mantenemos orden en el foro.

Saludos.

Ok muchas gracias.