"ZenCart Zen" Template Support

whiskeylover:

Clyde,

First, I really like how clean this template looks. I have noticed one little issue when looking at several people's sites that are using it, however. Everyone seems to have the same missing file: /images/sb_header.png. It shows up in the stylesheet.css but no one seems to have it. I checked the download and don't see it there either. Is there an image missing from the zip? Here is where in stylesheet.css it is called out:

.leftBoxHeading, .rightBoxHeading {
margin: 0;
padding: 0.5em 0.2em;
background-image:url(../images/sb_header.png);
background-repeat:no-repeat;
color:#000;
font-size: 1.3em;
font-weight: bold;
font-family:"Comic Sans MS";

An oversight on my part just delete the 2 highlighted lines:

.leftBoxHeading, .rightBoxHeading {
	margin: 0;
	padding: 0.5em 0.2em;
	background-image:url(../images/sb_header.png);
	background-repeat:no-repeat;
	color:#000;	
	font-size: 1.3em;
	font-weight: bold;
	font-family:"Comic Sans MS";

Wow...15 minutes to answer? I was expecting to check back in a couple of days. Thanks Clyde!

whiskeylover:

Wow...15 minutes to answer? I was expecting to check back in a couple of days. Thanks Clyde!

:D That long, I must have been working in another thread before I saw your post.

Any way, glad to help.

Clyde,

In testing various image sizes for my site from the Admin-Configuration-Images for G o K a r a o k e M a c h i n e.com, I was unable to find where to change the category icon size.

So far, I have not found a category icon image size in the CSS files. Any suggestions?

Thanks for your help.

Notageek

Most of the image sizes are controlled in the admin menu under Configuration >> Images

Thanks for the response. On my test site, I was able to change subcategory images and sidebox images in Admin->Configuration->Images.

However, that menu does not seem to affect the top category image, which is actually mixed with a few subcategory images on my main page which did not change size when I enlarged the subcategory images.

(I am displaying some subcategory images on the main page as though they were top categories, to give more emphasis to my main product; but it looks confusing when I display all the subcategories.)

I also would like to possibly change the color and size of the font which describes the categories under the images on the front page (not in the sidebox). I haven't yet searched for that text in the .CSS files but hopefully it won't be as difficult to find as the category image size CSS code.

Basically, my site looks cluttered and I want to standardize the images by making them larger, making their category labels larger, and possibly creating a frame around each image, and maybe product pages beneath the titles as links. I would like visitors to think of the category as a chunk of information with a concept behind it, something one can sink one's teeth into.

I am using the Centerbox Categories module by Numinix, so I can designate the order in which the categories and subcategories appear on the main page. Perhaps that module will have some bearing on the problem, but I can't see how. The subcategories which are displayed on the main page have not enlarged pursuant to my Admin->Configure->Images setting for subcategories.

I got the New Products Sidebox images to enlarge by increasing the size of the Small Image in Admin->Configure->Images.

I am considering whether or not I should change over to the Grid categories module for greater sense of order.

But first, I thought I would try to place my icons in frames and give them a larger title, and see if they could be enlarged and titled in a more user-friendly manner.

Notageek, w w w-g o k a r a o k e m a c h i n e - c o m

notageek:

Thanks for the response. On my test site, I was able to change subcategory images and sidebox images in Admin->Configuration->Images.

However, that menu does not seem to affect the top category image, which is actually mixed with a few subcategory images on my main page which did not change size when I enlarged the subcategory images.

(I am displaying some subcategory images on the main page as though they were top categories, to give more emphasis to my main product; but it looks confusing when I display all the subcategories.)

I also would like to possibly change the color and size of the font which describes the categories under the images on the front page (not in the sidebox). I haven't yet searched for that text in the .CSS files but hopefully it won't be as difficult to find as the category image size CSS code.

Basically, my site looks cluttered and I want to standardize the images by making them larger, making their category labels larger, and possibly creating a frame around each image, and maybe product pages beneath the titles as links. I would like visitors to think of the category as a chunk of information with a concept behind it, something one can sink one's teeth into.

I am using the Centerbox Categories module by Numinix, so I can designate the order in which the categories and subcategories appear on the main page. Perhaps that module will have some bearing on the problem, but I can't see how. The subcategories which are displayed on the main page have not enlarged pursuant to my Admin->Configure->Images setting for subcategories.

I got the New Products Sidebox images to enlarge by increasing the size of the Small Image in Admin->Configure->Images.

I am considering whether or not I should change over to the Grid categories module for greater sense of order.

But first, I thought I would try to place my icons in frames and give them a larger title, and see if they could be enlarged and titled in a more user-friendly manner.

Notageek, w w w-g o k a r a o k e m a c h i n e - c o m

You can change the size of the category images here:
admin -> configuration -> images ->
Category Icon Image Width - Product Info Pages
Category Icon Image Height - Product Info Pages

Thanks for the response. I see that the category icon does change on the product info page with that command.

I guess I am really trying to change it on the index page. I don't know why I can change items in the sidebox but not in the center of the index page. Once I enlarged pictures in the sidebox, the pictures in the center seem extra small. Someone directed my attention to a page where items were comfortably large. It does seem to make a difference in the index page being user-friendly.

I do have image handler installed, and on the forum I learned that the image handler uses 50% of the small image size when it renders for the sidebox. So that enlarges well but draws attention to the other items' small size.

Notageek

Okay, I followed I believe it was Devina's advice to change all of the sizes that say 100 height and 80 width, at the bottom of the Admin->Configuration->Images, starting with Product Listing width and going all the way down to Product All Listing width and height.

I'm not sure why it did not seem to work when I just changed one or two of those.

Thanks very much for pointing me back to the Configuration menu.

Notageek

notageek:

Thanks for the response. I see that the category icon does change on the product info page with that command.

I guess I am really trying to change it on the index page. I don't know why I can change items in the sidebox but not in the center of the index page. Once I enlarged pictures in the sidebox, the pictures in the center seem extra small. Someone directed my attention to a page where items were comfortably large. It does seem to make a difference in the index page being user-friendly.

I do have image handler installed, and on the forum I learned that the image handler uses 50% of the small image size when it renders for the sidebox. So that enlarges well but draws attention to the other items' small size.

Notageek

make sure you set ALL of these to the same width height that you want your images that you want your images to display (for example 125 x 125)

Small Image Width
Small Image Height
Subcategory Image Width
Subcategory Image Height
Image - Product Listing Width
Image - Product Listing Height
Image - Product New Listing Width
Image - Product New Listing Height
Image - New Products Width
Image - New Products Height
Image - Featured Products Width
Image - Featured Products Height
Image - Product All Listing Width
Image - Product All Listing Height

Hi Clyde,

Been looking for the right template/look for over a year now; looked at almost every free template (and more than a few paid ones) and downloaded for testing some. Last night I installed on test site one I thought I never would: zencartzen - http://www.prom-mart.com/

Actual download looks quite a bit different than shown on demo; but maybe better than I expected. Quick button change and this really looks nice.

You really do put some nice touches in your templates!

Of course, some questions:

1. The handheld_stylesheet - is this for mobile devices?

2. The date upper right, looks a little blury to me. How can I try it un-bolded?

3. Validation is among first thing I check with template testing. Zencartzen is green/pass html validation, but I get some 54 errors with css validation here. Do you think this a big problem with either browsers or google/search engines?

http://jigsaw.w3.org/css-validator/

Looking for right template to build in to a Lightinthebox ;) Maybe zencartzen is it; next up your customer service footer mod.

Thanks.

sph

https://www.prommart.com - live site ic-atheme template
https://www.prom-mart.com - test site zencartzen

PS: Been looking hard at your Mystic River template for some time, even downloaded it again last night with zencartzen for possible revisit. Colors are out there but could work with our biz. Main thing is the logo/yellow-orange header we could never work with.

SPH:

Hi Clyde,

Been looking for the right template/look for over a year now; looked at almost every free template (and more than a few paid ones) and downloaded for testing some. Last night I installed on test site one I thought I never would: zencartzen - http://www.prom-mart.com/

Actual download looks quite a bit different than shown on demo; but maybe better than I expected. Quick button change and this really looks nice.

You really do put some nice touches in your templates!

Of course, some questions:

1. The handheld_stylesheet - is this for mobile devices?

2. The date upper right, looks a little blury to me. How can I try it un-bolded?

3. Validation is among first thing I check with template testing. Zencartzen is green/pass html validation, but I get some 54 errors with css validation here. Do you think this a big problem with either browsers or google/search engines?

http://jigsaw.w3.org/css-validator/

Looking for right template to build in to a Lightinthebox ;) Maybe zencartzen is it; next up your customer service footer mod.

