re-position re-size home slider

naykel · November 1, 2012

Hi All,

I put a post up earlier regarding the home slider and I thought I had figured it out but I am still having some problems.

I have been playing around with the css and I have figured out how to make the alterations I need but I have been unable to change to overall width of the bx-wrapper.

Looking through the html I found <div class="bx-wrapper" style="width:709px; position:relative;"> but I am not sure what is dictating the width of 709px

When I use the Google inspect tool it brings up

element.style{

width: 709px;

position; relative

}

If I alter this I can get it to do what I want but I can't find where to alter it in my .css or .tpl file.

I had a look in the .js file but I am still new to this so I could not really understand it.

I quickly uploaded something to my site if it is helpful for you to look http://shop.zakscust...om.au/index.php

Thanks in advance for the help

Regards

Nathan

benjamin utterback · November 1, 2012

Hello, the image size value of the Home Text Editor has already been changed. That size is not standard by default. Was this a template?

naykel · November 1, 2012

Hi Benjamin,

Its not the home text editor I am having trouble with it is the home slider.

The problem is when I put padding on the home slider it pushes it out of the main column and I can find out how to change the width to correct it. I can change everything except the width of the main div.

The pictures I am using are 600px and the column is 709px.

If I don't use padding it just puts the images in the top left and it does not look any good.

I have a couple of screen shots showing a before and after but I don't know how to link them here.

This is the code I need to change but I can't find where to change it. It seams to he hard coded somehow.

Best Regards

Nathan

cybermatatu · November 2, 2012

Hi,

I was having the same problem, but I figured out a jQuery hack.

$(".bx-wrapper,.bx-window").width("100%"); - Changing both the bx-wrapper & bx-windows width.

This is how I used it:

$(document).ready(function(){

/* Banner slider */

$('#topbanner').bxSlider({

mode: 'horizontal',

easing: 'easeOutBounce',

auto: true,

//captions: true,

speed: 3000,

pause: 8000,

pager: false,

controls: false

});

$(".bx-wrapper,.bx-window").width("100%");

});

</script>

Note:You can change width to whatever you choose.

Edited November 2, 2012 by cybermatatu (see edit history)

vekia · November 2, 2012

here is a tutorial about moving and chainging size of homeslider module: How to move image slider module from home to top in PrestaShop

you can find there how to move slider and hov to change its width and height

naykel · November 2, 2012

Hi,

Where do i put the information for the jQuery hack. I had a play around but was not successful.

vekia, the problem with this is it scales/stretches the image to the width of the div or column. It will work if the images are the same size but in my case the column is 680px but the image is only 600px and I am trying to put a colored back ground.

Thanks

cybermatatu · November 3, 2012

Hi,

I haven't worked with prestashop, but I think you should try looking at the file: homeslider.js.

It should be under: modules/homeslider/js/homeslider.js

The contents should look like below;

/*

* 2007-2012 PrestaShop

*

* NOTICE OF LICENSE

*

* This source file is subject to the Academic Free License (AFL 3.0)

* that is bundled with this package in the file LICENSE.txt.

* It is also available through the world-wide-web at this URL:

* http://opensource.or...ses/afl-3.0.php

* If you did not receive a copy of the license and are unable to

* obtain it through the world-wide-web, please send an email

* to [email protected] so we can send you a copy immediately.

*

* DISCLAIMER

*

* Do not edit or add to this file if you wish to upgrade PrestaShop to newer

* versions in the future. If you wish to customize PrestaShop for your

* needs please refer to http://www.prestashop.com for more information.

*

* @author PrestaShop SA <[email protected]>

* @version Release: $Revision: 14973 $

* @license http://opensource.or...ses/afl-3.0.php Academic Free License (AFL 3.0)

* International Registered Trademark & Property of PrestaShop SA

*/

$(function(){

if (typeof(homeslider_speed) == 'undefined')

homeslider_speed = 500;

if (typeof(homeslider_pause) == 'undefined')

homeslider_pause = 3000;

if (typeof(homeslider_loop) == 'undefined')

homeslider_loop = true;

$('#homeslider').bxSlider({

infiniteLoop: homeslider_loop,

hideControlOnEnd: true,

pager: true,

autoHover: true,

auto: homeslider_loop,

speed: homeslider_speed,

pause: homeslider_pause,

controls: false

});

/* Put your JQuery hack here */

$(".bx-wrapper,.bx-window").width("680px");

});

Give it a try and let me know.

Good Luck

Regards;

Fredrick

Edited November 3, 2012 by cybermatatu (see edit history)

naykel · November 3, 2012

Hey Fredrick, you are a champion that works great.

cybermatatu · November 5, 2012

_{Thanks buddy, you're welcomed!}

Gany.akshu · November 15, 2012

Great thanks a lot

go2pub · January 4, 2013

$(".bx-wrapper,.bx-window").height("100px");

This works to change the height of the box, thanks for the pointer :-)

