Apple Zen Support Thread

15 Jan 2007, 03:37

#1

Totally Zenned

Join Date:: Jan 2005
Posts:: 3,651
Plugin Contributions:: 2

Apple Zen Support Thread

Hi Guys!

I've been working on this template for a LONG time! Blame it on my perfectionist tendencies! This template is designed for 1.3.* versions of zen cart, and WILL NOT work for zen cart versions prior to 1.3.0.2.

Screenshot:
http://www.applezen.sagefish.com/images/scr_apple_zen.jpg

See it in action:
Apple Zen Template

This template is designed to increase in size as font size is increased in the browser, keeping the same aspect ratio. Even the logo is designed to resize (optional). In this template, I've also included some extra features, such as a horizontal drop down menu which includes your categories and more. Also included is the Order Steps Table-less module which gives your customer a visual indicator of where they are in the order process.

Apple Zen is designed to **ONLY** have sideboxes on the right side of the page, and will automatically move all left sideboxes over to the right side. It is NOT possible to have sideboxes on the left side with this template, but if you forget to go to the Layout Boxes Controller in the admin and change all sideboxes to the right, your left boxes will still display, but they will display below any right sideboxes.

I've included three extra colors in addition to the default apple green... red, blue, and grey. To change colors, simply open up includes/templates/apple_zen/css/stylesheet.css, and un-comment the color you want to use, and comment out the color you don't want to use. You'll also need to open up includes/templates/apple_zen/css/stylesheet_header_menu.css to change the colors in the drop down menu.

There are more instructions in the README file, also, be sure to note that if you are using a zen cart version that is earlier than 1.3.7, there are three files that you need to replace.

Let me know if you need any help with the template!

15 Jan 2007, 04:19

#2

jettrue

Totally Zenned

Join Date:: Jan 2005
Posts:: 3,651
Plugin Contributions:: 2

Re: Apple Zen Support Thread

Download HERE

15 Jan 2007, 14:36

#3

kuroi

Totally Zenned

Join Date:: Apr 2006
Posts:: 10,475
Plugin Contributions:: 9

Re: Apple Zen Support Thread

Great job Jade :thumbsup:. There's lot's of effortless-looking technical goodies in here (and I appreciate just how much effort you must have put into making them look effortless!). And I particularly like the way that you have also addressed the checkout area.

I hope you have a suitably rude response prepared for the first person who asks who to turn this into a liquid layout or make it stretch all the way across the screen :laugh:.

15 Jan 2007, 15:49

#4

jettrue

Totally Zenned

Join Date:: Jan 2005
Posts:: 3,651
Plugin Contributions:: 2

Re: Apple Zen Support Thread

kuroi:
Great job Jade :thumbsup:. There's lot's of effortless-looking technical goodies in here (and I appreciate just how much effort you must have put into making them look effortless!). And I particularly like the way that you have also addressed the checkout area.

Thanks kuroi! You just don't even KNOW how much headache that header menu gave me. There was a module in the download section for it, but it had some serious bugs depending on the order of the categories and whether or not the first category listed had subcategories. Anyway, this template would have been done a lot sooner if not for that, LOL. Not to mention trying to create a layout that increases with font size along with drop shadows on both sides (won't be seen in IE prior to IE7) and a background for the categories that increases with font size too.... well, anyway, I enjoyed the challenge. Now comes the challenge to support it, LOL :cool:

kuroi:
I hope you have a suitably rude response prepared for the first person who asks who to turn this into a liquid layout or make it stretch all the way across the screen :laugh:.

Don't EVEN suggest it! LMAO! Anyone who is reading this and wants the above... fuggitaboudit. Not gonna happen. :D :lamo:

16 Jan 2007, 21:06

#5

sunabac

Zen Follower

Join Date:: Dec 2006
Posts:: 211
Plugin Contributions:: 0

Re: Apple Zen Support Thread

I just downloaded this beautiful template and would like to know how to make the stripe design to go all the way down and under the "middle display" area??

16 Jan 2007, 22:37

#6

kuroi

Totally Zenned

Join Date:: Apr 2006
Posts:: 10,475
Plugin Contributions:: 9

