(Solucionado) Página en mantenimiento

[pablobuendiaelvira]

Hola,

 

Quiero personalizar mi página de mantenimiento y necesito saber algunas cosas.

¿Que tamaño debe tener la imagen que se carga? Se que es la imagen "bg_maintenance" de la carpeta img.

 

Gracias.

Edited April 12, 2017 by pablobuendiaelvira (see edit history)

[nadie]

 Indique la versión de Prestashop que usas. (Y si usas otra plantilla)

 

En 1.6 con plantilla por defecto

 

Fichero TPL en Prestashop 1.6: 

/themes/default-bootstrap/maintenance.tpl

Fichero CSS en Prestashop 1.6

/themes/default-bootstrap/css/maintenance.css

Cambiar Traducciones de los textos de la pagina mantenimiento en 1.6

 

Localización -> Traducciones -> Traducciones del Front-Office

 

---

 

Ademas en la 1.6, al menos que yo sepa la imagen que muestra es el logo...

 

 

Si quieres que no tome el logo de la tienda que cambias en la pestaña Preferencias -> Temas, edita el TPL y pone otra ruta distinta...

[pablobuendiaelvira]

Gracias por tu ayuda nadie,

Es la versión 1.6.1.7

He conseguido que el logo no se muestre modificando maintenance.tpl pero no sé porque me aparece una línea.

En las traducciones he dejado un espacio en blanco porque quiero que se muestre únicamente la imagen que estoy renombrando bg_maintenance.png.

Dejo una captura para que la veas.

[nadie]

Gracias por tu ayuda nadie,

Es la versión 1.6.1.7

He conseguido que el logo no se muestre modificando maintenance.tpl pero no sé porque me aparece una línea.

En las traducciones he dejado un espacio en blanco porque quiero que se muestre únicamente la imagen que estoy renombrando bg_maintenance.png.

Dejo una captura para que la veas.

Imagino que la tendras en:

/themes/tuplantilla/img/bg_maintenance.png

Y en tu css, dentro  de:

/themes/tu-plantilla/css/maintenance.css

tienes que tener alguna referencia a la linea (bg_maintenance.png)que comentas, ya que es una especie de fondo.

 

Recuerdo que en versiones anteriores, habia un fondo:

#maintenance #message {
margin: 0 20px;
padding: 50px 310px 0 0;
height: 360px;
background: url(../img/bg_maintenance.png) no-repeat 100% 0 #fff;
}

¿Puedo ver esa pagina de mantenimiento?

[pablobuendiaelvira]

Hola de nuevo nadie,

Si, claro que puedes verla, la url es www.idoctor.es

Aparte de la linea que me aparece, la imagen también se reduce bastante como puedes ver.

Voy a echarle un ojo a la referencia del fondo que me comentas.

Gracias!!

Edited April 6, 2017 by pablobuendiaelvira (see edit history)

[pablobuendiaelvira]

Hola nadie,

La linea que me aparecía ya la he podido quitar, era problema del "div id= message".

Lo que no consigo es que aparezca la imagen completa, ya que la recorta.

¿Que debo hacer?

Otra cosa que me he dado cuenta es que la imagen en dispositivos móviles no aparece ¿Tiene algún motivo?

Gracias

Edited April 6, 2017 by pablobuendiaelvira (see edit history)

[nadie]

Hola de nuevo nadie,

Si, claro que puedes verla, la url es www.idoctor.es

Aparte de la linea que me aparece, la imagen también se reduce bastante como puedes ver.

Voy a echarle un ojo a la referencia del fondo que me comentas.

Gracias!!

Otra cosa que me he dado cuenta es que la imagen en dispositivos móviles no aparece ¿Tiene algún motivo?

Gracias

En el css, esto:

 #maintenance {
      margin: 126px 0 0 0;
      padding: 91px 48px 365px 297px;
      background: url(../img/bg_maintenance.png) no-repeat; }

lo tienes puesto dentro de:

  @media (min-width: 1200px)

Por lo tanto solo se ve cuando el ancho minimo de visualización es de 1200px, si lo sacas fuera, se vera siempre de la misma forma, ya depende lo que quieras hacer..

 

He visto que has sustituido la linea de: 

bg_maintenance.png

por una imagen completa de fondo...

[pablobuendiaelvira]

Gracias nadie,

Ya he modificado maintenance.css para que aparezca la imagen en dispositivos móviles,

Pero sigo sin poder ver la imagen al 100% ni en el pc ni en dispositivos móviles. Se ven recortadas ambas

Dejo imágenes para que lo puedas comprobar.

Gracias!!

[nadie]

Creo que te estas medioliando xD
 
Dejate de background (elimina el background del css), si solo vas a colocar una imagen.
 
En el:
 

maintenance.tpl

Cambia esto:
 

<div class="container">
			<div id="maintenance">
				<div class="logo"><img src="{$logo_url}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}"{/if} alt="logo" /></div>
	        		{$HOOK_MAINTENANCE}
	        		<div id="message">
	             			<h1 class="maintenance-heading">{l s='We\'ll be back soon.'}</h1>
							{l s='We are currently updating our shop and will be back really soon.'}
							<br />
							{l s='Thanks for your patience.'}
					</div>
				</div>
	        </div>
		</div>

Por
 

<div class="container">
			<div id="maintenance">
				<img class="img-responsive" src="{$img_dir}tuimagen.jpg" />
	        </div>
		</div>

Sube "tuimage.jpg" que es la imagen esa que quieres dejar en el directorio "/themes/tu-plantilla/img/"

 

Ahora, vamos al fichero:

/themes/tu-plantilla/css/maintenance.css

Y añadimos esto:

.img-responsive {
max-width: 100%;
 height: auto;
display:block
}

Por ultimo, para ampliar el ancho del "bloque"

<div class="container">

 

En el mismo css tienes esto:

.container {
    width: 500px;
}

Fijate que lo tienes dentro de varios:

@media

según resolución.

 

Activa el mantenimiento de tu tienda, para que vea tus progresos.

[pablobuendiaelvira]

Mil gracias nadie,

Ya tengo todo perfecto.

Activo el mantenimiento de la tienda.

Un saludo.

Edited April 6, 2017 by pablobuendiaelvira (see edit history)

[nadie]

Mil gracias nadie,

Ya tengo todo perfecto.

Activo el mantenimiento de la tienda.

Un saludo.

De aqui:

#maintenance {
    
      }

Quita esto:

  margin: 126px 0 0 0;
      padding: 91px 48px 365px 297px;

O eliminalo directamente, y por lo que veo queda bien en tu web. 

 

Adjunto Captura

 

[pablobuendiaelvira]

Gracias!!