Free Template "Future Zen"

TShooters:

Thanks so much for the template, Kuroi! Simply awesome! Good work! Rebuilding my store w/1.3.0.1 from scratch in a test folder. Here's where I am so far with a few modifications to your template. Thank you! Thank you!
http://90bodybasics.com/ZenTest/
Hey you tweaked the box widths, the images and the colors - that's great:thumbsup: The intention of this template is to encourage you to find a path that takes you away from the traditional boxed designs to create something that is your own and unique. You've made a good start down this path. Keep up the good work.

Big GEE:

Now on to the next problem - how do I change the height of the header table cell to accomodate the background image that I want to use in it? And also how do I get rid of the logo.gif? :dontgetitAs you are now using the future Zen template, the header banner is no longer contained in a table cell, but a div tag instead. In your stylesheet find the code> #logoWrapper {
width:760px;
height:110px;
background-image:url(../images/header_bg.jpg);
background-repeat:no-repeat;
}and change the height to be 129px (the height of your banner image).

There's a traditional explanation for removing the logo gif involving creating a copy of the tpl_header.php file in your template and commenting out the code that causes it to be displayed. Under pressure from Sermonzone I'm now going to break silence and tell of a much easier method. Find the following code in your stylesheet> #logo {

margin-top: 40px;
margin-left: 25px;
}and replace it with> #logo {display:none}Job done.

Keep up the good work.

kuroi:

As you are now using the future Zen template, the header banner is no longer contained in a table cell, but a div tag instead. In your stylesheet find the codeand change the height to be 129px (the height of your banner image).

There's a traditional explanation for removing the logo gif involving creating a copy of the tpl_header.php file in your template and commenting out the code that causes it to be displayed. Under pressure from Sermonzone I'm now going to break silence and tell of a much easier method. Find the following code in your stylesheetand replace it withJob done.

Keep up the good work.

Well we're certainly getting there (slowly). That stylesheet is like a magic wand! I'm going to have to sit down and analyse it so that I know what I'm doing for the future. Logo's gone, my background image is there and it's starting to take shape. I now need to remove the tag line and the top bit is nearly there!!

One little problem though, and I've seen something similar in an earlier post from someone who was crying for help - the boxes have shifted out of alignment, I suppose that is easily resolved as well in your magic css file. trouble is I don't yet know where :blush:

Take a peek: http://sccambria-online-linux-store.com/shop

G.

When I enable the Shopping Cart sidebox and sort it so it is the sidebox at the top of the right column, I observe extra vertical spacing appears between each of the sideboxes in that right column. This spacing is filled by sidebox_middle.gif (appx 25 pixel high).

However everything is normal when I sort sideboxes so the SC sidebox is not the top sidebox in the column or when I disable the SC sidebox.

Anyone else see this ideas? Likely a CSS thing. Is this specific to Future Zen or Zen Cart 1.3.0.1?

Woody

kuroi:

As you are now using the future Zen template, the header banner is no longer contained in a table cell, but a div tag instead. In your stylesheet find the codeand change the height to be 129px (the height of your banner image).

There's a traditional explanation for removing the logo gif involving creating a copy of the tpl_header.php file in your template and commenting out the code that causes it to be displayed. Under pressure from Sermonzone I'm now going to break silence and tell of a much easier method. Find the following code in your stylesheetand replace it withJob done.

Keep up the good work.

What if I want to use a .jpg for my logo? Where do I change that (and how:blush: )

By the way, this is a very attractive template, straight out of the box:thumbsup:

kuroi:

the space in the line

$template_name = 'future Zen';

Hey thanks for clarifying this Kuroi. That makes complete sense. For whatever reason I have always had the understanding that the template name inside of the file had to be the same. But now I understand it is only a define and stand corrected. Sorry BigGee for my misinformation on that point ;-)

Woody

Big GEE:

