Angel Garcia Posted August 18, 2011 Share Posted August 18, 2011 Hola Me gustaria saber cual es el modo de poner una imagen de fondo a mi tienda. He estado leyendo muchos mensajes del foro y he tratado de modificar el archivo global.css de themes\prestashop\css con la siguiente linea de comandos dentro del body, pero no hay forma: background-image: url(../img/foto.jpg); He probado metiendo la imagen en otros directorios, probando a cambiar el color de fondo por transparent, por si el blanco se sobrepusiera sobre el background, he probado con fondos jpg y bmp... Puede tener algo que ver con las dimensiones del fondo web ? Un saludo Link to comment Share on other sites More sharing options...
jesusruiz Posted August 18, 2011 Share Posted August 18, 2011 Hola Me gustaria saber cual es el modo de poner una imagen de fondo a mi tienda. He estado leyendo muchos mensajes del foro y he tratado de modificar el archivo global.css de themes\prestashop\css con la siguiente linea de comandos dentro del body, pero no hay forma: background-image: url(../img/foto.jpg); He probado metiendo la imagen en otros directorios, probando a cambiar el color de fondo por transparent, por si el blanco se sobrepusiera sobre el background, he probado con fondos jpg y bmp... Puede tener algo que ver con las dimensiones del fondo web ? Un saludo Pues es tal y como tu explicas. Vas al archivo global.css, buscas la línea donde vienen establecidas las propiedades del body e incluyes la línea siguiente: background: url('../img/fondo.jpg') o bien: background-image: url('../img/fondo.jpg') En este caso, la imágen debes de asegurarte de subirla dentro de la carpeta img. Si la quieres subir a otra carpeta, pues el código cambiaría. Además de añadir esta línea, asegurate de no tener ninguna propiedad en el body que sea: background: ALGÚN COLOR o background-color: ALGÚN COLOR. Estas dos etiquetas, lo que hacen es superponerse a la imagen de fondo y te la ocultan. Por otra parte y también muy importante, recuerda que para hacer ediciones en la versión 1.4 primero debes de hacer lo siguiente, ve a: Back Office => Preferencias => Rendimiento y habilita Forzar la compilación y deshabilita la Cache. Una vez hecho los cambios vuelve a dejar estas opciones como estaban. Un saludo. Link to comment Share on other sites More sharing options...
Angel Garcia Posted August 18, 2011 Author Share Posted August 18, 2011 Hola Jesus No hay forma, he probado a hacer lo que me has comentado de eliminar el comando background-color, forzar la compilacion y deshabilitar la cache, pero sigue sin funcionar. La version que tengo es la V.1.4.4.0. Un saludo y muchas gracias por contestar tan rapido Link to comment Share on other sites More sharing options...
jesusruiz Posted August 18, 2011 Share Posted August 18, 2011 Hola Jesus No hay forma, he probado a hacer lo que me has comentado de eliminar el comando background-color, forzar la compilacion y deshabilitar la cache, pero sigue sin funcionar. La version que tengo es la V.1.4.4.0. Un saludo y muchas gracias por contestar tan rapido Bueno Angel, vamos a intentar ver donde está el fallo que cometes. Empezamos por ir al Panel de Administración. Vamos a la opción PREFERENCIAS => RENDIMIENTO. En las opciones que tenemos para modificar, vamos a cambiar lo siguiente: - Forzar la compilación: SI - Cache: NO - "Smart cache" para las hojas de estilo: Utilizar CCC para las hojas de estilo. - "Smart cache" para el código JavaScript: Utilizar CCC para el código JavaScript. Pulsa el botón Guardar y asegurate antes de salir de ahí, que todo se ha guardado como te he dicho y no se ha cambiado ningún valor. Bien, segundo paso que vamos a probar. Vas a ir al archivo global.css. El código original del body de este archivo creo que es el siguiente: body { background-color: white; font-size: 11px; font-family: Verdana, Arial, Helvetica, Sans-Serif; color: #5d717e; text-align: center } Bien, pues vamos a hacer un simple cambio, para ver si se producen los cambios o hay algo que no va bien en tu servidor (como podrían ser los permisos de los archivos y carpetas). body { background-color: black; font-size: 11px; font-family: Verdana, Arial, Helvetica, Sans-Serif; color: #5d717e; text-align: center } Hemos cambiado el color de fondo a negro. Bien, ahora vas a hacer los siguiente. Actualiza la pagina web, es decir le das al botón de Recargar esta página en tu navegador. Si ves que todo sigue igual, podrías probar a Eliminar el historial de navegación, las cookies y todas esas cosas que se quedan en el navegador guardadas en caché y que a veces produce que no se vean reflejados los cambios que hacemos. Si se ha producido el cambio de color, vamos a hacer el cambio que tu quieres. Vamos a poner un ejemplo: body { background: url('../img/logo.jpg') repeat; font-size: 11px; font-family: Verdana, Arial, Helvetica, Sans-Serif; color: #5d717e; text-align: center } Prueba a ver si este código te funciona y se ve el logo de Prestashop repetido a lo largo de toda tu web. Si nada de esto funciona, deberás de revisar los permisos de las carpetas y archivos del servidor donde tienes alojada la web por FTP. Suerte y espero que te sirva. Link to comment Share on other sites More sharing options...
Angel Garcia Posted August 20, 2011 Author Share Posted August 20, 2011 Nada de nada Jesus, seguimos igual. Al modificar las opciones de compilacion, cache y CCC tal y como me has comentado, la pagina se tira un monton de tiempo cargando y cuando finaliza se queda con un pantallazo blanco. Ya por todo lo que he visto imagino que el problema sera del servidor. La web no esta subida todavia en ningun sitio, la tengo puesta de pruebas en un ordenador mio con la ultima version de WampServer instalada. Muchas gracias por todo. Un saludo Link to comment Share on other sites More sharing options...
jesusruiz Posted August 20, 2011 Share Posted August 20, 2011 Nada de nada Jesus, seguimos igual. Al modificar las opciones de compilacion, cache y CCC tal y como me has comentado, la pagina se tira un monton de tiempo cargando y cuando finaliza se queda con un pantallazo blanco. Ya por todo lo que he visto imagino que el problema sera del servidor. La web no esta subida todavia en ningun sitio, la tengo puesta de pruebas en un ordenador mio con la ultima version de WampServer instalada. Muchas gracias por todo. Un saludo Sí lo de que tarde tiempo en cargar cuando modificas las opciones que te he dicho es normal, porque estás obligando a la tienda a cargar todo de nuevo. Es decir, no utiliza la caché del navegador, que es la encargada de almacenar una "copia de los elementos" de la tienda para que no tarde tanto tiempo en cargar. Estas modificaciones que haces en el Panel de Control => Rendimiento. Una vez hagas los cambios de edición que quieres hacer. Ya lo vuelves a poner como estaba en un principio, pero mientras quieras modificar algo de la tienda tienes que dejarlo como te he dicho. Ahora, otra cuestión bien distinta es, eso que me dices del pantallazo en blanco. ¿Has modificado algo en el código?. Porque normalmente, esos pantallazos en blanco es porque no tienes bien el código. Se te ha olvidado poner un ; o hay algún espacio en blanco en en algún archivo que no debería estar o bien has tocado algo del código que hace que la tienda no funcione bien. Yo tengo la última versión de Prestashop instalada y utilizando WAMP y no tengo ningún tipo de problema. Va todo perfectamente bien. Mi consejo es que si has tocado algo del código o no sabes muy bien de donde puede venir el error. Te quites de complicaciones, borra la tienda que estás usando actualmente y vuelvela a instalar. Te tiene que funcionar bien sí o sí, a la fuerza vamos. Un saludo. Link to comment Share on other sites More sharing options...
Angel Garcia Posted August 22, 2011 Author Share Posted August 22, 2011 Sigo igual jesus. Ya no se que hacer. He reinstalado prestashop y wamp de nuevo. He probrado a modificar el codigo fuente directamente desde WorPad y no desde el editor de codigo Hateml, como estaba haciendo. Lo del pantallazo blanco se corrigio cuando elimine todos los productos que tenia cargados en la tienda. Al iniciar la tienda por primera vez tras modificar el codigo fuente, tarda un pelin mas, pero ya carga bien. Otra cosa que estoy pensando, es si no tendra nada que ver con no tener instalada la extension Mencache PECL, sobre la cual me da una advertencia. Un saludo y disculpame que al final voy a resultar cansino y todo. Link to comment Share on other sites More sharing options...
jesusruiz Posted August 23, 2011 Share Posted August 23, 2011 No te preocupes por lo de cansino que aquí estamos para ayudar. Y por supuesto, todos hemos tenido y tenemos algún problema con Prestashop, que no logramos solucionarlo. En principio, no se que te puede estar fallando. Me cuentas que el pantallazo en blanco, ya no te lo da. Por lo tanto, supongo que lo que te falla es el poder editar la plantilla de la tienda. Te respondo a tu última pregunta y te hago varias preguntas para ver si podemos sacar alguna conclusión. - La extensión Memcached, no tiene nada que ver en este asunto. Esa extensión, aumenta la velocidad del tiempo de respuesta de las páginas web, es decir hacen que carguen mucho más rápido. Memcached interviene de forma complementaria a nuestra base de datos MySQL y permite grabar el resultado de los requerimientos SQL para permitirle estar menos sobrecargado y más eficiente. Ahora paso a las preguntas que creo conveniente hacerte: 1) ¿Qué navegador usas?. ¿Internet Explorer, Firefox, Chrome, Opera...?. Es aconsejable que cada vez que hagas un cambio, elimines los archivos temporales de Internet y las cookies. También podrías instalar otro navegador y comprobar si en ese navegador si se han producido los cambios. 2) ¿Sigues teniendo activada en la tienda las opciones que te dije que tenías que tener activas cuando estás editándola?. Si la respuesta es afirmativa, asegurate que no se han cambiado y que se han grabado los cambios de esas opciones correctamente. 3) ¿La plantilla que estás usando es la que viene por defecto en Prestashop o es otra?. 4) Descargate este archivo: Archivos Prestashop Te he incluido el archivo global.css original y un global.css modificado. Un header.tpl original y un header.tpl modificado. Vas a sustituir el archivo global.css modificado, por el que tengas en tu tienda actual. Haz una copia de tu archivo si lo crees oportuno. Vas a hacer lo mismo, con el archivo header.tpl modificado. Haz una copia de tu archivo si lo crees oportuno. El archivo header.tpl se encuentra en \themes\prestashop El global.css se encuentra en \themes\prestashop\css Asegurate lógicamente, que cuando sustituyas estos archivos modificados por los tuyos, te pida sustituirlos. No vaya a ser que lo copies a alguna carpeta donde no van esos archivos. Si no te aparecen los cambios, ya no se que podría estar ocurriendo. Sería algo muy extraño... Cuéntanos cuando hagas estos dos cambios y responde a las preguntas. Si a alguien más del Foro, se le ocurre algo que lo diga por aquí, aunque supongo que no es el caso, porque ya lo habríais dicho Un saludo a todos. Link to comment Share on other sites More sharing options...
Angel Garcia Posted August 23, 2011 Author Share Posted August 23, 2011 1) ¿Qué navegador usas?. ¿Internet Explorer, Firefox, Chrome, Opera...?. Es aconsejable que cada vez que hagas un cambio, elimines los archivos temporales de Internet y las cookies. También podrías instalar otro navegador y comprobar si en ese navegador si se han producido los cambios. Uso habitualmente Explorer, pero tambien tengo instalado el Chrome. He probado con ambos navegadores eliminando previamente los archivos temporales y las cookies. 2) ¿Sigues teniendo activada en la tienda las opciones que te dije que tenías que tener activas cuando estás editándola?. Si la respuesta es afirmativa, asegurate que no se han cambiado y que se han grabado los cambios de esas opciones correctamente. Las opciones estan activadas, y una vez que arranco la web por primera vez y veo que se aplican los cambios, cambio las opciones a sus valores iniciales. 3) ¿La plantilla que estás usando es la que viene por defecto en Prestashop o es otra?. 4) Descargate este archivo: Archivos Prestashop Te he incluido el archivo global.css original y un global.css modificado. Un header.tpl original y un header.tpl modificado. La plantilla es la que trae por defecto prestashop, incluso he aplicado los cambios en tres tiendas que me he instalado diferentes para hacer pruebas. Al sustituir los archivos global.css y header.tpl por los modificados que me has facilitado, observo como la web cambia a un fondo rojo y como en la parte superior aparece la cabecera modificada. He probado a modificar el codigo para añadirle el background, pero nada de nada. Ya solo me queda instalar Wamp y Prestashop en otro equipo y seguir haciendo pruebas. Os matendre informados. Muchas gracias por todo Jesus. Un saludo. Link to comment Share on other sites More sharing options...
jesusruiz Posted August 23, 2011 Share Posted August 23, 2011 Al sustituir los archivos global.css y header.tpl por los modificados que me has facilitado, observo como la web cambia a un fondo rojo y como en la parte superior aparece la cabecera modificada. He probado a modificar el codigo para añadirle el background, pero nada de nada. Ya solo me queda instalar Wamp y Prestashop en otro equipo y seguir haciendo pruebas. Os matendre informados. Muchas gracias por todo Jesus. Un saludo. Bien, perfecto ¿no?. Al menos sabes que los cambios se realizan correctamente. Es decir, los dos cambios que he realizado al archivo, tu tienda los ha tenido en cuenta. No se si esos cambios antes te los tenía en cuenta, pero creo recordar que comentastes que no. Así que ahora lo único que necesitas es modificar el fondo de la tienda, por la imagen tuya. Vamos a empezar por hacer algo más sencillo y luego intentamos poner tu imagen de fondo. El archivo que te he pasado modificado header.tpl tiene una línea que es la siguiente: <H1>ARCHIVO CABECERA DE LA TIENDA MODIFICADO</H1> Bien, modifica ese texto con tu editor favorito (bloc de notas, NotePad++, Dreamweaver). Pon lo que quieras dentro de la etiqueta <H1>. Por ejemplo, cambia esa línea por: <H1>ARCHIVO CABECERA MODIFICADO, PRUEBA</H1> Guarda el cambio realizado en el archivo, elimina los archivos temporales de Internet y carga la web. ¿Se ha producido el cambio del texto?. Si la respuesta es afirmativa. Pasamos a la siguiente prueba. Si no se produce el cambio, algo tiene que hacer el editor que utilizas, que no guarda los cambios o lo hace poniendole otro nombre al archivo, o le cambia la extensión o lo estás grabando en otra carpeta o algún fallo similar... Bien, vamos a pasar a la segunda prueba. Vas a coger mi archivo modificado global.css y vas a sustituir las siguientes líneas: body { background-color: red; font-size: 11px; font-family: Verdana, Arial, Helvetica, Sans-Serif; color: #5d717e; text-align: center } Por este otro código: body { background-color: blue; font-size: 14px; font-family: Verdana, Arial, Helvetica, Sans-Serif; color: #5d717e; text-align: center } Guarda el cambio que has realizado. El fondo debería cambiarse a azul y hemos aumentado el tamaño del texto. ¿Se producen los cambios? Si me dices que sí a las dos pruebas, pasamos a mirar porque no coge la imagen de fondo. Te recuerdo no obstante que para añadir un fondo, la propiedad background-color no debe de estar. Te recuerdo también, que para añadir una imagen, la propiedad que tienes que poner es background o background-image. La imagen de fondo que quieras poner, tiene que tener una extensión que la entienda el navegador, esto es: jpg, png o gif. La imagen de fondo que quieras poner, no puede contener espacios, ni eñes. El código como te dije anteriormente será parecido a este: body { background: url('../img/logo.jpg') repeat; font-size: 11px; font-family: Verdana, Arial, Helvetica, Sans-Serif; color: #5d717e; text-align: center } La imagen de fondo debe de estar en la carpeta img de Prestashop. En esa carpeta verás, que como ocurre en este ejemplo que te he dado logo.jpg es la imagen del logo de Prestashop. Tu imagen de fondo debe de estar en esa carpeta. Asegurate de la extensión de la imagen, de que el nombre esté correctamente escrito, que no tenga espacios, ni símbolos extraños. Ya nos dirás que ha ocurrido y si todo ha ido bien o ha sido un fracaso. Suerte Link to comment Share on other sites More sharing options...
Angel Garcia Posted August 23, 2011 Author Share Posted August 23, 2011 Los cambios en el archivo header.tpl, me deja hacerlos sin ningun tipo de problema, asi como los cambios en el color de fondo y el tamaño de letra en global.css. El problema persiste, al introducir background-url, la imagen nunca carga y sale el fondo blanco. He probado a cambiar las imagenes de directorio, con varios formatos de imagen, haciendo copy/paste con los codigos que me has puesto en el foro, tratando de cargar una imagen desde una web exterior etc, etc... He consultado el siguiente link donde hablan de las propiedades CSS y muchos otros mas http://www.librosweb.es/referencia/css/background-image.html He probado en otro ordenador diferente y todo sigue igual. Se me acaban los recursos jajaja Link to comment Share on other sites More sharing options...
jesusruiz Posted August 23, 2011 Share Posted August 23, 2011 Hola de nuevo, Angel: Ya entiendo el problema. El problema que tienes es que las rutas que añades en la propiedad background o background-image están mal. Y están mal, primero porque no tienes la tienda online y segundo porque las rutas de Windows son distintas a las rutas que utiliza Linux. Bien, lo que te voy a comentar funciona poniendo tu imagen de fondo, dentro de la carpeta: \themes\prestashop\css Es justamente donde tienes el archivo global.css. Pues pon ahí tu imagen de fondo. En este caso te pongo el mismo ejemplo de antes. Vas a copiar la imagen logo.jpg que tendrás en la carpeta img y la vas a copiar dentro de la carpeta \themes\prestashop\css. Es el logo de Prestashop como te he comentado en otras ocasiones. Bien, una vez copiada la imagen, vas a editar el código del archivo global.css y lo vas a dejar de la siguiente forma: body { background: url('logo.jpg') repeat; font-size: 11px; font-family: Verdana, Arial, Helvetica, Sans-Serif; color: #5d717e; text-align: center } Guarda el archivo, borra los archivos temporales y recarga la web. Te debería de funcionar de esta forma en local, aunque cuando subas la web a Internet tendrás que dejar el código de la siguiente manera: body { background: url('../img/logo.jpg') repeat; font-size: 11px; font-family: Verdana, Arial, Helvetica, Sans-Serif; color: #5d717e; text-align: center } Y lógicamente la imagen irá dentro de la carpeta img. Por cierto, también puedes crearte una carpeta que se llame img o como tu quieras dentro de la carpeta \themes\prestashop\css para meter ahí tu imagen de fondo. En ese caso el código del archivo global.css sería el siguiente: body { background: url('img/logo.jpg') repeat; font-size: 11px; font-family: Verdana, Arial, Helvetica, Sans-Serif; color: #5d717e; text-align: center } Espero que te sirva. Un saludo. Link to comment Share on other sites More sharing options...
Angel Garcia Posted August 24, 2011 Author Share Posted August 24, 2011 Jesus, al fin me funciona !!! no sabes la alegria que me ha dado el ver como carga la imagen de fondo, despues de tanto tiempo y tantas pruebas. Una vez mas muchas gracias, por haber estado ahí dia tras dia hasta solucionar el problema. Podemos decir que este problema queda resuelto. Aunque imagino que nos veremos mas de dos veces por el foro, porque mas de dos dudas se me van a plantear con todo esto de la tienda online. Tendre en cuenta, cambiar el enrutamiento de las imagenes tras subir la web al servidor. Un saludo. Link to comment Share on other sites More sharing options...
jesusruiz Posted August 24, 2011 Share Posted August 24, 2011 Me alegro Ángel Te lo mereces, al final todo esfuerzo tiene su recompensa. La verdad que la solución no era sencilla. Ya nos irás contando los problemas que te vayan surgiendo. Un saludo. 1 Link to comment Share on other sites More sharing options...
theme_designer Posted August 25, 2011 Share Posted August 25, 2011 Hola, ¿sabes cómo hacer que una imagen de fondo dinámico? Link to comment Share on other sites More sharing options...
Recommended Posts