Re: Apple Zen Support Thread

You would have to make the /includes/templates/apple_zen/images/site-bg.gif very much longer, or if it aligns nicely, repeat it vertically as well as horizontally.

16 Jan 2007, 22:43

#7

samad64

Totally Zenned

Join Date:: May 2006
Posts:: 554
Plugin Contributions:: 1

Re: Apple Zen Support Thread

this is an amazing looking template! ill probably be using this whenever i go to redesign my site :) thanks!

16 Jan 2007, 23:37

#8

jettrue

Totally Zenned

Join Date:: Jan 2005
Posts:: 3,651
Plugin Contributions:: 2

Re: Apple Zen Support Thread

Sunabac:
I just downloaded this beautiful template and would like to know how to make the stripe design to go all the way down and under the "middle display" area??

Hi There!

Use the site-bg.gif attached to this message (overwrite the one found in includes/templates/apple_zen/images

Then open up includes/templates/apple_zen/css/stylesheet.css and change:

body {
	background:url(../images/site-bg.gif) 0 9em repeat-x; 
	}

To this:

body {
	background:url(../images/site-bg.gif) 0 9em repeat; 
	}

Now after doing that, a teeny little bit of green stripe will show up just above the logo section, so you'll need to change this:

#headerWrapper {
	width:100%;
	text-align:center;
	margin:0 auto;
	}

to this:

#headerWrapper {
        background:#ffffff;
	width:100%;
	text-align:center;
	margin:0 auto;
	}

16 Jan 2007, 23:49

#9

sunabac

Zen Follower

Join Date:: Dec 2006
Posts:: 211
Plugin Contributions:: 0

Re: Apple Zen Support Thread

Well I can see why you did not have it... one can get "dizzy" watching these stripes on wide screen...
Would I be the first "rude" person to ask where/how to increase the width of the middle?? I am new to this... so be nice :)

17 Jan 2007, 00:34

#10

sunabac

Zen Follower

Join Date:: Dec 2006
Posts:: 211
Plugin Contributions:: 0

Re: Apple Zen Support Thread

our posts must have "missed each other.." I just put
background-repeat: repeat;
but I did notice the bit of that stripe as you mentioned, but it did not go away after I inserted background:#ffffff; in the #headerWrapper

I can live with that...
Thanks!

17 Jan 2007, 00:53

#11

dogtags

Totally Zenned

Join Date:: Nov 2003
Posts:: 876
Plugin Contributions:: 1

Re: Apple Zen Support Thread

Can hard URLs be added to the menu?

FanTAStic template :smile:

17 Jan 2007, 01:44

#12

jettrue

Totally Zenned

Join Date:: Jan 2005
Posts:: 3,651
Plugin Contributions:: 2

Re: Apple Zen Support Thread

DogTags:
Can hard URLs be added to the menu?

FanTAStic template :smile:

Definitely. That would be done in:

includes/templates/apple_zen/common/tpl_drop_menu.php

17 Jan 2007, 01:47

#13

jettrue

Totally Zenned

Join Date:: Jan 2005
Posts:: 3,651
Plugin Contributions:: 2

Re: Apple Zen Support Thread

Sunabac:
our posts must have "missed each other.." I just put
background-repeat: repeat;
but I did notice the bit of that stripe as you mentioned, but it did not go away after I inserted background:#ffffff; in the #headerWrapper

I can live with that...
Thanks!

Well, that worked on my 1.3.7 test site. What version of zen cart are you using?

17 Jan 2007, 02:04

#14

jettrue

Totally Zenned

Join Date:: Jan 2005
Posts:: 3,651
Plugin Contributions:: 2

Re: Apple Zen Support Thread

Sunabac:
Well I can see why you did not have it... one can get "dizzy" watching these stripes on wide screen...
Would I be the first "rude" person to ask where/how to increase the width of the middle?? I am new to this... so be nice :)

It's not rude to ask to increase the width, he was referring to make it a "fluid" layout, which means that the width would change depending on the width of the browser.

TO make the middle wider, you'd need to open up includes/templates/apple_zen/css/stylesheet.css and change all instances of:

"width:68em"

