Wallet Template - Support Thread

I've submitted a new template for download. It can be found here
http://www.zen-cart.com/index.php?main_page=product_contrib_info&cPath=40_53&products_id=336

-based off template_default ZenCart v1.3.5
-tested great in Firefox
-tested great in IE 6*
-has NOT been tested in IE 7
-tested great in Opera
-includes preview picture
-includes needed css and common files
-includes readme file with instructions and suggested settings

*I never did address the issue brought up in this thread
http://www.zen-cart.com/forum/showthread.php?t=45922
because I simply coudln't replicate the problem.

Anyhow, this is a simple template and I hope someone out there can make use of it!

You can give it a test drive at
http://www.sandbox.wild-reed.com
(at least till I take it down!)
It's just the basic ZenCart demo store, so don't you dare try to buy "Bugs Life" from me. I wont send it!

Any feedback would be appreciated, especially should you find any errors.

Thanks!

zami

It's also available for test drive at (sorry, site offline) and I can confirm that it looks fine in IE7 and Firefox 2 beta.

(It also wins the prize for most helpful readme with a template)

GACK! Some of the heading links are huge ... and YELLOW.
That will not do at all.
I remember altering those, but clearly the changes never made it to the stylesheet I actually made available. Ehem. I'm going to have to fix that.
((yes, I'm a tad emberassed now))

Thanks so much for adding it to your testdrive page Kuroi. That's much appreciated!

And also for taking a peek at it in IE 7 (I'm using Linux and it was enough work to jimmirig IE 6 to run... I've no interest in wrestling with IE 7 right now!)

And Kuroi, I am so releived you used the word "helpful" (and not "remedial" or "long-winded") to describe the readme file.

Thanks again!

-zami

Did you validate the stylesheet of the contributed version, so it's error free? :no:

In Firefox and MSIE7, the "Add Selected Products", "Add To Cart", and "Submit The Information" text supercedes the button.

In MSIE7, there is a bit of "green" space underneath the logo, the buttons are sort of weird(ie "Back"), and the center column box side borders don't extend down all the way.

Other than that, it's nice. :happy:

The header width and height do not seem to be honored. My shop at http://www.three-elms.com/shop shows my header image spanning wider than yours did, even though I've kept the height and width the same as in your file. Changing those numbers doesn't seem to change the image size at all. Yes, I can scale my image, but it seems a little odd. Let me know if you need more info. Meanwhile I'll scale my image to a width of 724px. I guess the other option would be to make the content div wider.

Sketchy, thanks for the feedback! I've made some fixes and changes, and will update the template in the downloads tonight.

FarmGrrl, I'll take a look at your site (probably this evening) and try to see what the header problem is.

I'll also address the problem with some of the headers being over sized and post the changes to the stylesheet needed to fix them.

Sorry for the non-response response here, but I'm up to my eyeballs in kids at the moment!

-zami

Updates for version 1.2 (pending approval as of Oct 23rd)

• Fixed errors in the file stylesheet.css

• Added instructions regarding Side Box width inside Column width in the readme file.

• Box Headings and Center Box Headings Links have been "fixed" to display uniformaly (and look better!)

• The file stylesheet_css_buttons.css has been overhauled to fix width and vertical alignment problems.

If you're using the Wallet theme and have customized it, I'll be posting the specific changes made in the next post(s).

If your using the Wallet theme but haven't made any changes, it will probably be simpler to just install it again.

-zami

nice template.. clean, simple.. yet very eye catching :). Ill be giving this a test run on my test site shortly

**Main Stylesheet Changes **

The following errors have been fixed.

#ezPageBoxList li {
	margin: 0;
	padding: 0.2em. 0em;
	}

to

#ezPageBoxList li {
	margin: 0;
	padding: 0.2em 0em;
	}

AND (around line 830)

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .additionalImages, .gvBal, {
	text-align: center;
	}

to

just take the , out from behind .gvBal

AND (around line 916)

.wrapperAttribsOptions {
	vertical-align: top;
	margin: 5px;
	float: center;	
	}

to

.wrapperAttribsOptions {
	vertical-align: top;
	margin: 5px;
	float: none;	
	}

The Box Headings and Center Box Headings Links have been "fixed" to display uniformaly (no more huge yellow text!)

.leftBoxHeading, .rightBoxHeading {
	text-align: center;
	margin: 0em;
	padding: 0.5em 0.2em;
	}

to

.leftBoxHeading, .rightBoxHeading {
	text-align: center;
        padding: 0px;
        font-size: 1.3em;
	font-weight: bold;
	margin-top: 1em;
	color: #FFFFFF;
	background-color: #699B82;
	}

And

/*   LINKS   */
a:link, #navEZPagesTOC ul li a, #reviewsHeading a:link{
	font-size: 1em;
	color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;
	}
 
a:visited, #navEZPagesTOC a:visited, #reviewsHeading a:visited {
	font-size: 1em;
	color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;
	}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover , #reviewsHeading a:hover {
	font-size: 1em;
	color: #FFC7AD;
	}

to

/*   LINKS   */
a:link, #navEZPagesTOC ul li a, #reviewsHeading a:link, #featuredHeading a:link, #whatsnewHeading a:link{
	font-size: 1em;
	color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;
	}
 
a:visited, #navEZPagesTOC a:visited, #reviewsHeading a:visited , #featuredHeading a:visited, .whatsnewHeading a:visited {
	font-size: 1em;
	color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;
	}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover , #reviewsHeading a:hover, #featuredHeading a:hover, #whatsnewHeading a:hover {
	font-size: 1em;
	color: #FFC7AD;
	}

