Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Center Box Graphic and Have Center Boxes side by side

Center Box Graphic and Have Center Boxes side by side

Locked

Views: 1,333

Results 1 to 9 of 9
This thread is locked. New replies are disabled.
14 Sep 2009, 11:08 PM
#1
debiwebi avatar

debiwebi

New Zenner

Join Date:
Aug 2009
Location:
Highlands Ranch, Colorado
Posts:
84
Plugin Contributions:
0

Center Box Graphic and Have Center Boxes side by side

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?

15 Sep 2009, 6:16 AM
#2
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Center Box Graphic and Have Center Boxes side by side

Add to your stylesheet_herdoos.css```
#featuredProducts {width: 39%; float: right;}
#specialsDefault{width: 59%; float: left;}

15 Sep 2009, 6:38 AM
#3
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Center Box Graphic and Have Center Boxes side by side

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

15 Sep 2009, 2:21 PM
#4
debiwebi avatar

debiwebi

New Zenner

Join Date:
Aug 2009
Location:
Highlands Ranch, Colorado
Posts:
84
Plugin Contributions:
0

Re: Center Box Graphic and Have Center Boxes side by side

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.

15 Sep 2009, 2:56 PM
#5
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Center Box Graphic and Have Center Boxes side by side

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

<?php $show_display_category->MoveNext(); } // !EOF ?> </div> ``` Add a new div something like this:```php <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 <?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.
15 Sep 2009, 2:59 PM
#6
debiwebi avatar

debiwebi

New Zenner

Join Date:
Aug 2009
Location:
Highlands Ranch, Colorado
Posts:
84
Plugin Contributions:
0

Re: Center Box Graphic and Have Center Boxes side by side

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

15 Sep 2009, 7:28 PM
#7
debiwebi avatar

debiwebi

New Zenner

Join Date:
Aug 2009
Location:
Highlands Ranch, Colorado
Posts:
84
Plugin Contributions:
0

Re: Center Box Graphic and Have Center Boxes side by side

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.

16 Sep 2009, 5:01 AM
#8
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Center Box Graphic and Have Center Boxes side by side

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>
16 Sep 2009, 2:58 PM
#9
debiwebi avatar

debiwebi

New Zenner

Join Date:
Aug 2009
Location:
Highlands Ranch, Colorado
Posts:
84
Plugin Contributions:
0

Re: Center Box Graphic and Have Center Boxes side by side

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!