Ocean Front Template Support Thread

[clydejones]

I am using the current version of Zen Cart for my new site. I just downloaded Ocean Front yesterday and started to customize it for my needs. However, I am having difficulty locating the "informationContent" div in the code for modifying. I am using Microsoft Expression Web 4 to modify the site and I have completed a search through all of the files for the div and cannot locate it.

I need to adjust the location, size, and color of the sidebox titles as well as define the background for the sidebox content. I am going to try to the use the Gradient routine to duplicate what I did in on my main site: http://www.okaquariumgiftshops.com

I don't know if it is possible to have a 1 pixel high image repeat down and fade darker as it proceeds down the content box. I've seen it done with just a simple box specifying the colors but I'm not sure it can be done with an image.

Additionally, I need to place a footer on the content boxes and I'm not sure where I need to code the footer div. Can someone help me there?

By the way, my Zen-Cart site is: http://shop.okaquariumgiftshops.com

Thank you,
Jerry Powers

I'm assuming you are talking about the sideboxes.

"informationContent" can be found in includes/templates/template_default/sideboxes/tpl_information.php

Once you've made your changes you'll want to save the modified file to includes/templates/ocean_front/sideboxes/tpl_information.php

as for the images, You'll need to test them out to get the look you want.

Not sure what you mean by a footer.

[JerryAPowers]

Clyde,

Thank you for your response, especially since the issue wasn't with your template! Examples like this are why I chose to start with your template - you seem to be very responsive and helpful to anyone's request! It guided me in the right direction to fixing some of the challenges that I'm having with the sideboxes.

If you could take a look at my website: http://shop.okaquariumgiftshops.com to take another look at my sideboxes, I would be grateful for any assistance. I'm having difficulty eliminating the space between the Sidebox Header in .leftBoxHeading and the Sidebox Content. I have 35px allocated for the Header, in .leftBoxHeading, which matches the graphic size so I don't why the content won't move up to the header.

As far as the Footer goes - it is also for the Sideboxes. I would like to place a footer/bottom graphic at the bottom of the sideboxes that basically mirrors the Header. I'm assuming that I need to create a Div for a sidebox footer but I don't know which file to create the Div. Can you guide me in the right direction?

You may also see that my Sidebox content background doesn't stretch the entire height of the sidebox. It displays properly in IE9 and FF5 but not in IE8 since I'm using CSS3 to stretch the image. I'm still searching for a solution for stretching the graphic for older browsers. Do you happen to know of any solution?

One more question - how can I get my NavCats up into the blank dark blue portion of my page header? I've done previously with another template where it appeared proper in FF5, but it was unstable as to appear in different places in other browsers. I'm assuming that using the Position element caused the positioning problems. Do I need to move the NavCats div to a different place in the code - if so, which file should this be done in?

Thank you again! I'm loving that your template is so stable across multiple browsers!

[clydejones]

Clyde,

Thank you for your response, especially since the issue wasn't with your template! Examples like this are why I chose to start with your template - you seem to be very responsive and helpful to anyone's request! It guided me in the right direction to fixing some of the challenges that I'm having with the sideboxes.

If you could take a look at my website: http://shop.okaquariumgiftshops.com to take another look at my sideboxes, I would be grateful for any assistance. I'm having difficulty eliminating the space between the Sidebox Header in .leftBoxHeading and the Sidebox Content. I have 35px allocated for the Header, in .leftBoxHeading, which matches the graphic size so I don't why the content won't move up to the header.

As far as the Footer goes - it is also for the Sideboxes. I would like to place a footer/bottom graphic at the bottom of the sideboxes that basically mirrors the Header. I'm assuming that I need to create a Div for a sidebox footer but I don't know which file to create the Div. Can you guide me in the right direction?

You may also see that my Sidebox content background doesn't stretch the entire height of the sidebox. It displays properly in IE9 and FF5 but not in IE8 since I'm using CSS3 to stretch the image. I'm still searching for a solution for stretching the graphic for older browsers. Do you happen to know of any solution?

One more question - how can I get my NavCats up into the blank dark blue portion of my page header? I've done previously with another template where it appeared proper in FF5, but it was unstable as to appear in different places in other browsers. I'm assuming that using the Position element caused the positioning problems. Do I need to move the NavCats div to a different place in the code - if so, which file should this be done in?

Thank you again! I'm loving that your template is so stable across multiple browsers!

The sideboxes are constructed as follows:

The highlighted portions can be styled in the stylesheet.css

<div class="leftBoxContainer" id="information" style="width: 191px">
<h3 class="leftBoxHeading" id="informationHeading">Information</h3>
<div id="informationContent" class="sideBoxContent">
</div>
</div>

leftBoxContainer can be used to style the footer for the sidebox.

----------------

CSS3 to stretch the image. - IE8 and older will not recognize any of the css3 styling you are using for this.

---------------

Do I need to move the NavCats div to a different place in the code - if so, which file should this be done in? - You'll need to edit includes/templates/ocean_front/common/tpl_header.php

[JerryAPowers]

Clyde,

Thank you once again for your response - it directed me to the right files! I have my sidebox graphics almost perfect including adding a footer image to the sideboxes.