to another width. You'll have to test to see what works best for you. First, try adding 7em more. Replace all of the "width:68em" to "width:75em"

Then change all instances of

"width:69em"

to "width:76em" (which is 7em more).

Then open up includes/templates/apple_zen/css/stylesheet_header_menu.css

and change all instances of "width:68em"

to "width:75em".

17 Jan 2007, 03:38

#15

jettrue

Totally Zenned

Join Date:: Jan 2005
Posts:: 3,651
Plugin Contributions:: 2

Re: Apple Zen Support Thread

Sunabac:
Well I can see why you did not have it... one can get "dizzy" watching these stripes on wide screen...
Would I be the first "rude" person to ask where/how to increase the width of the middle?? I am new to this... so be nice :)

I've been thinking about this more, and I want to add the comment that it's wise to remember that not all people are using a wide screen monitor at a high resolution. So the relative "narrowness" that you see on your monitor, won't be "narrow" for someone with a smaller monitor at a lower resolution. Also, people don't generally have their browser window spread all the way across the screen. AND, this template is designed to get wider as people increase font size. That being said, I think I will make the default width of this a tad bit bigger, given that more and more people are using higher resolutions now with new and improved monitors.

Just my .02. :P

17 Jan 2007, 03:52

#16

sunabac

Zen Follower

Join Date:: Dec 2006
Posts:: 211
Plugin Contributions:: 0

Re: Apple Zen Support Thread

I am also running 1.3.7

17 Jan 2007, 17:31

#17

sunabac

Zen Follower

Join Date:: Dec 2006
Posts:: 211
Plugin Contributions:: 0

Re: Apple Zen Support Thread

jettrue:

TO make the middle wider, you'd need to open up includes/templates/apple_zen/css/stylesheet.css and change all instances of:

"width:68em"

to another width. You'll have to test to see what works best for you. First, try adding 7em more. Replace all of the "width:68em" to "width:75em"

Then change all instances of

"width:69em"

to "width:76em" (which is 7em more).

Then open up includes/templates/apple_zen/css/stylesheet_header_menu.css

and change all instances of "width:68em"

to "width:75em".

Thank you for your directions, but after switching display to 800 X 600 I don't think I will be touching it.. It looks fine with 1024 x 768 or higher. I wonder how many people still have 800 X600??? Or can we "ignore" them??

17 Jan 2007, 17:49

#18

dogtags

Totally Zenned

Join Date:: Nov 2003
Posts:: 876
Plugin Contributions:: 1

Re: Apple Zen Support Thread

You have the following in the apple_zen README:

2. Goto your Zen Cart administration...

Under the "Tools" menu choose
-Template Selection
-Edit
-Choose "Simple Zen" from the dropdown menu
-Click update

Should "Simple Zen" really be "Apple Zen" ?

HTH :smile:

17 Jan 2007, 18:50

#19

defluxx

New Zenner

Join Date:: Apr 2005
Posts:: 34
Plugin Contributions:: 0

Re: Apple Zen Support Thread

Let me first say that your Apple Zen Template is VERY nice!

I am somewhat new to zencart and CSS, modifying templates and all. I have been trying to customize your Apple Zen template to better suit my wife's website.

The test-site I'm working on is at: http://www.enchantingdream.com/Testsite/

There several things I am trying to do and having trouble with:

1. I would like to have a background bar behind the type on the top "Home Log In"

2. When viewing a product Category, I would like to have every-other item have a light color in the background for easier viewing.

3. On the Product View, after clicking on an item in a Category, I would like to move the item description over to the right so that it is not touching the item's image.

I am not able to find what I'm supposed to modify within the CSS to do this. I am editing the CSS with Adobe GoLive.

I would very much appreciate your help with this! Thanks!

17 Jan 2007, 19:14

#20

samad64

Totally Zenned

Join Date:: May 2006
Posts:: 554
Plugin Contributions:: 1

Re: Apple Zen Support Thread

Sunabac:
Thank you for your directions, but after switching display to 800 X 600 I don't think I will be touching it.. It looks fine with 1024 x 768 or higher. I wonder how many people still have 800 X600??? Or can we "ignore" them??

about 5% of my visitors have 800x600.. according to google analytics :P