Well we're certainly getting there (slowly). That stylesheet is like a magic wand! I'm going to have to sit down and analyse it so that I know what I'm doing for the future. Logo's gone, my background image is there and it's starting to take shape. I now need to remove the tag line and the top bit is nearly there!!

One little problem though, and I've seen something similar in an earlier post from someone who was crying for help - the boxes have shifted out of alignment, I suppose that is easily resolved as well in your magic css file. trouble is I don't yet know where :blush:

Take a peek: http://sccambria-online-linux-store.com/shop

G.Hmmm. I'm beginning to wonder if you're taking the mickey. The reason that your boxes are out of alignment is because you have changed the following (which I have cut and pasted from your stylesheet as it was the previous time you posted> .sideBoxContent {
background-image:url(../images/sidebox_bottom.gif);
background-repeat:no-repeat;
background-position:bottom;
padding: 0.4em;
}which correctly positions the bottom image for the side boxes at the ... well ... the bottom, into> .sideBoxContent {
background-image:url('../images/sidebox_bottom.gif');
background-repeat:no-repeat;
padding: 0.4em; background-position-y:50%
}which attempts to move them to a position halfway up (or down) the box by way of a microsoft-specific extension not recognised by all other browsers. But why you would want to do this is a mystery to me. It seems equally mysterious that having made such a specific and syntactically correct change, you would be surprised at the results.

wtashby:

What if I want to use a .jpg for my logo? Where do I change that (and how:blush: )

Edit /templates/future_zen/CSS/stylesheet.css

By default you should see:

#logoWrapper {
width:760px;
height:110px;
background-image:url(../images/header_bg.jpg);
background-repeat:no-repeat;
}

In the the #logoWrapper container change header_bg.jpg to the filename for your your jpeg logo image.

And of course be sure to upload the jpeg to /future-zen/images/

If then you still see the default zen cart logo adjacent to same location where your logo appears, read previous posts in this thread on how to disable the default logo.

Woody

kuroi:

There's a traditional explanation for removing the logo gif involving creating a copy of the tpl_header.php file in your template and commenting out the code that causes it to be displayed. Under pressure from Sermonzone I'm now going to break silence and tell of a much easier method. Find the following code in your stylesheetand replace it ...

That was just too easy Kuroi! I guess I just enjoy making it hard on myself and sometimes harder on others ;-) Thanks for the quality pointers and hints!

Woody

Beautiful Woody:thumbsup:

That did it perfectly after following the post saying to use #logo {display:none}

You guys are why my sig says what it says:yes:

Sorry Woody, we're a bit out of alignment this evening :smile:. Personally I'd deal with this by making a copy of includes/languages/english/header.php in the includes/languages/english/YOUR_TEMPLATE directory (if it's not there already) and then editing the line```php
define('HEADER_LOGO_IMAGE', 'logo.gif');

kuroi:

Sorry Woody, we're a bit out of alignment this evening :smile:. Personally I'd deal with this by making a copy of includes/languages/english/header.php in the includes/languages/english/YOUR_TEMPLATE directory (if it's not there already) and then editing the line```php
define('HEADER_LOGO_IMAGE', 'logo.gif');

True, but I personally don't need the background image, and the css changes are much simpler.  Others may need a background image, so that is a helpful suggestion as well.:thumbsup:

Woodymon:

When I enable the Shopping Cart sidebox and sort it so it is the sidebox at the top of the right column, I observe extra vertical spacing appears between each of the sideboxes in that right column. This spacing is filled by sidebox_middle.gif (appx 25 pixel high).

However everything is normal when I sort sideboxes so the SC sidebox is not the top sidebox in the column or when I disable the SC sidebox.

Anyone else see this ideas? Likely a CSS thing. Is this specific to Future Zen or Zen Cart 1.3.0.1?

WoodyIn fact, it's a ZC 1.3+ bug that is highlighted by the future Zen template under specific circumstances. There's a full discussion of it in this thread. But if you want, you can skip past it and just edit the template_default /sideboxes/tpl_shopping_cart.php file in the way described by Dr Byte at the end of the thread. Hopefully this will be fixed in the next ZC release.

Woodymon:

Edit /templates/future_zen/CSS/stylesheet.css

By default you should see:

#logoWrapper {
width:760px;
height:110px;
background-image:url(../images/header_bg.jpg);
background-repeat:no-repeat;
}

In the the #logoWrapper container change header_bg.jpg to the filename for your your jpeg logo image.

And of course be sure to upload the jpeg to /future-zen/images/

If then you still see the default zen cart logo adjacent to same location where your logo appears, read previous posts in this thread on how to disable the default logo.

Woody

Woody, How can I center the background image so that there is equal BG color on both sides of the image? Right now, it's a little to far to the left, with more BG color to the right.

EDITED:

I just realized that everything is a bit to the left, with too much background to the right. How do I fix that?

kuroi:

Sorry Woody, we're a bit out of alignment this evening :smile:. Personally I'd deal with this by making a copy of includes/languages/english/header.php in the includes/languages/english/YOUR_TEMPLATE directory (if it's not there already) and then editing the line```php
define('HEADER_LOGO_IMAGE', 'logo.gif');

Again a good pointer from Kuroi. 

I am finding new methods and workarounds everyday to do the same or slightly similar things in Zen Cart. 

Often I find configuring Zen cart is like opening a box of chocolates. You never know what you are going to get... that is until you try it ;-)

Woody

wtashby:

Woody, How can I center the background image so that there is equal BG color on both sides of the image? Right now, it's a little to far to the left, with more BG color to the right.

EDITED:

I just realized that everything is a bit to the left, with too much background to the right. How do I fix that?

Wtashby-

What is your URL? I have forum sigs/avatars disabled.

Did you center your logo when you created image in graphics editor? That is are you certain there are no hidden or transparent pixels to the right of image when exported as a jpeg/gif?

If not then it sounds like column pixel width mismatch issue. The total pixel width of left+center+right columns must equal logo image pixel width if the logi is to auto center on page. Otherwise you will need to force positioning (centering) via CSS.

In sytlesheet.css what do you see for:

#logo
#mainWrapper
#logoWrapper

What do you see in Configuration > Layout Settings?

Column Width - Left Boxes
Column Width - Right Boxes
Column Width - Left
Column Width - Right

Would have to see your site before making specific suggestions

Woody

Woodymon:

What is your URL? I have forum sigs/avatars disabled.
Wtashby - Just checked your User Profile. Found that you need to fix your sig ;-)

Wtashby- I checked out http://www.ashbysontheweb.com/ but that website is utilizing a table based custom (aow) template.

Woody

kuroi:

In fact, it's a ZC 1.3+ bug that is highlighted by the future Zen template under specific circumstances. There's a full discussion of it in this thread. But if you want, you can skip past it and just edit the template_default /sideboxes/tpl_shopping_cart.php file in the way described by Dr Byte at the end of the thread. Hopefully this will be fixed in the next ZC release.

Kuroi-

I was battling several hours thinking I could lick it but decided I was wasting time/getting lost so I finally pulled over and asked for directions. ;-)

Much thanks for pointing me to the bug report thread, and more thanks for actually locating the issue, and even more thanks for eloquently explaining issue to the devs. And thanks to Dr Byte for the workaround.

Woody

Woodymon:

Kuroi-

I was battling several hours thinking I could lick it but decided I was wasting time/getting lost so I finally pulled over and asked for directions. ;-)

Much thanks for pointing me to the bug report thread, and more thanks for actually locating the issue, and even more thanks for eloquently explaining issue to the devs. And thanks to Dr Byte for the workaround.

WoodyYou're welcome Woody - this is what the forum is all about. Sadly you overstate my eloquence, given that I stuttered a bit and nneded some push bask from the devs before I got by diagnosis right:blush:.