Free Template "Future Zen"

While modifying the look of this great template I seem to have lost my fullwidth_capsule image (the bar that sits behind the categories just below the header image). Can you please help me to remember where it was that I would have disabled it in the first place? Thanks!

ptraffick:

While modifying the look of this great template I seem to have lost my fullwidth_capsule image (the bar that sits behind the categories just below the header image). Can you please help me to remember where it was that I would have disabled it in the first place? Thanks!
In future Zen versions 1.0 and 1.1, that capsule didn't sit behind the categories, it sat behind the EZ-Page links in the header. (It doesn't exist in version 1.2.) In the stylesheet this was achieved by way of the following style> #navEZPagesTop {

background-image:url(../images/fullwidth_capsule.gif);
background-repeat:no-repeat;
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em 0 0.5em 1.5em;

}However the most common reason for it disappearing is that the EZ-Page links themselves are all turned off, either individually via Admin > Tools > EZ-Pages or as a group via Admin > Configuration > EZ-Pages.

Thanks very much for your help. The links are there and work, only the image is missing. The location of the image matches the one on the stylesheet. Is there any other file that could be affecting this?

http://www.pandemicvinyl.com

Hello,

I'm new to ZenCart and I've installed and been trying to customize the future Zen template. I've changed a few things like backgroud colors and widths. I've also removed teh logo via teh CSS way earlier in this post.

So far it's looking as I would expect in Firefox but IE is completely jacked up. Does the CSS solution for removing the logo not work in IE? Also if I changed the #mainwrapper and the #logowrapper widths to from 90% & 100% to 790px. Other than that I've only messed with the colors and such. I did move the nav bar below the header image in tpl_header.php.

Is there something I'm missing?

Here's the site https://www.binkwaffle.com

Thanks for help. I do love this template and think it's great that it's using all css rather than tables. Very cool!

Thanks,

Brad

Having some trouble with the box sizing, in particular the sponsor box. I have resized my banner pics, but that didnt help so how do i adjust the height of the box? I see in the Layout Config in Admin where you can change the width, but what about the height? Thanks!

ptraffick:

Thanks very much for your help. The links are there and work, only the image is missing. The location of the image matches the one on the stylesheet. Is there any other file that could be affecting this?

http://www.pandemicvinyl.comSorry. but the links that are in your page header are not the EZ-Pages links. They are the Category Tabs.

However you can easily attach what I assume would be your customer fullwidth_capsule.gif to these instead. Try adding the following to your stylesheet> #navCAtTabsWrapper {

background-image:url(../images/capsule.gif);
background-repeat:no-repeat;

}BTW I like what you're doing with the template. It will be virtually unrecognisable by the time you've finished which means that you will have successfully used it as a springboard to create something truly unique. Great stuff :thumbsup:

sonicparke:

Hello,

I'm new to ZenCart and I've installed and been trying to customize the future Zen template. I've changed a few things like backgroud colors and widths. I've also removed teh logo via teh CSS way earlier in this post.

So far it's looking as I would expect in Firefox but IE is completely jacked up. Does the CSS solution for removing the logo not work in IE? Also if I changed the #mainwrapper and the #logowrapper widths to from 90% & 100% to 790px. Other than that I've only messed with the colors and such. I did move the nav bar below the header image in tpl_header.php.

Is there something I'm missing?

Here's the site https://www.binkwaffle.com

Thanks for help. I do love this template and think it's great that it's using all css rather than tables. Very cool!

Thanks,

BradAs is often the case, the root cause of these problems is something that appears completely innocuous and tangential to what you're actually doing ... but first> <div id="logo"><a href="http://binkwaffle.com/"><img src="includes/templates/custom_fz/images/header_bg.jpg" alt="Binkwaffle Custom Birth Annoucements and Cards." title=" Binkwaffle Custom Birth Annoucements and Cards. " width="760" height="110" /></a></div>... I'm not sure how the header_bg.jpg snuck into your tpl_header.php. This is the first time I have seen it escape the stylesheet and become a foreground image displacing the logo.gif. It's clearly getting ideas above it's station. Slap it down quick. (I suspect that this was supposed to be header.jpg before you moved that into the background instead - the right decision)

"Ahh", you say, "but that is inside the logo wrapper and I've set that to display:none". Well almost, but not quite. Here's what you did> #logo {

display: none;
//display:inline;
//margin: 40px 0 0 350px;

}The problem here is that // is a php inline comment and is not officially recognised by the CSS standards. FF did you no favors by letting you get away with it. For once IE is right.

So in IE your display:none is immediately overridden by display:inline bringing that big wide image that you have accidentally left in the foreground back into play. Then, worse, your next line gives it a 350px left margin, shoving it right across the page, blowing the logoWrapper width out of the water and completely *^$%ing up your layout. I'll leave you to take it from here.

But before I go, I'm glad you like the CSS only emphasis of the template, though to be fair this is Zen Cart's direction, I'm just not getting in the way by adding the tables back in! There are also some things I have in the pipeline that will show what CSS can do for Zen Cart. At the moment we're just scratching the surface. Keep watching this space.

lhhgbh:

Having some trouble with the box sizing, in particular the sponsor box. I have resized my banner pics, but that didnt help so how do i adjust the height of the box? I see in the Layout Config in Admin where you can change the width, but what about the height? Thanks!The height of the boxes is determined primarily by their content. They expand or contract depending upon how much you put in them rather than having fixed heights set in Admin. So you re-sizing your pics was a pretty sensible place to start.

You can set a height for each box in the CSS. But that's a really naff approach and in case can break if you user increases the text or image size. So instead I recommend tweaking this line style in your stylesheet to increase the padding> .sideBoxContent {

background-image:url(../images/sidebox_content_bg.gif);
background-repeat:no-repeat;
background-position:bottom;
padding: 0.4em;

}I generally find a value of 0.8em to be rather pleasing.

kuroi:

As is often the case, the root cause of these problems is something that appears completely innocuous and tangential to what you're actually doing ... but first... I'm not sure how the header_bg.jpg snuck into your tpl_header.php. This is the first time I have seen it escape the stylesheet and become a foreground image displacing the logo.gif. It's clearly getting ideas above it's station. Slap it down quick. (I suspect that this was supposed to be header.jpg before you moved that into the background instead - the right decision)

"Ahh", you say, "but that is inside the logo wrapper and I've set that to display:none". Well almost, but not quite. Here's what you didThe problem here is that // is a php inline comment and is not officially recognised by the CSS standards. FF did you no favors by letting you get away with it. For once IE is right.

So in IE your display:none is immediately overridden by display:inline bringing that big wide image that you have accidentally left in the foreground back into play. Then, worse, your next line gives it a 350px left margin, shoving it right across the page, blowing the logoWrapper width out of the water and completely *^$%ing up your layout. I'll leave you to take it from here.

I'm not sure I understand this completely. Are you saying that I did the right thing by placing header.jpg as the background for that div? If so, then great! I did the right thing.

But as far as how header_bg.jpg is getting into tpl_header.php, I have no idea how that happened. I haven't edited any php other than moving the nav bar.

When you say "slap it down" what exactly do you mean? Will fixing the way I'm commenting out the CSS code do this for me or do I need to deal with both the CSS commenting and the tpl_header code?

Thanks for all your help Kuroi!

Brad

well I did take the comments out of the css file but there is no change. Is there any other way to get rid of the logo other than commenting out the div in tpl_header.php?

sonicparke:

well I did take the comments out of the css file but there is no change. Is there any other way to get rid of the logo other than commenting out the div in tpl_header.php?Checked your site and it looks to me as though it has worked. Maybe your changes took a while to get past a cache somewhere.

There is no perfect answer to this question in the current version of Zen Cart. display:none for the logo div does work. However, despite my zeal for CSS solutions, this is not a solution that I would use on its own. The reason is that even though not displayed, the logo (or in your case header_bg) image will still get downloaded to your visitors' browsers slowing down the time it takes to display the first page.

Alternatives are commenting out the line as you mentioned. Another favorite for some people is to place a 1x1 pixel transparent gif called logo.gif in YOUR_TEMPLATE/images. This still gets downloaded but is very small and won't be visible even if you don't turn of its display.

The perfect solution would be a switch in Admin to simply turn off display of the logo. This would be consistent with the strategy of Admin controlling content and the stylesheet controlling the look and feel of that content. I'll put that suggestion to the Dev Team.