abhijeetkmohite · February 13, 2013

Hi i am using this hack in my slide

/* Put your JQuery hack here */

$(".bx-wrapper,.bx-window").width("800px");

it works when i change the slider size

but the problem is that when i put multiple images in the slider they are still taking the original size of the image slider you can check out on this website

www.bbitch.in

please help

thanks in advance

Northman · March 1, 2013

Hi everyone,

I'm new to prestashop and i find this forum very useful.

I tried the above method of moving the slider from the hook Home to the hook Top, but it was not satisfying since the hook top is in the div #header and i wanted to move the slider between the div #header and the div #columns.

To match this, i put the addJS and addCSS lines to hookDisplayHome() and then called homeslider.tpl in my displayCustomhook() function. Then in the backoffice, i had to attach the module both to DisplayHome hook (for the JS/CSS to be inserted) and to my DisplayCustomhook() (for the tpl to be displayed).

Since my website is offline, i can only copy/paste part of code. My customed hook is named 'displayCarousel'.

header.tpl:

<div id="header" class="grid_9 alpha omega">
{hook h='displayLienspermanents'}
<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />
</a>
<div id="header_right" class="grid_6 omega">
{$HOOK_TOP}
</div>
</div>
<div id="carouselHome" class="grid_5">
{hook h='displayCarousel'}
</div>
<div id="columns" class="grid_9 alpha omega clearfix">
<!-- Left -->
.......... (original ps code after)

file homeslider.php : (don't forget the registerHook('displayCarousel') in the install method)

public function hookDisplayHome()
{
 if(!$this->_prepareHook())
  return;
 // Check if not a mobile theme
 if ($this->context->getMobileDevice() != false)
  return false;
 $this->context->controller->addJS($this->_path.'js/jquery.bxSlider.min.js');
 $this->context->controller->addCSS($this->_path.'bx_styles.css');
 $this->context->controller->addJS($this->_path.'js/homeslider.js');
 // return $this->display(__FILE__, 'homeslider.tpl'); // <-- remove or comment this line 
}

public function hookDisplayTop()
{
 return $this->hookDisplayHome();
}

public function hookDisplayCarousel()
{
 return $this->display(__FILE__, 'homeslider.tpl');
}

If that helps...

Edited March 18, 2013 by Northman (see edit history)

turdi · March 27, 2013

Hi i am using this hack in my slide

/* Put your JQuery hack here */

$(".bx-wrapper,.bx-window").width("800px");

it works when i change the slider size

but the problem is that when i put multiple images in the slider they are still taking the original size of the image slider you can check out on this website

www.bbitch.in

please help

thanks in advance

I have the same problem, any solution???

here's the web: http://www.growmundocannabico.com/es/

Edited March 27, 2013 by turdi (see edit history)

nuchie1 · March 27, 2013

I have the same problem, any solution???

here's the web: http://www.growmundocannabico.com/es/

Thanks I've been trying to resize for a while. Now I need to know how i can center the slider horizonaly

Edited March 27, 2013 by nuchie1 (see edit history)

vekia · March 27, 2013

paste the url, we will check what you have to do

turdi · March 27, 2013

Dont want to advertise, but I found a simple solution, free slider. Beautiful and easy to configure.

http://www.prestasho...ider-for-ps-15/

I used it here: http://www.growmundocannabico.com/es/

Edited March 27, 2013 by turdi (see edit history)

nuchie1 · March 27, 2013

paste the url, we will check what you have to do

My URL is www.Leoswoodcrafts.com

Edited March 27, 2013 by nuchie1 (see edit history)

abhijeetkmohite · March 29, 2013

my website url is www.bbitch.in

nsuriac · April 11, 2015

another solution to controlle the height and width is to set useCSS to true in the jquery file. It worked for me.

if (!!$.prototype.bxSlider)

$('#homeslider').bxSlider({

useCSS: false, /*change this to true*/

maxSlides: 1,

slideWidth: homeslider_width,

infiniteLoop: homeslider_loop,

hideControlOnEnd: true,

pager: false,

autoHover: true,

auto: homeslider_loop,

speed: parseInt(homeslider_speed),

pause: homeslider_pause,

controls: true

});

hanuwant · April 28, 2015

here is a tutorial about moving and chainging size of homeslider module: How to move image slider module from home to top in PrestaShop

you can find there how to move slider and hov to change its width and height

Hi,

This is not the right place to start this topic but I am not able to start new topic.

My question is related to PS version 1.6.0.11.

I have changed my slider height form 100% to 300px. Now home slider is looking good but the new problem is that my both photos which are besides the slider got disturbed.Now other two pictures are not arranging properly. Please help.

I tried to attach img but it is not attaching.

re-position re-size home slider

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites