Center Box Graphic and Have Center Boxes side by side

[DebiWebi]

Hi, I have two things I need to do for a home page and don't know where to begin. I've been using ZC for a few weeks now, have the latest version. Web site is at: http://www.herdoos.com/shop

1. I need a graphic linked to an existing product page. I tried using the Featured Prods box for that purpose, but I really need just a linked image that will take me to a specific page (don't want to be limited as to using a product's image, don't want the "Featured Products" and other text in this box).

2. I need that linked image to be sitting to the right of the Monthly Specials box. Right now they are stacked vertically.

This is what I want:


This is what I have now:



Can anyone help?

[gjh42]

Add to your stylesheet_herdoos.css

#featuredProducts {width: 39%; float: right;}
#specialsDefault{width: 59%; float: left;}

[gjh42]

Refinements:

#featuredProducts {width: 42%; float: right; border: none; margin-right: 15px;}

#featuredProducts img {width: 304px; height: 200px; position: relative; top: -12px;}

#featuredProducts h2, #featuredProducts br+a, #featuredProducts br+a+br {display: none;}

#specialsDefault{width: 55%; float: left;}

[DebiWebi]

Thank you, that worked perfectly!

Next questions:

1. Can I change the path in the Featured Prod box to take someone to the Category rather than one product?

2. Can I also put a different photo in there, rather than a copy of what's on the product page?

This box will be permanently set up, the client won't be changing their Featured Product.

[gjh42]

I knew you would be needing some more customization, but was too tired to concentrate on it last night:) Since you will need to edit a file anyway, your best bet is to insert the image link directly rather than modify the featured functionality. I suggest adding to /includes/templates/your_template/templates/tpl_index_default.php, just before the "</div>" line at the bottom:

<?php
  $show_display_category->MoveNext();
} // !EOF
?>
</div>

Add a new div something like this:

<div id="featuredLink">
  <?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . 'your_link_path">' . zen_image($template->get_template_dir('your_link_image.jpg', DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . 'your_link_image.jpg', 'Your Link Alt Text') . '</a>'; ?>
</div>

End result:

<?php
  $show_display_category->MoveNext();
} // !EOF
?>
<div id="featuredLink">
  <?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . 'your_link_path">' . zen_image($template->get_template_dir('your_link_image.jpg', DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . 'your_link_image.jpg', 'Your Link Alt Text') . '</a>'; ?>
</div>
</div>

Substitute the correct values for your_xxx, but keep quotes where they exist.
Save the image in /includes/templates/your_template/images/.
Style #featuredLink similar to #featuredProducts, though it will be simpler.

[DebiWebi]

Thanks Glenn, I'll try that and come whining back to you if I can't figure it out!

[DebiWebi]

Okay, I think I did what you said but its not working: the new image is not replacing the product image and the link is going to the category rather than the product.

This is what I put in tpl_index_default.php:

<div id="featuredLink">
<?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . 'http://herdoos.com/shop/index.php?main_page=index&cPath=8">' . zen_image($template->get_template_dir('http://www.herdoos.com/shop/images/hairnoodles-home.jpg', DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . 'http://www.herdoos.com/shop/images/hairnoodles-home.jpg', ' ') . '</a>'; ?>
</div>

I also have the image in my templates images folder but wasn't sure it was finding it, so also put the image in the main images folder and changed the link to it.

I see at line 99 in tpl_index_default.php there's stuff about the Featured Products Center Box -- does this not need to be changed? Or any of the other files mentioned in that code?f

BTW I took a look at your web site, nice stuff! I placed an order for a dragonfly pin with amethyst.

[gjh42]

The HTTP_SERVER . DIR_WS_CATALOG gives the path to your site, so all you need to add is the internal part of the path.
Likewise, you want only the image filename, as the rest of the path is specified by the code.

<div id="featuredLink">
<?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . 'index.php?main_page=index&cPath=8">' . zen_image($template->get_template_dir('hairnoodles-home.jpg', DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . 'hairnoodles-home.jpg', ' ') . '</a>'; ?>
</div>

[DebiWebi]

Ah, thanks for the clarification on the paths. As you can tell I don't understand all the coding stuff.

That worked perfectly and with a little CSS adjustment the page looks great.

Thanks again!