A major accomplishment was figuring out how to have backwards compatibility for my stretched background on the sideboxes. My layout uses transparent png gradient borders that had to be stretched. Using Microsoft's AlphaImageLoader, I was able to display the stretched image in older IE browsers. Of course, I enabled stretched images for other browsers as well.

The only problem that I'm having with my sideboxes is figuring out why the sidebox content is shifted approximately 2px down and to the right in Firefox only. It displays perfectly in every other browser.

Again, thank you!!

[clydejones]

Clyde,

Thank you once again for your response - it directed me to the right files! I have my sidebox graphics almost perfect including adding a footer image to the sideboxes.

A major accomplishment was figuring out how to have backwards compatibility for my stretched background on the sideboxes. My layout uses transparent png gradient borders that had to be stretched. Using Microsoft's AlphaImageLoader, I was able to display the stretched image in older IE browsers. Of course, I enabled stretched images for other browsers as well.

The only problem that I'm having with my sideboxes is figuring out why the sidebox content is shifted approximately 2px down and to the right in Firefox only. It displays perfectly in every other browser.

Again, thank you!!

The problem is probably the repeated (highlighted) tags used on each of the sideboxes - these are unnecessary and cause validation errors: Remove them!

<html>

<body>
<div class="leftBoxContainer" id="reviews" style="width: 191px">
<h3 class="leftBoxHeading" id="reviewsHeading"><a href="http://shop.okaquariumgiftshops.com/index.php?main_page=reviews>Reviews[...]</a></h3>
<div id="leftBoxContent" class="leftBoxContent"><div id="reviewsContent" class="sideBoxContent centeredContent">There are currently no product reviews.</div></div>
<div class="leftBoxFooter" id="leftBoxFooter"></div>
</body>
</html>

[JerryAPowers]

Clyde,

Thank you for your response and your help! I removed the html and body tags. Unfortunately, the 2px gap still exists in Firefox. Do you have any other ideas?

Thank you!

[clydejones]

Clyde,

Thank you for your response and your help! I removed the html and body tags. Unfortunately, the 2px gap still exists in Firefox. Do you have any other ideas?

Thank you!

You could try setting the padding to 0

.sideBoxContent {
position: relative;
top: 0em;
margin: 0em;
font-size: 11px;
display:block;
line-height: 12px;
padding: 0.5em 1.0em 0em 1.0em;
z-index:1;
}

[JerryAPowers]

Clyde,

WOW - Quick response!! I figured out what the culprit was. In my attempt to get the transparent png background image to stretch, I replaced:

background:url(../images/sidebox_content_bg.png);

with:

-moz-border-image: url(../images/sidebox_content_bg.png) 0;

I'm assuming that it reserves a little more space for a border that I didn't need.

However, I've now created another problem! All versions of IE now displays the original 40px tall background image in addition to stretching the background image to fit the box. It doesn't look terrible in newer browsers but it is noticeable in older browsers. Somehow, I need to isolate the Microsoft.AlphaImageLoader to load in just IE. I'm assuming that I need to place that bit of code into the ie_stylesheet? Do you think that will work?

Thank you!

[JerryAPowers]

Clyde,

That did work!!

[JerryAPowers]

Clyde,

I'm hoping to get your help once more. For the center column, I needed borders to match the rest of my design and my main website design. Therefore, I modified tpl_main_page.php to create additional divs and tables for attaching the images.

If you can take a look at my site: http://shop.okaquariumgiftshops.com you will see that I am having a problem getting the background and footer settled to the bottom of my centerbodyWrapper that lines up with the bottom of the left sideboxes. Is this even worth being concerned with since once I get content in the center column it will fill in downwards? Although, I would like for it to all line up whether I have content or not. Following is the section of the file that I modified:

<td valign="top" id="centerbodyWrapper" class="centerbodyWrapper">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="centerbodyHeader"></table>
<div id="centerColumnBG" class="centerColumnBG">
<!-- bof breadcrumb -->
<?php if (DEFINE_BREADCRUMB_STATUS == '1' || (DEFINE_BREADCRUMB_STATUS == '2' && !$this_is_home_page) ) { ?>
<div id="navBreadCrumb"><?php echo $breadcrumb->trail(BREAD_CRUMBS_SEPARATOR); ?></div>
<?php } ?>
<!-- eof breadcrumb -->

<?php
if (SHOW_BANNERS_GROUP_SET3 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET3)) {
if ($banner->RecordCount() > 0) {
?>
<div id="bannerThree" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
}
}
?>

<!-- bof upload alerts -->
<?php if ($messageStack->size('upload') > 0) echo $messageStack->output('upload'); ?>
<!-- eof upload alerts -->

<?php
/**
* prepares and displays center column
*
*/
require($body_code); ?>
<?php
if (SHOW_BANNERS_GROUP_SET4 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET4)) {
if ($banner->RecordCount() > 0) {
?>
<div id="bannerFour" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>
<?php
}
}
?>
</div>
<div id="centerbodyFooter" class="centerbodyFooter"></div>
</td>

Thank you!