Thanks.

sph

https://www.prommart.com - live site ic-atheme template
https://www.prom-mart.com - test site zencartzen

PS: Been looking hard at your Mystic River template for some time, even downloaded it again last night with zencartzen for possible revisit. Colors are out there but could work with our biz. Main thing is the logo/yellow-orange header we could never work with.

1. Yes, but you can delete the stylesheet if you wish.

2. open includes/templates/zencart_zen/css/stylesheet.css
   find the following declaration and delete the highlighted portion:

.date {
padding-left:5px;
position: absolute;
top: 97px;
right: 20px;
color:#000;
font-weight: bold;
text-align: left;
font-size: 1.2em;
line-height:normal;
text-shadow: 2px 2px 2px #DFDFDF;
filter: Shadow(Color:#DFDFDF, Direction:135, Strength:2);
}

3. those errors are pointing out several CSS3 rules. These are perfectly valid rules, its just that the css validator is not up to date with CSS3

Thanks.

Why would I want to delete the handheld stylesheet? I'm excited that this is another nice touch you gave to the template. Does it not work well or somehow interfere with main site?

The sheet is definitely where it should be on my server, but I cannot see it in View Source. Perhaps only shows with a device? (Which I do not have.) I notice that the product info sheet only shows when I'm on a product.

Your template seems more sophisticated than the other templates I've really tested. Undoubtedly a function of zencart that I've never really mined.

I'll have to read through this thread for this theme.

SPH

SPH:

Thanks.

Why would I want to delete the handheld stylesheet? I'm excited that this is another nice touch you gave to the template. Does it not work well or somehow interfere with main site?

The sheet is definitely where it should be on my server, but I cannot see it in View Source. Perhaps only shows with a device? (Which I do not have.) I notice that the product info sheet only shows when I'm on a product.

Your template seems more sophisticated than the other templates I've really tested. Undoubtedly a function of zencart that I've never really mined.

I'll have to read through this thread for this theme.

SPH

The sheet is definitely where it should be on my server, but I cannot see it in View Source. Perhaps only shows with a device? (Which I do not have.)
It will only be used by the device it is meant for.

I notice that the product info sheet only shows when I'm on a product.
Correct. this is a "page specific" stylesheet and will only be used when you are on the product info page.

Thanks.

I read through the entire thread. Sorry about the css validation question, which you answered in post #172.

http://www.prom-mart.com/night-moves-prom/night-moves-6260

1. Am I using the latest version of this template? Mine does not have the red View Cart button, as shown on your site. I got mine last night from zencart downloads area after reviewing the template again at (sorry, site offline). I might like the red tab; how might I add it?

2. I don't intend to re-hash the lengthy css/list topic, but did you take the bullet point off of the Model and Manufacturer by design? I notice that the demo at (sorry, site offline) has bullet points. I might want them.

3. My tpl_product_info_display is one I made since coming to zencart several years ago, using a table. If I want to use yours, how wide can the photo be without the text intruding over the photo?

Thanks.

Looking at the product stylesheet...image width /250px/ widest to use your tpl product info display without text intrustion? My photo is 275px wide. I'll test soon.

http://www.prom-mart.com/night-moves-prom/night-moves-6260
http://www.prom-mart.com/alyce-designs/alyce-8886

Looks like 200px wide for main product pic is about max before text intrudes over pic. Thank the zc community for Image Handler! 200px could work, might even speed up the site a tad when I get to that.

I'm guessing, but is your product info display originally designed for a 100%/fluid site, perhaps to help fill-in some space on wide screens?

SPH:

1. Am I using the latest version of this template? Mine does not have the red View Cart button, as shown on your site. I got mine last night from zencart downloads area after reviewing the template again at (sorry, site offline). I might like the red tab; how might I add it?

2. I don't intend to re-hash the lengthy css/list topic, but did you take the bullet point off of the Model and Manufacturer by design? I notice that the demo at (sorry, site offline) has bullet points. I might want them.

SPH:

I'm guessing, but is your product info display originally designed for a 100%/fluid site, perhaps to help fill-in some space on wide screens?

1. create 2 new tab images, add 4 new declarations to stylesheet.css and modify several lines of code in tpl_header.php

Add the following to includes/templates/zencart_zen/css/product_info.css

#productDetailsList ul li {
list-style:disc;
}

