Buben Posted February 2, 2013 Share Posted February 2, 2013 (edited) Hola buenas!! Me gustaría saber como puedo hacer para colocar dos módulos, el novedades y el de promociones, a la derecha del slider. El caso es que he ampliado lo que sería la columna central, en el global.css: #center_column{width:956px} y añadí la siguiente línea para reducir el slider... #homeslider{width:400px} pero a partir de aquí ya ando perdido y no se que tendría que hacer parar poder añadir dos módulos a la derecha del slider, en el hueco que resta... Adjunto imágenes de lo que tengo y de como me gustaría que quedara, estoy trabajando en servidor local y la versión 1.5.3.1. Pues nada, muchísimas gracias de antemano a ver si me podéis orientar un poco. Edited August 15, 2013 by Buben (see edit history) Link to comment Share on other sites More sharing options...
Sergio Ruiz Posted February 2, 2013 Share Posted February 2, 2013 Reduce el ancho y haz que floten. Link to comment Share on other sites More sharing options...
Buben Posted February 3, 2013 Author Share Posted February 3, 2013 El ancho del slider ya está reducido a 400px y el float a left, el problema es que no me deja posicionar los módulos novedades y promociones especiales al lado del susodicho slider, no se si tiene algo que ver con los hooks o que es lo que pasa... Disculpad mi torpeza pero es que ando un poco perdido con todo esto... Link to comment Share on other sites More sharing options...
Buben Posted February 4, 2013 Author Share Posted February 4, 2013 Venga "compis" echarme una mano plz... Link to comment Share on other sites More sharing options...
guidoakd Posted February 7, 2013 Share Posted February 7, 2013 Tengo exactamente la misma duda y la puse aca http://www.prestashop.com/forums/topic/222730-duda-modulo-contentbox/ Alguna ayuda? Creo que queremos lo mismo jaja Gracias 1 Link to comment Share on other sites More sharing options...
Buben Posted February 7, 2013 Author Share Posted February 7, 2013 pues eso parece a ver si se animan ... Link to comment Share on other sites More sharing options...
Buben Posted February 25, 2013 Author Share Posted February 25, 2013 (edited) Bueno, tras mucho indagar y pobrar, ya he averiguado como poner módulos a la derecha del slider, lo comento aquí mas o menos como lo he hecho por si alguien tuviera el mismo problema, o para el amigo guidoakd, espero que les ayude: Primero decir que para poner módulos tipo el de novedades o productos especiales hay que editar el archivo .php de dichos módulos para añadirles una función que diga que se puede hookear en el displayHome(columna central), ya que por defecto creo que solo permiten hookearse a la derecha. Por el foro circulan varios post que explican bien como hacer esto... Luego nos queda el tema de como dividir el ancho de la columna central entre el slider y el resto de modulos que queramos añadir. Lo lógico sería editar los estilos y ajustar los width y float, pero en el caso del slider hacer esto no funciona porque si nos fijamos cuando se inicializa el slider al crear los div añade la estiqueta style width:"xxx"px, donde xxx va a ser siempre el ancho de la columna central y por mucho que hayamos reducido el tamaño en los css va a prevalecer el valor que viene en style. Así que pa resolverlo lo que yo hice fue ir al archivo de javascript, "jquery.bxslider.min.js". Si buscamos sobre la linea 67 veremos una funcion, function initcss, supongo yo que lo que hace es crear las capas "div". Pues bien miramos en esa linea y veremos que cuando va a crear las capas de la clase wrapper class y bx-windows, pues editamos el width y le ponemos ahí la medida que nosotros queramos, en mi caso 650 para ambas, ya que luego le dejo el resto hasta 980 para el otro modulo. La linea quedaría tal que así: function initCss(){setChildrenLayout(options.startingSlide);if(options.mode=='horizontal'){$parent.wrap('<div class="'+options.wrapperClass+'"style="width:653px; position:relative;"></div>').wrap('<div class="bx-window" style="position:relative; overflow:hidden; width:653px;"></div>').css({width:'999999px',position:'relative',left:'-'+(origLeft)+'px'});$parent.children().css({width:childrenWidth,'float':'left',listStyle:'none'});$outerWrapper=$parent.parent().parent();$children.addClass('pager');}else if(options.mode=='vertical'){$parent.wrap('<div class="'+options.wrapperClass+'" style="width:'+childrenMaxWidth+'px; position:relative;"></div>').wrap('<div class="bx-window" style="width:'+childrenMaxWidth+'px; height:'+wrapperHeight+'px; position:relative; overflow:hidden;"></div>').css({height:'999999px',position:'relative',top:'-'+(origTop)+'px'});$parent.children().css({listStyle:'none',height:childrenMaxHeight});$outerWrapper=$parent.parent().parent();$children.addClass('pager');}else if(options.mode=='fade'){$parent.wrap('<div class="'+options.wrapperClass+'" style="width:'+childrenMaxWidth+'px; position:relative;"></div>').wrap('<div class="bx-window" style="height:'+childrenMaxHeight+'px; width:'+childrenMaxWidth+'px; position:relative; overflow:hidden;"></div>');$parent.children().css({listStyle:'none',position:'absolute',top:0,left:0,zIndex:98});$outerWrapper=$parent.parent().parent();$children.not(':eq('+currentSlide+')').fadeTo(0,0);$children.eq(currentSlide).css('zIndex',99);} Pues hecho esto, ya solo falta editar el bx-style.css y ponerle float: left al bx-wrapper, ponemos tb el float: left en los estilos del otro módulo que vayamos a poner al lado y los ponemos uno debajo del otro en modulos->posiciones. Tambien ajustar el tamaño de las imagenes del slider mediante las opciones y ya debería de quedar listo. Me he enrollao un poco pero espero que les sirva, pues a mi me dio muchos quebraderos de cabeza, un saludo. Edited February 26, 2013 by Buben (see edit history) 1 Link to comment Share on other sites More sharing options...
samychamba Posted May 24, 2013 Share Posted May 24, 2013 Bueno, tras mucho indagar y pobrar, ya he averiguado como poner módulos a la derecha del slider, lo comento aquí mas o menos como lo he hecho por si alguien tuviera el mismo problema, o para el amigo guidoakd, espero que les ayude: Primero decir que para poner módulos tipo el de novedades o productos especiales hay que editar el archivo .php de dichos módulos para añadirles una función que diga que se puede hookear en el displayHome(columna central), ya que por defecto creo que solo permiten hookearse a la derecha. Por el foro circulan varios post que explican bien como hacer esto... Luego nos queda el tema de como dividir el ancho de la columna central entre el slider y el resto de modulos que queramos añadir. Lo lógico sería editar los estilos y ajustar los width y float, pero en el caso del slider hacer esto no funciona porque si nos fijamos cuando se inicializa el slider al crear los div añade la estiqueta style width:"xxx"px, donde xxx va a ser siempre el ancho de la columna central y por mucho que hayamos reducido el tamaño en los css va a prevalecer el valor que viene en style. Así que pa resolverlo lo que yo hice fue ir al archivo de javascript, "jquery.bxslider.min.js". Si buscamos sobre la linea 67 veremos una funcion, function initcss, supongo yo que lo que hace es crear las capas "div". Pues bien miramos en esa linea y veremos que cuando va a crear las capas de la clase wrapper class y bx-windows, pues editamos el width y le ponemos ahí la medida que nosotros queramos, en mi caso 650 para ambas, ya que luego le dejo el resto hasta 980 para el otro modulo. La linea quedaría tal que así: function initCss(){setChildrenLayout(options.startingSlide);if(options.mode=='horizontal'){$parent.wrap('<div class="'+options.wrapperClass+'"style="width:653px; position:relative;"></div>').wrap('<div class="bx-window" style="position:relative; overflow:hidden; width:653px;"></div>').css({width:'999999px',position:'relative',left:'-'+(origLeft)+'px'});$parent.children().css({width:childrenWidth,'float':'left',listStyle:'none'});$outerWrapper=$parent.parent().parent();$children.addClass('pager');}else if(options.mode=='vertical'){$parent.wrap('<div class="'+options.wrapperClass+'" style="width:'+childrenMaxWidth+'px; position:relative;"></div>').wrap('<div class="bx-window" style="width:'+childrenMaxWidth+'px; height:'+wrapperHeight+'px; position:relative; overflow:hidden;"></div>').css({height:'999999px',position:'relative',top:'-'+(origTop)+'px'});$parent.children().css({listStyle:'none',height:childrenMaxHeight});$outerWrapper=$parent.parent().parent();$children.addClass('pager');}else if(options.mode=='fade'){$parent.wrap('<div class="'+options.wrapperClass+'" style="width:'+childrenMaxWidth+'px; position:relative;"></div>').wrap('<div class="bx-window" style="height:'+childrenMaxHeight+'px; width:'+childrenMaxWidth+'px; position:relative; overflow:hidden;"></div>');$parent.children().css({listStyle:'none',position:'absolute',top:0,left:0,zIndex:98});$outerWrapper=$parent.parent().parent();$children.not(':eq('+currentSlide+')').fadeTo(0,0);$children.eq(currentSlide).css('zIndex',99);} Pues hecho esto, ya solo falta editar el bx-style.css y ponerle float: left al bx-wrapper, ponemos tb el float: left en los estilos del otro módulo que vayamos a poner al lado y los ponemos uno debajo del otro en modulos->posiciones. Tambien ajustar el tamaño de las imagenes del slider mediante las opciones y ya debería de quedar listo. Me he enrollao un poco pero espero que les sirva, pues a mi me dio muchos quebraderos de cabeza, un saludo. Es justo lo que estaba buscando, gracias! Link to comment Share on other sites More sharing options...
Recommended Posts