jg1977 Posted March 23, 2012 Share Posted March 23, 2012 Hola, estoy creando una web y he cogido la plantilla "pointe" pero quiero que de fondo tenga una imagen que tengo yo. Como puedo hacer esto? Gracias Link to comment Share on other sites More sharing options...
josecarre Posted March 23, 2012 Share Posted March 23, 2012 Depende de lo que quieras. No conozco esa plantilla, pero deberías probar con el archivo global.css de tu plantilla. Para colocar una imagen tienes que colocar una instrucción 'background-image: url("dirección de la imagen")'. En general, si la pones en el bloque 'body' la imagen quedará de fondo general. Si la quieres como fondo de la página en sí, tendrías que buscar algún bloque que se llame '#page'. Aunque todo esto puede cambiar según como esté construido el css de tu plantilla. Link to comment Share on other sites More sharing options...
jg1977 Posted March 24, 2012 Author Share Posted March 24, 2012 agradezco tu respuesta pero soy novato en esto y me suena a chino todo lo que me has dicho. Podrias especificarme mas? Luego tambien he leido que los recuadros de los modulos se pueden redondear. Eso como se hace? Gracias por tu tiempo Saludos Link to comment Share on other sites More sharing options...
josecarre Posted March 24, 2012 Share Posted March 24, 2012 A ver, es complicado de explicar, sobre todo porque no tengo ni encuentro esa plantilla que mencionas. Pero si no sabes nada de html y css la cosa se complica aún más. Lo primero: 1 ¿Estás haciendo la tienda en local o ya directamente online? 2 Necesitas un buen editor de textos orientado a programación para funcionar. ¿Cuál usas? Uno bueno, por ejemplo, es Notepad++. Mejor aún, en mi opinión, es Komodo Edit, pero Notepad++ es más ligero y sencillo. Lo buscas en Google y te lo instalas. 3 Coges el editor y vas a los archivos de tu tienda. Te vas a la carpeta Themes, de ahí a tu plantilla, y habrá una carpeta llamada css. La abres y ahí habrá un archivo llamado global.css. Esto es en lo que tienes que trabajar. 4 Este archivo es el que controla el aspecto general de tu tienda. Primero, copias tu imagen de fondo a una carpeta de destino en la tienda. Un buen sitio es la carpeta img del propio theme. La buscas (está en themes, dentro de la carpeta de tu plantilla) y pones allí el archivo de fondo que quieres usar. 5 Tampoco sé si quieres la imagen para los márgenes de la tienda o para fondo de todas las columnas. Esto último puede ser más complicado y confuso visualmente, no sé. Estaría bien que me dijeras alguna web que te ha inspirado esta idea para saber qué efecto buscas exactamente. 6 Las plantillas se organizan en secciones para controlar dónde se modifica cada cosa. Una buena opción para empezar es que busques en global.css una sección que empieza con la palabra 'body' y a continuación tiene algunas instrucciones entre corchetes. En una línea entre esos corchetes, pones lo siguiente: background-image: url('../img/mifoto'); incluyendo el punto y coma del final. Si quieres la imagen en el fondo de la tienda en general, incluyendo columnas centrales y laterales supongo que tendrás que hacer lo mismo con otra sección de css, que en mi plantilla se llama #page. Búscalo en el archivo global css y mete ahí también la instrucción que te dije antes. En principio tiene que funcionar. Pero situar y posicionar una foto de fondo requiere hacer pruebas y optimizar el asunto. Si pones una foto de fondo que pesa un mega tu web será inviable porque tardará mucho en cargar. Lo normal es optimizarla porque cualquier cosa sobre los 200 Kb empieza a ralentizar la carga considerablemente. Yo uso para los márgenes una imagen, pero es un motivo que se repite y la imagen de base no pesa ni 50 kb. Link to comment Share on other sites More sharing options...
jg1977 Posted March 24, 2012 Author Share Posted March 24, 2012 Buenas tardes Josecarre la verdad que soy un zoquete con esto de la programacion. TE voy comentando segun tus puntos: 1) la tienda la estoy creando creo que online solo que la tengo inactiva aun. 2) No uso ningun editor de texto. Lo unico que he enredado algo y no se como funciona es el firebug para hacer alguna prueba pero ya te digo que nulo total. 4) La imagen de fondo que tengo que subir puede ser jpg o tienes que ser png? 5)La verdad que me gustaria que la imagen solo afectara a las columnas laterales y el centro se mantuviera con el color que tiene para como bien dices no sobrecargar la zona donde mirara el cliente. Si pongo solo la foto en las columnas laterales el centro como quedaria? y luego tambien tambien estoy en duda si la parte de la cabecera donde esta el logo que tenga un color diferente al resto de extremo a extremo para diferenciarlo un poco. Pero tampoco se hacerlo... y por ultimo queria ponerle un pie de pago de estos anchos y mirando mucho he visto cosas pero de nada me entero y la verdad que con cualquiera que no sea el normal simple que viene me apañaria. Te agradezco de antemano que me hayas contestado. Saludos Link to comment Share on other sites More sharing options...
jg1977 Posted March 24, 2012 Author Share Posted March 24, 2012 Buenas tardes de nuevo, he buscado en el global.css la parte que empieza por body y he introducido la referencia que me dijiste y tambien subi la foto en .jpg a la carpeta .img de mi tema y cuando doy a refrescar la pagina sale la foto en un pantallazo y desaparece y se queda como estaba... nose que no estare haciendo bien.... Gracias Link to comment Share on other sites More sharing options...
josecarre Posted March 24, 2012 Share Posted March 24, 2012 Es posible que alguna otra instrucción detrás se superponga a la primera imagen. Otra del tipo background-image o background-color, búscalas y puedes desactivar trozos de código poniendo delante /* y detrás */. Ten encuenta que en un css puede haber instrucciones sucesivas que se solapan: habrá seguramente una sección body{} que controla toda la pantalla, detrás otra #page{} que lleva el cuerpo interior de la tienda, y detrás habrá sucesivamente #left_column, #right_column y #center_column. La idea es que se va de lo general a lo particular: pones el estilo global para todo, y luego vas retocando con instrucciones que sólo afectan a las partes sucesivas y cada vez con más detalle de la página: al final una sección #center_column p {} afectará sólo a los párrafos de la columna central. Link to comment Share on other sites More sharing options...
jg1977 Posted March 25, 2012 Author Share Posted March 25, 2012 Hola Jose Carre, usando firebug y enredando con lo que me has dicho al final he podido colocar la imagen de fondo y darle un color diferente a la parte central. Abusando un poco de ty buena voluntad, sabrias de algun pie de pagina gratuito que pueda instalar para darle un poco mas de imagen a la pagina? Mil Gracias!! Link to comment Share on other sites More sharing options...
nadie Posted March 25, 2012 Share Posted March 25, 2012 Hola Jose Carre, usando firebug y enredando con lo que me has dicho al final he podido colocar la imagen de fondo y darle un color diferente a la parte central. Abusando un poco de ty buena voluntad, sabrias de algun pie de pagina gratuito que pueda instalar para darle un poco mas de imagen a la pagina? Mil Gracias!! Prueba con este pie: http://shop.ddlx.org/es/fiche-produit-es/652-prestashop-footer-free-gratuit-.html Un saludo Link to comment Share on other sites More sharing options...
LieBM Posted March 25, 2012 Share Posted March 25, 2012 Hola, A mi me gustaria hacer una cosa pero no sé como hacerla. Yo tengo una imagen de fondo, pero me gustaría tener el fondo blanco del cuadro que ocupa la tienda y luego los márgenes que se vea el fondo que tengo, así no me interferirá el fondo en mis bloques de las columnas. ¿Alguien sabe como hacerlo? Link to comment Share on other sites More sharing options...
josecarre Posted March 25, 2012 Share Posted March 25, 2012 pon la instrucción background-image en la sección body del css, y luego un background-color en la sección #page 1 Link to comment Share on other sites More sharing options...
LieBM Posted March 25, 2012 Share Posted March 25, 2012 Tio josecarre, eres un monstruo!!!, solucionado y muy fácil de hacer..pensaba que tendría que hacer márgenes y demás, menos mal que todo estaba en la sección page. Un 10 para ti tio! gracias! Link to comment Share on other sites More sharing options...
LieBM Posted March 25, 2012 Share Posted March 25, 2012 Por cierto, ya puestos, lo he hehco pero veo que se me queda todo demasiado ajustado, esto queire decir que las columnas el contenido de las columnas están demasiado pegadas al y me gustaría dar un poco de grosos al page para que sobre a cada lado de las columnas y no se vea todo demasiado ajustado #page { background-color: white; } #header {z-index:10} #columns {z-index:1} #left_column {} #center_column {} #right_column {} #footer {} ¿Cómo podría hacerlo?. visita mi página web www.liestores.com y verás lo que quiero decir..Realmente lo que quiero es que el fondo del page , osea el color blanco sobresalga un poco a cada lado para que no se vean las columnas demasiado pegadas al fondo oscuro que tengo... Link to comment Share on other sites More sharing options...
jg1977 Posted March 25, 2012 Author Share Posted March 25, 2012 Buenas tardes Nadie, intento instalar el footer que me has pasado el link y no cargar en el BO. Hace todo el proceso pero no aparece por ningun lado... Saludos Link to comment Share on other sites More sharing options...
josecarre Posted March 26, 2012 Share Posted March 26, 2012 @joaquínBM: Para dar más margen al bloque central supongo que tendrás en #page alguna instrucción tipo 'width: XXX px;' también puede estar en ems o porcentaje, depende de la plantilla. Si está en pixels, aumentalo unos 20 o 30 px y vas probando hasta que te quede bien. Además, si tienes el ancho en pixels, puedes hacer un truco que te vendrá bien para hacer más eficaz la foto de fondo: ponerla en pixeles reales y dejar la zona central en blanco; ten en cuenta que ahora mismo estás cargando un montón de pixels de imagen que no se van a ver porque quedan debajo del bloque central. De este modo aligerarás mucho el tamaño de la foto, que pesa bastante y hace más lenta la carga de la página. En cualquier caso, deberías aligerar esta foto: por ejemplo, guardándola en Photoshop con una calidad media-baja. Quedará casi igual a la vista pero será mucho más baja en kb, y la carga de la página será más rápida. También podrías bajar la paleta de colores, ya que son tonos de azul y blanco. Otra cosa: creo que necesitas una buena imagen principal. No queda claro visualmente qué es lo que vendes en la tienda; te vendría bien una foto de grupo en la portada o algo así, no sé. Link to comment Share on other sites More sharing options...
LieBM Posted March 26, 2012 Share Posted March 26, 2012 Hola Josecarre, Realmente en #Page solo tengo lo que puse en en anterior mensaje, osea no tenía nada y añadí lo del background en white, pero voy a añadirle instrucciones de widht a ver como sale. Respecto a la imagen de fondo, en tamaño real me ocupa unos 350kb, supongo que no es mucho para una imagen tan grande. Aun así puedo intentar rebajar el tamaño. Lo de la página principal, yo tenía el módulo de productos destacados pero tampoco quería cargar demasiado la página principal, aunque estoy en busca de un módulo tipo flash o parecido a un powerpoint en donde yo pueda meter imágenes de los productos (editados como anuncios) y así los clientes pueden ver que vendo. Actualmente tengo el típico módulo de carrousel, pero me muestra todos los productos que tengo alelatoriamente, y yo lo que quiero es un módulo en el que yo pueda elegir qué imagenes mostrar y que aparezcan como anuncios. Si sabes de algun módulo así dímelo.. Y muchas gracias por los consejos y la ayuda, voy a ver si consigo darle un poco de margen a la página principal.. Link to comment Share on other sites More sharing options...
vistor92 Posted April 13, 2012 Share Posted April 13, 2012 Muy útil este post, muchas gracias por las instrucciones! Link to comment Share on other sites More sharing options...
Recommended Posts