If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

OpenCart 2.x. How to change slider dimensions

This tutorial will show you how to change slider dimensions in Opencart 2.x.

OpenCart 2.x. How to change slider dimensions

For instance, if you have a 850 X 540 px image and you would like to use it as a slider banner, you will have to replace default dimensions with your new dimensions.

  1. Log into your OpenCart administration panel and go to the ‘Extensions’ -> ‘Modules’ menu:

    OpenCart2.x. How to change slider dimensions1.jpg

  2. Look for a module called ‘Tm Slideshow > Tm Slideshow’ and click ‘Edit’ button:

    OpenCart2.x. How to change slider dimensions2.jpg

  3. On the next page change the default dimensions (W + H) to those of your new image (i.e. to 850 X 540 px). Click ‘Save’:

    OpenCart2.x. How to change slider dimensions3.jpg

  4. Go to the System -> Design -> Banners menu. Find ‘slideshow’ and click ‘Edit’:

    OpenCart2.x. How to change slider dimensions4.jpg

  5. On the next page click on the image you want to replace. In the window that will pop up, click ‘Edit’ and navigate to the directory where the new image is located. Select the image and click ‘Open’:

    OpenCart2.x. How to change slider dimensions5.jpg

  6. Look for the image in the Image Manager and double click on it. The thumbnail of the original image will be changed to that of your image. Click ‘Save’ at the top right:

    OpenCart2.x. How to change slider dimensions6.jpg

  7. Open the front page of your site in Mozilla Firefox with the Firebug plugin installed. With the help of Firebug look for <div id="camera_wrap"> as shown below (the div id may differ depending on your template number):

    OpenCart2.x. How to change slider dimensions7.jpg

  8. Add a new property to this class selector like width: 850px ! important (where 850px is the width of your new banner image). This will prevent your image from looking stretched.

  9. Remove float: left; and add one more property to the same class selector like margin: 0 auto; in order to center your image:

    OpenCart2.x. How to change slider dimensions8.jpg

  10. Now you need to copy the edited class selector from Firebug and replace the original one in catalog/view/javascript/camera/css/camera.css with it:

    OpenCart2.x. How to change slider dimensions9.jpg

  11. Save the changes made to the camera.css file.

  12. Open the tm_slideshow.tpl file located in catalog/view/theme/theme###/template/module/ with any code editor available. Look for the initializing script between the two
    <script></script> tags:

    OpenCart2.x. How to change slider dimensions 10.jpg

  13. Since your new image width is 850px and its height is 540px, the new percentage should be 63.52% (540/850*100=63.52). Change height: ‘63,1%’ to height: ‘63,52%’, and save the changes.

  14. Now your banner image should be displayed with its new dimensions.

Feel free to check the detailed video tutorial below:

OpenCart 2.x. How to change slider dimensions