Coming back to your site, an alternative way for header_bg.jpg to have insinuated itself into the position normally occupied by logo.gif would be if you have amended your includes/languages/english/YOUR_TEMPLATE/header.php file such that the linephp define('HEADER_LOGO_IMAGE', 'logo.gif'); now reads```php
define('HEADER_LOGO_IMAGE', 'header_bg.jpg');

P.S. "Slap it down" was a slightly facetious way of saying that it shouldn't be really there and should be got rid off.

You are right about the cache. I kept clearing everything I could with no luck but left it for a while and had just looked at it when you posted your reply. It is fine now so that did work. And I may have edited that code and just don't remember doing it.

That makes sense about the image being downloaded even if it's not visible so I will comment out that div all together rather than creating a small gif. I figure it that's commented out then it won't be an issue at all. Maybe after a while I'll even delete it completely.

Thanks for the help. I'm sure I'll have more questions but as I dig through this it is making more and more sense.

Thanks!

Well I made some good progress.

http://www.binwaffle.com

But I'm a little stuck on how to get the attributes aligned in a nice compact and orderly fashion. It seems like there's way too much space inbetween each text box and their left/right position is being affected by the label beside them. While the labels will line up on the left just fine I've been unsuccessful in getting the input boxes to line up with each other regardless of the length of the label.

Problem page

I'd would appreciate any guidance in the right direction because I'm just stumped on this one.

Thanks a million!

Brad

kuroi Thanks for the resizing tip. Worked like a charm..

Kuroi,
Any idea why I have to keepind doing something to every thing I upload, I am uploading 1.3 modules and addons, like ofr instance the specials scrolling box.

What do I have to add to make these work with the borders and image backgrounds that are included with this template?

sonicparke:

Well I made some good progress.

http://www.binwaffle.com

But I'm a little stuck on how to get the attributes aligned in a nice compact and orderly fashion. It seems like there's way too much space inbetween each text box and their left/right position is being affected by the label beside them. While the labels will line up on the left just fine I've been unsuccessful in getting the input boxes to line up with each other regardless of the length of the label.

Problem page

I'd would appreciate any guidance in the right direction because I'm just stumped on this one.

Thanks a million!

BradI can understand why you would be stumped in this one Brad. Getting forms to recognise your styling is notoriously difficult. But here's the first step ... to get the inout (and select) fields lining up, irrespective of the size of the label, you force all the labels to be the same size.

If you go to your stylesheet, you'll find some examples near the top of this being done already. Add the following> LABEL.attribsInput, LABEL.attribsSelect {float:left; width: 6em;}This works by converting the label to a block level element. I would have done this directly by saying display:block, but the existing code achieves the same and more by floating it, so let's be consistent. And then adding a width. All your input fields should then be nicely left aligned 6em in.

knuckle-101:

Kuroi,
Any idea why I have to keepind doing something to every thing I upload, I am uploading 1.3 modules and addons, like ofr instance the specials scrolling box.

What do I have to add to make these work with the borders and image backgrounds that are included with this template?LOL. You are a magnet for this type of module!!!

Although the author suggests that it works fine in his 1.3 test environment, that post was immediately followed by one complaining of a variant of the problem that I believe you have. Basically this is a pre-1.3 mod that appears to work in 1.3 but which does not accurately follow the 1.3 sidebox structure. The similar Whats New Scrolling Sidebox add-in (since you are bound to be tempted by this :smile:) has been very well upgraded for 1.3, but nevertheless also suffers from this problem.

In both cases the solution is the same as that we applied to your other modules i.e. create the XXXContent div at the top of the module and close it at the bottom. The exact code needed for the Whats New Scroling Sidebox may be found in that mod's support thread. I don't have a detailed fix for the Specials Scrolling Sidebox as you may have a later version than the one I have.

Ok. That worked great for lining them up but I'm still stuck on how get them tighter together. Basically like a table only not. This is sort of the look I'm after:

I've tried messing with several of the classes and id's with no luck. You can see that I've got a border around the entire form so I know which on controls that div but I'm having troubles moving the individual pieces. I've got the bg color on the labels so I can see what results I get. that really helped me under stand the lining up of the input boxes.

I've been digging around the net but cant' seem to find out how to tighten up the from vertically. Sorry for asking so many questions. Hopefully as I I get better at this I'll have something to contribute.

this is the one I have however I did exact deal but its still didnt work. So I said screw it. Thethread u gave me is the new product scoller not the special but I will keep looking

I added the codes in the paste below when uploaded it shows four stand still products int the scroller box, lol, I just gave up on it

thanks

<?php
//*****************************************************************
//*****************************************************************
//				   Specials scroller for Zen-Cart v1.0				
// 						 	  by sn0ut								
//	   	Place this file in your sideboxes template overrides dir	
//	 includes\templates\%your_template%\sideboxes\tpl_specials.php	
//																	
//*****************************************************************
//*****************************************************************

// $Id: tpl_specials.php,v 1.0 2006/01/30  sn0ut $ 
	
	$content = "";  //clears previous content
	$content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') .
	$random_product_query = "select p.products_id, pd.products_name, p.products_price, p.products_tax_class_id, p.products_image, s.specials_new_products_price from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd, " . TABLE_SPECIALS . " s where p.products_status = '1' and s.products_id = p.products_id and p.products_id = pd.products_id and pd.language_id = '" . (int)$_SESSION['languages_id'] . "' and s.status = '1' order by s.specials_date_added DESC limit " . MAX_DISPLAY_SPECIAL_PRODUCTS;

	$random_product = zen_random_select($random_product_query);
	
	$i = 0;
	while (!$random_product->EOF) {	
	$rp .=  '<br /><center><a href="' . zen_href_link(zen_get_info_page($random_product->fields['products_id']), 'products_id=' . $random_product->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $random_product->fields['products_image'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br /><a href="' . zen_href_link(zen_get_info_page($random_product->fields['products_id']), 'products_id=' . $random_product->fields['products_id']) . '">' . $random_product->fields['products_name'] . '</a><br />' . zen_get_products_display_price($random_product->fields['products_id']) . '</center><br /><br />' . "\n";
	$i++;
	$random_product->MoveNext();
 }

	$total = $i;
	
	if ($total > 1) { //if more than one special exists in the db then scrolling begins
	$content .= '<MARQUEE behavior= "scroll" align= "center" direction= "up" height="160" scrollamount= "2" scrolldelay= "5" onmouseover=\'this.stop()\' onmouseout=\'this.start()\'>' . $rp .'</MARQUEE>';	 
 } 
 
 elseif ($total == 1) {  // If only one special exists in the db then the specials box will remain static
    $content .=  $rp;
 } 
 
 else { //  If there are no specials then this text is displayed
    $content .= "No specials this month!";	
 } 
 
   $content .= '</div>';
   
?>

This line in your listing is incomplete> $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') .It should read> $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent centeredContent">';