Ocean Front Template Support Thread

clydejones:

Amy,

This doesn't involve CSS at all.

open includes/modules/sideboxes/YOUR_TEMPLATE/

select the sidebox you want to have a clickable header find the following and change the setting to true.

$title_link = false;

You can do for each sidebox you with to change.

Actually I have changed what I wanted to do. I want to make the For Baby, Make it Personal, etc boxes to the right of the main pic on the front page clickable to go to different categories, and wanted to know if that can be done from css since they have references there that place them where they are...

Hope you're doing ok :)

Doodlebuckets:

Actually I have changed what I wanted to do. I want to make the For Baby, Make it Personal, etc boxes to the right of the main pic on the front page clickable to go to different categories, and wanted to know if that can be done from css since they have references there that place them where they are...

Hope you're doing ok :)

I'm doing fine, thanks.

You have clickable links in those boxes so I'm a little unclear about what you want to do.

clydejones:

I'm doing fine, thanks.

You have clickable links in those boxes so I'm a little unclear about what you want to do.

It has been told to me by a conversion expert that they background images should be clickable and go to a category or people will be confused. Say, they think they can click on "For Baby" and then they get confused when they can't...

Doodlebuckets:

It has been told to me by a conversion expert that they background images should be clickable and go to a category or people will be confused. Say, they think they can click on "For Baby" and then they get confused when they can't...

OK, was that a recommendation from the video?

couple of problem I see.

CSS can style and position the boxes but you can't create a link with css. Links are created with the html.

If you make the entire box a link then you will lose the individual links within the box.

possible solution:

re-create the individual boxes (without the titles)
now you can add <h1></h1> tags within the boxes for the titles and create links that way.
you can also keep the 2 individual links that already exist.

Hi guys,
I love the template it is very pretty, but what I need to do is get rid of the seashell image, change the "sales message goes here" and make the login/register to pop up when my customers are in the checkout area. Can anyone help out on how to do this?
P.S. I am really new to all of this so I may need step by step instructions.
Thanks in advance,
Vanessa

avmejias:

Hi guys,
I love the template it is very pretty, but what I need to do is get rid of the seashell image, change the "sales message goes here" and make the login/register to pop up when my customers are in the checkout area. Can anyone help out on how to do this?
P.S. I am really new to all of this so I may need step by step instructions.
Thanks in advance,
Vanessa

These may help:

www.zen-cart.com/tutorials/index.php?article=127

www.zen-cart.com/tutorials/index.php?article=125

You can find many more helpful articles in the Tutorials/FAQ section

Clyde, I've decided to go from a column format to rows for the category pages and to make the images a bit bigger. Can you tell me how to put some space between the images? Ie, here: http://www.babygiftbasketstores.com/baby-boy-gifts

Thanks!

Doodlebuckets:

Clyde, I've decided to go from a column format to rows for the category pages and to make the images a bit bigger. Can you tell me how to put some space between the images? Ie, here: http://www.babygiftbasketstores.com/baby-boy-gifts

Thanks!

Amy,

add the following to the stylesheet.css

You can adjust the padding until you get the look you want.

.productListing-even .productListing-data, .productListing-odd .productListing-data {
padding: 3px 0;
color:#000;
}

Perfect! Thanks Clyde :)

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

JerryAPowers:

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.

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!

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!

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

Clyde,

Thank you once again for your response - it directed me to the right files! :clap: 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!!

JerryAPowers:

Clyde,

Thank you once again for your response - it directed me to the right files! :clap: 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>

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!

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!

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;
}

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!

Clyde,

That did work!!

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!