{"id":30338,"date":"2013-10-26T09:37:43","date_gmt":"2013-10-26T13:37:43","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=30338"},"modified":"2013-10-26T09:37:43","modified_gmt":"2013-10-26T13:37:43","slug":"virtuemart-2-x-how-to-change-categories-images-dimensions","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/virtuemart-2-x-how-to-change-categories-images-dimensions.html","title":{"rendered":"VirtueMart 2.x. How to change categories images dimensions"},"content":{"rendered":"

This tutorial is going to show you how to re-size category images in VirtueMart templates. <\/p>\r\n\r\nVirtueMart 2.x. How to change categories images dimensions<\/a>\r\n\r\n

To follow the steps\u00a0 below you will need to use Firefox and its Firebug<\/a> plugin. <\/p>\r\n\r\n

    \r\n
  1. On\u00a0 your site, open the page\u00a0 where the category images are displayed (for instance, a sub-category page).\r\n\r\n\"\"<\/a>\r\n\r\n<\/li>\r\n
  2. Click the Firebug icon at the top right of your\u00a0 browser.<\/li>\r\n
  3. In the panel that will appear below, will click\u00a0 on “Click an element in the page to inspect”<\/strong>.<\/li>\r\n\r\n\"\"<\/a>\r\n\r\n
  4. With this tool selected, click on your category image (make sure that the image frame is highlighted) \u00a0<\/li>\r\n\r\n\"\"<\/a>\r\n\r\n
  5. In this case, under the Styles you will see the part of your .css file with the width property that you will need to edit. For instance:<\/li>\r\n\r\n
    \r\n.category-view .spacer h2 a img {\r\n    height: auto;\r\n    margin-top: 0 !important;\r\n    width: 130px;\r\n}\r\n\r\n<\/pre>\r\n\r\n  
  6. Try adjusting the width in Firebug to get the value  you can apply to the actual .css file afterwards. For instance, in our case we  have 4 images in a row and since we need 5, the category images should be  smaller. \r\n\r\n\"\"<\/a>\r\n\r\nSo we are  going to change the with to this<\/li>\r\n\r\n
    \r\n .category-view .spacer h2 a img {\r\n    height: auto;\r\n    margin-top: 0 !important;\r\n    width: 56px;\r\n}\r\n<\/pre>\r\n\r\n\r\n 
  7. When you are satisfied with the result, right click on  the .css file name (in our case it’s virtuemart.css) and select Copy Location<\/strong>. <\/li>\r\n\r\n\"\"<\/a>\r\n\r\n  
  8. Then paste  the location somewhere\u00a0 to see where your  .css file is located on FTP. In our case\u00a0  the location is templates\/theme380\/css\/virtuemart.css<\/strong><\/li>\r\n  
  9. Connect to  your FTP using your\u00a0 File manager or an  FTP client (FileZilla). <\/li>\r\n  
  10. Navigate to  the location of the .css file and open the file to edit.<\/li>\r\n  
  11. Look for the  same you made changes to in Firebug (to see the lines, you can just copy the  content of the file to Notepad++, Dreamweaver etc).<\/li>\r\n  
  12. Copy the  line from Firebug and replace the corresponding in .css.  \r\n\r\n\"\"<\/a>\r\n\r\nSave the  changes.<\/li>\r\n  
  13. Refresh the  sub-category page in your browser. You have done everything correctly, the  result should be the same as in Firebug. <\/li>\r\n  
  14. Now, when  the category images are re-sized, you may need to re-size their frames to  eliminate the space around the images. Using Firebug, select the image frame.  \r\n\r\n\"\"<\/a>\r\n\r\nUnder Style  <\/strong>you will find the width value responsible for the frame in the same .css file,  for instance<\/li>\r\n\r\n
    \r\n.category-view .spacer, .category-view .category {\r\n    margin: 0 0 0 10px;\r\n    padding: 0 !important;\r\n    width: 175px;\r\n}\r\n<\/pre>\r\n\r\n  
  15. Change the  frame size the same way the category image size was changed and re-fresh the  browser window to see the changes. <\/li>\r\n<\/ol>\r\n\r\n
    Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nVirtueMart 2.x. How to change categories images dimensions<\/a>","protected":false},"excerpt":{"rendered":"
    This tutorial is going to show you how  to re-size category images in VirtueMart templates.<\/p>\n","protected":false},"author":30,"featured_media":30348,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[733],"tags":[1306,1183,1267,494,2404],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/30338"}],"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\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=30338"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/30338\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/30348"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=30338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=30338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=30338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}