AND

h3.leftBoxHeading, h3.leftBoxHeading a {
	font-size: 1.3em;
	color: #ffffff;
	}

to

h3.leftBoxHeading, h3.leftBoxHeading a:link {
	font-size: 1.3em;
	font-weight: bold;
	color: #ffffff;
	}

**The background color of the Sponsors box has been changed to match the template colors. **

#bannerboxHeading {
	background-color: #0000CC;
	}

to

#bannerboxHeading {
	background-color: #9B7969;
	}

**The left and right columns have been seperated (mostly to fix the left/right borders of those columns) **

#navColumnOne, #navColumnTwo {
	vertical-align: top;
	background-color: #69829B;
	border-top: 1px solid #795252;
	border-right: 1px solid #795252;
	}

to

#navColumnOne {
	vertical-align: top;
	background-color: #69829B;
	border-top: 1px solid #795252;
	border-right: 1px solid #795252;
	}

#navColumnTwo {
	vertical-align: top;
	background-color: #69829B;
	border-top: 1px solid #795252;
	border-left: 1px solid #795252;
	}

CSS Buttons

I changed a LOT in the file
stylesheet_css_buttons.css

If your allready using the wallet theme and have made changes to it, I would still suggest downloading the newer version (anything past 1.2) and installing the file
stylesheet_css_buttons.css
to
includes/templates/wallet/css

The new sheet fixes the width and vertical alignment problems, and has been slightly recolored.

Sketchy!

Validate the stylesheet - check.
Fix the css buttons - check.
Bit of "green" space - hrrrmm...

What's the bit of green look like? Is it the same color green as elswhere on the page (like in the footer)?

Did you install the header.php file that came with the template to the common folder?

Is it mabye the categories tabs causing the space?

Let me know or show me an example and I'll try and tackle it!

Thanks!

zami

FarmGrrl:

The header width and height do not seem to be honored. My shop at http://www.three-elms.com/shop shows my header image spanning wider than yours did, even though I've kept the height and width the same as in your file. Changing those numbers doesn't seem to change the image size at all. Yes, I can scale my image, but it seems a little odd. Let me know if you need more info. Meanwhile I'll scale my image to a width of 724px. I guess the other option would be to make the content div wider.

FarmGrrl,

For the image you want to use, what are the height and width?

Are you saying if you put in a small image (say something 300px wide) it gets stretched out?

Did you enter in the height and width of your image in
includes/languages/english/wallet/header.php ?

You said for now you'll scale your image to 724, but when I look at your store, both the image itself, and the source code, are saying 758x95.

Mabye I'm not understanding what is happening?

To test a different logo size, I made a fresh store at
http://www.planetofsand.com/CSSTEST/ (also tested some css here, hence the silly name) and put up a 400x150 logo, and also set 400 and 150 into the header.php file.
It appears to be displaying correctly, without any stretching or resizing.

Let me know if your still having the problem and any other details you can think of! I'll certainly try to help.

-zami

Maybe I misunderstood it, because I wanted it to shrink my image to the width specified in the file. I looked at your logo.gif and changed my image width to match it, so it looks fine. I had thought that the width and height in the header file would change the definition of width and height in the stylesheet, thus resizing the image.

ah HAH!

I think I understand what your explaining now.
You have an image that is (just as an example) 300x 50
and you want the broswer to stretch it to the dimensions you specified in header.php?

It seems like that should work but I tried it on my little test page, and sure enough, telling the header.php that my 400x150 picture is really 800x50 did... nothing.

But! You CAN do this in
includes/templates/wallet/common/tpl_header.php

You'll have to take out the snippet of code that calls for the logo and put in static html for the image.

So! (First, make a backup copy of tpl_header.php and tuck it away somewhere for good measure.)

In the tpl_header.php file, around line 69
delete

<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>

and insert (after changing what's in red to your specifications)

<div id="logo">
<img src="http://www.three-elms.com/shop/includes/templates/wallet/images/banner.jpg" alt="alternate text here or leave blank" width="XXX" height="XXX" align="baseline" border="0" />
</div>

This seems to work fine! In a test store I told tpl_header.php to display my 758x124 logo at 200x200, and indeed it squished it down to 200x200
http://www.planetofsand.com/CSSTEST/

Let me know if this works for you?

Thanks!
zami

Hi Zami,

I'm sure it would work, but I don't actually need it since I resized my image. :) Can you let us know if all your changes have been incorporated into the current download?

FarmGrrl:

Hi Zami,

I'm sure it would work, but I don't actually need it since I resized my image. :) Can you let us know if all your changes have been incorporated into the current download?

Heh, well I guess that would explain why your page and logo looked fine (actually quite lovely) when I looked to see what the problem was! I'm glad you got it worked out. It might be for the best that you resized your image yourself anyhow, as browsers seem so poor at resizing images without 'uglifying' them.

The current Wallet download is all up-to-date, and I have no plans for any changes untill someone points out something broken. ::crossing my fingers::

(Actually I might re-organize the stylesheet so it's a little easier to navigate, but I wont be making any actual changes to it, so there wont be any need to 'upgrade' to it. )

Again, I'm glad you got everything worked out.

-zami

zami,

Thanks again for the great template.. hopefully itll work well on a client's site :) I think this template will work well for them

How would i go about changing the buttons for this template?

I've seen the buttons are in the include\templates\TEMPLATENAME\buttons\english folder but this does not seem to be on this template?