Ok, maybe this will help someone else out as this seemed to be really hidden on the zen cart forum.  Am building a new template for a client and as I typically do I copy the classic template file folder in the /includes/templates/ and proceed to custom build it. Ok, this time my goal was to use as few actual images as I could for the design and use CSS buttons only.  

Ok, but I quickly ran into an issue of resizing. The coloring, shading, border inset/outset control is all pretty obvious in the CSS buttons stylesheet located in the CSS folder.  But, trying to resize the header search button became quickly impossible. It just flat out wouldn’t budge!!!  I tried width in ems, pixels and percentages and nothing worked.  Looking in the Safari developer tool, element inspector, I see an inline element style of width:80px; no matter what I did.

I then proceeded to look at the tpl_search_header.php file located in the includes/templates/template_default/sideboxes/ folder to directly change or delete this 80px code, but alas, it was not there! In the CSS button section I only found a php function to create the button… No help there.

I then needed to learn how this button functioned in zen cart. Looked in includes/functions… No luck… Did a search for it directly with Apple’s spotlight tool and found WAY TOO MANY… Out of luck again.  I needed to find out where it was built, and I remembered editing the HTML_output.php file a while back. It made sense it would be here as a great many functions exist in this file to actually show various HTML elements in zen cart without us having to create any… Especially those ones that you click to go into an ssl session.

Ok, so it was in this file that I found it.  The function for creating the zen cart buttons was indeed here.  Ok but what to edit?  I looked for the width:80px and it couldn’t be found…  Then looked for it with a space like this width: 80px and still nothing. Ok I then looked for just 80 and I found it! 

Sooooo, I now found the section of code but what was I to do TO the code to give me total control via the stylesheet. I found a referenced $style variable that related to a concatenated section for the actual style=”” section of the button… Well, knowing that I wanted to completely control all aspects of the button from the stylesheet, I quite simply eliminated the $style variable from the concatenation by deleting the $style variable and the period just before it.

Now, I am able to completely control the style of the CSS based header search button in zen cart. And I found out that I am able to control various of the other submit buttons as well.  I really have no idea why the zen cart team decided to code this in this manner.  Perhaps it is a remnant from the old OS commerce code? Perhaps they were trying to save the basic buttons coding from the average user? Most folks hate CSS, but I really love it and the complete control it gives you over the total design of the site. And especially now that css3 / html5 is out and the fact that everything on the iPad is html5 and css3 this is now suddenly a really big deal…  Anyways, I hope this helps someone else wanting to build their own CSS based zen cart buttons.  -Tom