No announcement yet.

Simple Image Change Breaks Code for Menu in Template

  • Filter
  • Time
  • Show
Clear All
new posts

  • Simple Image Change Breaks Code for Menu in Template

    I would like to change templates for my store. I selected one- v40003 - but I do not like the color of the menu bar.

    I see that the bar is made up of three images: navL.png, navBG.png and navR.png.

    I FTP'd the entire v40003 folder onto my computer, loaded the three images into Photoshop, changed the color from pea green to black (by reducing the saturation). I deleted the original green images from the folder on my local PC, then saved the new black images, using the same exact image names. I then FTP'd the whole v40003 folder back into my templates directory on 3dCart, naming the newly uploaded folder v40003a so that I would not overwrite the original template.

    I now can see both templates when I go to Settings>Design>Themes and Styles. When I preview my live store with the original template, it looks fine (except the menu bar is that awful pea green).

    But when I preview the store with the v40003a template, the menu bar is very messed up. Under the header, my categories appear in regular typeface, in a single column, followed by the three images (which appear as single images, not as a bar).

    I did not change anything else except the three images. I did notice that the original green images are like 165 bytes, while mine are 2.76kB. In pixel size, the green images and the black images are exactly the same size.

    I've worked with templates before, and I never had a problem switching out images using this method before.

    Any ideas on why this is not working? Thanks!

  • #2
    This is hard to say. I am forced to believe that you changed something OTHER than just the image. Why not just change the image files and leave the template folder completely intact?


    • #3
      Let me update now.

      To pinpoint the problem, I started fresh with a brand new copy of the template, loaded into my 3dcart template folder.

      I then FTP'd the entire v40003 folder to my PC using Filezilla.
      I created a new folder in assets/templates on 3dCart called "v40003new"
      Without changing any file, I FTP'd the contents of the v40003 folder back to 3dCart, and into the 40003new folder.

      Basically, I took the good template, FTP'd it to my computer, then FTP'd it back, making no changes whatsoever.

      Going to Settings> Designs> Themes and Styles, and looking in the Installed Templates tab, I can see both the original v40003 template and the v40003new template. They should be exactly the same.

      Doing a live preview of the v40003 template - everything looks fine.

      Doing a live preview of the v40003new template - the header is fine, but the menu bar is all messed up.

      So- the question now becomes- why and how does FTP'ing the files cause something to break?


      • #4
        Without knowing how the template works and what its dependencies are, nobody here will really be able to give you the answer. However, what cbsteven was stating was correct. Why bother creating a problem that's unnecessary? Back up the old file somewhere so you can revert if needed, and just modify the file to your hearts content, rename it the same, and re-upload. The template may have a particular namespace for the javascript for the menu which is why its breaking. If all you are doing is modifying an image, you are making unnecessary work for yourself. Create a backup, and replace. Done.

        +1 cbsteven


        • #5
          Thanks, cbsteven- I think you may have nailed it. By uploading the template and giving it another name, it must have broken because some files are looking for the original template name. Good thinking!

          And jleclair, you are correct. The simple way is the best way. :-)

          I'm off to follow your advice. Thanks again, both of you.