{"id":51295,"date":"2015-08-04T03:20:35","date_gmt":"2015-08-04T07:20:35","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=51295"},"modified":"2016-02-17T06:04:23","modified_gmt":"2016-02-17T11:04:23","slug":"opencart-2-x-how-to-change-slider-dimensions","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/opencart-2-x-how-to-change-slider-dimensions.html","title":{"rendered":"OpenCart 2.x. How to change slider dimensions"},"content":{"rendered":"

\r\n

This tutorial will show you how to change slider dimensions in Opencart 2.x.<\/p>\r\n

OpenCart 2.x. How to change slider dimensions<\/a><\/p>\r\n

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.<\/p>\r\n

    \r\n
  1. \r\n

    Log into your OpenCart administration panel and go to the ‘Extensions’ -> ‘Modules’<\/strong> menu:<\/p>\r\n

    \"OpenCart2.x.<\/a>\r\n<\/li>\r\n

  2. \r\n

    Look for a module called ‘Tm Slideshow > Tm Slideshow’<\/strong> and click ‘Edit’<\/strong> button:<\/p>\r\n

    \"OpenCart2.x.<\/a>\r\n<\/li>\r\n

  3. \r\n

    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’:<\/p>\r\n

    \"OpenCart2.x.<\/a>\r\n<\/li>\r\n

  4. \r\n

    Go to the System -> Design -> Banners<\/strong> menu. Find ‘slideshow’<\/strong> and click ‘Edit’<\/strong>:<\/p>\r\n

    \"OpenCart2.x.<\/a>\r\n<\/li>\r\n

  5. \r\n

    On the next page click on the image you want to replace. In the window that will pop up, click ‘Edit’<\/strong> and navigate to the directory where the new image is located. Select the image and click ‘Open’<\/strong>:<\/p>\r\n

    \"OpenCart2.x.<\/a>\r\n<\/li>\r\n

  6. \r\n

    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:<\/p>\r\n

    \"OpenCart2.x.<\/a>\r\n<\/li>\r\n

  7. \r\n

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

    \"OpenCart2.x.<\/a>\r\n<\/li>\r\n

  8. \r\n

    Add a new property to this class selector like width: 850px ! important<\/strong> (where 850px is the width of your new banner image). This will prevent your image from looking stretched.<\/p>\r\n<\/li>\r\n

  9. \r\n

    Remove float: left;<\/strong> and add one more property to the same class selector like margin: 0 auto;<\/strong> in order to center your image:<\/p>\r\n

    \"OpenCart2.x.<\/a>\r\n<\/li>\r\n

  10. \r\n

    Now you need to copy the edited class selector from Firebug and replace the original one in catalog\/view\/javascript\/camera\/css\/camera.css<\/strong> with it:<\/p>\r\n

    \"OpenCart2.x.<\/a>\r\n<\/li>\r\n

  11. \r\n

    Save the changes made to the camera.css<\/strong> file.<\/p>\r\n<\/li>\r\n

  12. \r\n

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

    \"OpenCart2.x.<\/a>\r\n<\/li>\r\n

  13. \r\n

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

  14. \r\n

    Now your banner image should be displayed with its new dimensions.<\/p>\r\n<\/li>\r\n<\/ol>\r\n

    Feel free to check the detailed video tutorial below:<\/p>\r\n

    OpenCart 2.x. How to change slider dimensions<\/a><\/p>","protected":false},"excerpt":{"rendered":"

    This tutorial will show you how to change slider dimensions in Opencart 2.x.<\/p>\n","protected":false},"author":61,"featured_media":51311,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1156],"tags":[1267,1157,816],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/51295"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/61"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=51295"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/51295\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/51311"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=51295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=51295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=51295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}