No, it was designed specifically for the ZenCart_zen template.

clydejones:

Add the following to includes/templates/zencart_zen/css/product_info.css

#productDetailsList ul li {
list-style:disc;
}

http://www.prom-mart.com/night-moves-prom/night-moves-6260

1. Bullets didn't work. I've been going over thread but seems like prior issue with list was different.

2. If I downloaded template from your site, would it already have the red View Source tab?

3. I enabled the top category tabs, just in case may want them in future. But they are vertical. How can they be made horizontal?

Regardless, I like this template enough to hopefully bring to main site today.

SPH

SPH:

http://www.prom-mart.com/night-moves-prom/night-moves-6260

1. Bullets didn't work. I've been going over thread but seems like prior issue with list was different.

2. If I downloaded template from your site, would it already have the red View Source tab?

3. I enabled the top category tabs, just in case may want them in future. But they are vertical. How can they be made horizontal?

Regardless, I like this template enough to hopefully bring to main site today.

SPH

1. use the following:

#productDetailsList {
padding-left: 1em;
list-style:disc;
}

2. no, it is the same thats available in the forum downloads section.

3. open includes/templates/zencart_zen/css/stylesheet.css

find the following section:

ul#navCatTabs {
	margin: 0;
	padding: 0.5em 0.5em 0em 0.5em;
	list-style-type: none;
	}
ul#navCatTabs li a {
	margin: 0;
	padding: 0 0.5em 0 0.5em;
	text-align: left;
	text-decoration: none;
	float:left;
	display: inline;
	color: #000;
	background:#FFC15F;
	white-space: nowrap;
	}
ul#navCatTabs li a:hover {color: #854401;background:#EEAA3B;}

and replace it with the following:

#navCatTabs ul{
	margin: 0;
	padding: 0.5em 0.5em 0em 0.5em;
	list-style-type: none;
	}
#navCatTabs ul li a {
	margin: 0;
	padding: 0 0.5em 0 0.5em;
	text-align: left;
	text-decoration: none;
	float:left;
	display: inline;
	color: #000;
	background:#FFC15F;
	white-space: nowrap;
	}
#navCatTabs ul li a:hover {color: #854401;background:#EEAA3B;}