OpenCart 1.5.x. How to change slider dimensions

This tutorial is going to show you how to re-size slider images on your OpenCart template.

OpenCart. How to change slider dimensions

For instance, you have a 1200 X 831 px image and you would like to use it for the banner so its dimensions are kept.

1. Log into your OpenCart administration panel and go to the “Extensions” -> “Modules” menu.

   

2. Look for a module called “Newcarousel” and click “Edit.”

   

3. On the next page change the default dimensions (W + H) to those of your new image (i.e. to 1200 X 831 px). Click “Save.”

   

4.  Go to the System -> Design -> Banners menu.

   

5. Find “slideshow” and click “Edit.”

   

6. On the next page click “Browse”  under the image you want to replace. In the window that will pop up, click “Upload” and navigate to the directory where the new image is located. Select the image and click “Open.”

   

7. Once the image is uploaded, you should see this message:

   

8. Look for the image in the Image Manager and double click on  it.

   

9. The thumbnail of the original image will be changed to that of your image. Click “Save” at the top right.

   

10. Open the front page of your site in Mozilla Firefox with the Firebug plugin installed.

11. In Firebug, look for <div id="camera_wrap"> as shown below (the div id may differ depending on your template number):

    

12. For instance, it has the following styles:

    .camera_wrap {
    display: none;
    float: left;
    position: relative;
    z-index: 0;
    }
    

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

    

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

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

    

    .camera_wrap {
    width: 1200px ! important;
    margin: 0 auto;
    display: none;
    position: relative;
    z-index: 0;
    }
    

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

17. Open the newcarousel.tpl  file located in catalog/view/theme/theme###/module/ with Adobe Dreamweaver or any code editor. Look for the initializing script between the two <script></script> tags:

    

18. Since your new image width is 1200px and its height is 600px, the new percentage should be 69.25% (831/1200*100=69.25). Change height: ’32.86%’ to height: 69.25%’, and save the changes.

19. Your banner image should now be displayed with its dimensions changed.

    

Feel free to check the detailed video tutorial below:

OpenCart. How to change slider dimensions