Sidebox customization

[ctcentralinfo]

I had this template upgraded some time ago, and I am trying to figure out how to get the yellow box in the bestseller sidebox to show up in the other sideboxes with images in them such as specials sidebox.

http://www.cooltechcentral.com/

[gjh42]

Each product image in the bestsellers box is inside a div with class of .bestsellbox.

If you apply the same properties to the holders for other images, they will look the same.

.bestsellbox {
    text-align: center;
    margin: 0 auto;
    background: transparent url(../images/bg_boxbox.jpg) no-repeat top center;
    width: 115px;
    height: 100px;
    padding-top: 15px;
    }

[ctcentralinfo]

Each product image in the bestsellers box is inside a div with class of .bestsellbox.

If you apply the same properties to the holders for other images, they will look the same.

.bestsellbox {
    text-align: center;
    margin: 0 auto;
    background: transparent url(../images/bg_boxbox.jpg) no-repeat top center;
    width: 115px;
    height: 100px;
    padding-top: 15px;
    }

Thanks, the only problem I have now is with the title bleeding outside of the sidebox. How can I fix it?

http://www.cooltechcentral.com/

[gjh42]

The bestsellers box only holds the image; you have the image and title in the box, which won't expand to hold it all. You need to apply the styling to an element that only holds the image.

You don't necessarily need to add the .bestsellbox class to the elements. You can just find the declaration for the right element (or add it if it's not in the stylesheet yet) and add the properties in .bestsellbox to the others.

You may need to create a new div around the image, in which case you will have to duplicate the <a href... > </a> so the image and text each have a copy of it. I believe divs, being block-level elements, are not supposed to go inside links.

[ctcentralinfo]

The bestsellers box only holds the image; you have the image and title in the box, which won't expand to hold it all. You need to apply the styling to an element that only holds the image.

You don't necessarily need to add the .bestsellbox class to the elements. You can just find the declaration for the right element (or add it if it's not in the stylesheet yet) and add the properties in .bestsellbox to the others.

You may need to create a new div around the image, in which case you will have to duplicate the <a href... > </a> so the image and text each have a copy of it. I believe divs, being block-level elements, are not supposed to go inside links.

I have no idea what you are saying.

[gjh42]

To get the box to hold just the image, you will have to edit /includes/templates/your_template/sideboxes/tpl_specials.php. The whole content is this:

  $content = "";
  $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent centeredContent">';
  $content .= '<a href="' . zen_href_link(zen_get_info_page($random_specials_sidebox_product->fields["products_id"]), 'products_id=' . $random_specials_sidebox_product->fields["products_id"]) . '">' . zen_image(DIR_WS_IMAGES . $random_specials_sidebox_product->fields['products_image'], $random_specials_sidebox_product->fields['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '<br />' . $random_specials_sidebox_product->fields['products_name'] . '</a><br />' . $specials_box_price;
  $content .= '</div>';
?> 

Replace the line beginning with <a href... with this:

  $content .= '<a class="bestsellbox" href="' . zen_href_link(zen_get_info_page($random_specials_sidebox_product->fields["products_id"]), 'products_id=' . $random_specials_sidebox_product->fields["products_id"]) . '">' . zen_image(DIR_WS_IMAGES . $random_specials_sidebox_product->fields['products_image'], $random_specials_sidebox_product->fields['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><a href="' . zen_href_link(zen_get_info_page($random_specials_sidebox_product->fields["products_id"]), 'products_id=' . $random_specials_sidebox_product->fields["products_id"]) . '"><br />' . $random_specials_sidebox_product->fields['products_name'] . '</a><br />' . $specials_box_price; 

[ctcentralinfo]

To get the box to hold just the image, you will have to edit /includes/templates/your_template/sideboxes/tpl_specials.php. The whole content is this:

  $content = "";
  $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent centeredContent">';
  $content .= '<a href="' . zen_href_link(zen_get_info_page($random_specials_sidebox_product->fields["products_id"]), 'products_id=' . $random_specials_sidebox_product->fields["products_id"]) . '">' . zen_image(DIR_WS_IMAGES . $random_specials_sidebox_product->fields['products_image'], $random_specials_sidebox_product->fields['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '<br />' . $random_specials_sidebox_product->fields['products_name'] . '</a><br />' . $specials_box_price;
  $content .= '</div>';
?> 

Replace the line beginning with <a href... with this:

  $content .= '<a class="bestsellbox" href="' . zen_href_link(zen_get_info_page($random_specials_sidebox_product->fields["products_id"]), 'products_id=' . $random_specials_sidebox_product->fields["products_id"]) . '">' . zen_image(DIR_WS_IMAGES . $random_specials_sidebox_product->fields['products_image'], $random_specials_sidebox_product->fields['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><a href="' . zen_href_link(zen_get_info_page($random_specials_sidebox_product->fields["products_id"]), 'products_id=' . $random_specials_sidebox_product->fields["products_id"]) . '"><br />' . $random_specials_sidebox_product->fields['products_name'] . '</a><br />' . $specials_box_price; 

It didn't work, it created a duplicate line of the normal pricing and special price.

[gjh42]

When I pasted the line into tpl_specials on my test site, it worked correctly.

The <a> is an inline type of element, so to get the background and dimensions to work correctly, you will need to add display: block; to the declaration:

.bestsellbox {display: block;}

[ctcentralinfo]

When I pasted the line into tpl_specials on my test site, it worked correctly.

The <a> is an inline type of element, so to get the background and dimensions to work correctly, you will need to add display: block; to the declaration:

.bestsellbox {display: block;}

you mean in stylesheet.css right? I did but it only caused the template design to break up.

[gjh42]

If that doesn't work for you when applied to the <a>, you will need to add a <div> around the <a>.

Replace the line with this:

$content .= '<div class="bestsellbox"><a href="' . zen_href_link(zen_get_info_page($random_specials_sidebox_product->fields["products_id"]), 'products_id=' . $random_specials_sidebox_product->fields["products_id"]) . '">' . zen_image(DIR_WS_IMAGES . $random_specials_sidebox_product->fields['products_image'], $random_specials_sidebox_product->fields['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a></div><a href="' . zen_href_link(zen_get_info_page($random_specials_sidebox_product->fields["products_id"]), 'products_id=' . $random_specials_sidebox_product->fields["products_id"]) . '"><br />' . $random_specials_sidebox_product->fields['products_name'] . '</a><br />' . $specials_box_price;