Blank Sidebox as Linked Graphic Only

Hi, I've installed the Blank Sidebox Mod v2.0 and would like to make certain sideboxes as linked graphics only and the others as standard sideboxes. I've search the forums on how how to make these changes and can't seem to find an answer.

I've hard coded some of the graphics I wanted on the sidebar into the main page template. However, this makes the graphics show up on every page. You can see what I mean on my site at: http://www.benchmarkdesign.net/index.php

From what I've read, if set these graphics up as sideboxes, then I can control the pages on which the sideboxes are to appear either via template or css.

Can anyone offer me some instructions on how to modify the Blank Sidebox files to display linked graphics?

Please forgive me if I've posted this question in the wrong place or if there is already an answer out there. I couldn't find it. So, if there is, please provide a link.

Thanks!

Ara

If I understand the question, you can insert graphics as links into the Blank Sidebox using standard HTML (<a href ...).

Yes. However, it there's a better way to accomplish this, I'm open to suggestions. Take a look at the sidebar graphics I have on my site. When you click them, you're taken to a specific page (ie. Learn How Our System Works). Rather than hard code these into the template, I'd rather place set each grahical link into a sidebox so that I can control on which pages the graphic shows up.

Try logo sidebox from
http://www.zen-cart.com/index.php?main_page=product_contrib_info&products_id=405

Whether sideboxes or just hardcoded links, the process of controlling the pages where they display is similar.

You can use a page test wrapping the code for processing the output, such as

if ($current_page_base != 'pagename') {
code to be hidden on pagename;
}

Or you can hide the output of an element which has a class/id tag for a certain page by prefixing #pagenameBody to the rule in the stylesheet:

#pagenameBody .linkGraphic1 {
display: none;
}

Can I have multiple logo sideboxes? This is the reason why I chose the Blank Sidebox module, as I can create multiple instances.

Regarding gjh42's comments, so if my code in the template file is:

<a href="index.php?main_page=page&id=20"><img src="/images/imagename.png" alt="Image Description" width="200" height="50" hspace="5" vspace="5" border="0"></a>

and I don't want the image to appear on the page visited (since they're already there), what do I do?

charagg:

Can I have multiple logo sideboxes? This is the reason why I chose the Blank Sidebox module, as I can create multiple instances.

Regarding gjh42's comments, so if my code in the template file is:

<a href="index.php?main_page=page&id=20"><img src="/images/imagename.png" alt="Image Description" width="200" height="50" hspace="5" vspace="5" border="0"></a>

> 
> and I don't want the image to appear on the page visited (since they're already there), what do I do?

Yes, You can have multiple logo sideboxes.
or
you can use just one logo sidebox and have multiple images that show up only on pages you wish.

The last option would be controlled by the technique indicated by gjh42 in his post above.

main_page=page&id=20

If you want to control display on specific ez-pages, you might do best to install the Smart Backgrounds mod. It will give a page body class that indicates the current ez-page (among other features); you can then use this class as a prefix for a rule in your stylesheet to set display: none; on that graphic on that ez-page. Something like

.smartBG_p20 .linkGraphic1 {display: none;}

You would need to make a dummy image file named according to the specific ez-page in order to get the class tag. Alternatively, the Smart BG code could be tweaked to ignore image file checking and just set the class tag in all cases.

Another option, if you want to control this in the PHP code, is to use a test like```php
if ($current_page_base != 'page' or $_GET['id'] != 20) {
<a href="index.php?main_page=page&id=20"><img src="/images/imagename.png" alt="Image Description" width="200" height="50" hspace="5" vspace="5" border="0"></a>
}

Thanks for the help - I will have to try some of these options and revisit this forum. gjh42's instructions are a little technical, but will most likely make more sense to me when I start working on this. Have to go... may not be able to revisit this until this weekend. Hopefully... sooner. Thanks again for all the advise. I'll give it a try and post my results here.:smile:

OK my friends... I'm back. So, I ended up installing the Logo Sidebox add-on and created an instance of this add-on for each graphic. So, how do I control the pages on which these are to appear. For instance, I don't want the same graphic on the page to which it is linked. Most are linked to EZpages, but I may want one on a cart page or contact us page, or privacy page, etc. I didn't quite understand the suggestions by gjh42... any suggestions?

The code snippet in post 8 is not a suggestion to be interpreted, it is exactly the code you need to use to hide that link on ez-page 20. You can also adapt it very simply by changing 'page' to whatever page name you want (this is the "main_page=xxx" in the address bar at the top of the window) and eliminating the "or ..." part.```php
if ($current_page_base != 'what_ever') {
<a href="index.php?main_page=what_ever"><img src="/images/imagename.png" alt="Image Description" width="200" height="50" hspace="5" vspace="5" border="0"></a>
}

There are other methods to achieve the same result, too.

thanks! It worked like a charm!
Posted via Mobile Device

Good mornign Glen,

You were a huge help last night on the Smart Backgrounds (post thread: http://www.zen-cart.com/forum/showthread.php?t=83034&page=24)

I still need help with this one. I actually had not setup the Smart Backgrounds Add-On when I was working on this. I setup my graphics each as logo sideboxes. Unfortunately, they seem to be showing up with the default sidebox style - you can see this for the three graphics under the search box on the right at my site.

I inserted your code from the Smart Backgrounds add-on (oops just realized I forgot to make the EZpages sytax correction you figured out last night) in to the right column on tpl_main_page as follows:

/**
  * prepares and displays right column sideboxes
  *
  */
?>
        <div id="navColumnTwoWrapper" style="width: <?php echo BOX_WIDTH_RIGHT; ?>">
		<!--Smart Backgrounds  - Sidebox Graphics -->
<?php $smart_image = '';
if ($current_page_base == 'index' or $current_page_base == 'product_info') { //add _ and cPath to filename only if individual cat image exists, else add _ and top cat id to bg filename only if top cat image exists
  $smart_image = file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . $_GET[cPath] . '.gif')?'_' . $_GET[cPath]:file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . (int)$_GET[cPath] . '.gif')?'_' . (int)$_GET[cPath]:'';
} elseif ($current_page_base == 'page') { //add _page and ez-page id to filename only if ez-page id image exists, else add _page to filename only if general ez-page image exists
  $smart_image = file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_page' . $_GET[id] . '.gif')?'_page' . $_GET[id]:file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_page.gif')?'_page':'';
} else { //add _ and page base to filename only if page image exists
  $smart_image = file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . $current_page_base . '.gif')?'_' . $current_page_base:''; //default/home page class will be just .smartBG, and filename smartbg.gif
}?>
<div id/class="whatever"><?php echo  zen_image(DIR_WS_TEMPLATE_IMAGES . 'smartbg' . $smart_image . '.gif', '');?></div>
<!--/Smart Backgrounds - Sidebox Graphics -->
		
		<?php require(DIR_WS_MODULES . zen_get_module_directory('column_right.php')); ?></div>

I then duplicated my we_accept.gif graphic and renamed as smartbg.gif and uploaded. It works just the way I want. Except that it shows up the Search Box rather than below. I think I'd have to move this code to another file rather than the tpl_main_page to do this, but I'm not sure. Maybe you can suggest this as well.

So how do I make the other three show up now? I want the remaining three to link to specific pages and not show up on their respectively linked pages, and possibly other pages (ie. Our Company, Careers, etc.)

Please help, as I still haven't fully grasped the way this add-on works, but am liking the results, especially after the way it works for the header backgrounds.

Thanks,

Ara

I don't think the Smart BG code is really the best way to handle this case. You want the "we accept" image all the time, right? Just inserting the <img> code in the location you show will (should) put that image at the top of the column, above the sideboxes. If you want just one of the "logo" boxes to show depending on the page, the easiest way would be to have one logo sidebox with all the images in it, and the if() test modified and extended to display the one desired for each page.

Thanks for the reply. Actually, I don't want the we_accept.gif on the non-cart pages, such as Careers, Our Company, etc. How would I go about modifying the Logo Sidebox to make the changes necessary? Could you show me an example?

I don't have any examples laying around. If you post your logo_sidebox.php file (in ```
[php] and [/php]

Include the code for the different images, and a list of which pages you do or don't want each of them on.

Sorry for the delay. Took the family to play in the snow today. Actually, the solution may be even simpler if you could tell me how I could keep the Snazzy Rounded corners add-on for my main sideboxes and remove any styling from the Logo Sideboxes.

The Logo Sideboxes files I have so far as as follows:

For the includes/templates/myfolder/sideboxes, I have:

For the we_accept.gif (file: tpl_logo_sidebox.php)

// $Id: tpl_logo_sidebox.php,v 1.1 8/21/2008
//  --------------------------------------------------
//
// Link Option - uncomment this if you intend to use the logo as a link

//$logoimage = '<a href="' . LOGO_SIDEBOX_LINK . '">' . zen_image($template->get_template_dir(LOGO_SIDEBOX_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . LOGO_SIDEBOX_IMAGE, LOGO_SIDEBOX_IMAGE_TEXT, LOGO_SIDEBOX_IMAGE_WIDTH, LOGO_SIDEBOX_IMAGE_HEIGHT) . '</a>';

//comment this out if you use the above link option.
$logoimage = zen_image($template->get_template_dir(LOGO_SIDEBOX_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . LOGO_SIDEBOX_IMAGE, LOGO_SIDEBOX_IMAGE_TEXT, LOGO_SIDEBOX_IMAGE_WIDTH, LOGO_SIDEBOX_IMAGE_HEIGHT); 

  $content = '';
    $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">';

  $content .=  $logoimage;

  $content .= '</div>';
?>

For the 10_reasons.gif (file: tpl_logo_sidebox_10reasons.php)

// $Id: tpl_logo_sidebox.php,v 1.1 8/21/2008
//  --------------------------------------------------
//
// Link Option - uncomment this if you intend to use the logo as a link

$logoimage10reasons = '<a href="' . LOGO_SIDEBOX10REASONS_LINK . '">' . zen_image($template->get_template_dir(LOGO_SIDEBOX10REASONS_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . LOGO_SIDEBOX10REASONS_IMAGE, LOGO_SIDEBOX10REASONS_IMAGE_TEXT, LOGO_SIDEBOX10REASONS_IMAGE_WIDTH, LOGO_SIDEBOX10REASONS_IMAGE_HEIGHT) . '</a>';

//comment this out if you use the above link option.
//$logoimage10reasons = zen_image($template->get_template_dir(LOGO_SIDEBOX10REASONS_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . LOGO_SIDEBOX10REASONS_IMAGE, LOGO_SIDEBOX10REASONS_IMAGE_TEXT, LOGO_SIDEBOX10REASONS_IMAGE_WIDTH, LOGO_SIDEBOX10REASONS_IMAGE_HEIGHT); 

  $content = '';
    $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">';

  $content .=  $logoimage10reasons;

  $content .= '</div>';
?>

For the how_it_works.gif (file: tpl_logo_sidebox_oursystem.php)

// $Id: tpl_logo_sidebox.php,v 1.1 8/21/2008
//  --------------------------------------------------
//
// Link Option - uncomment this if you intend to use the logo as a link

$logoimageoursystem = '<a href="' . LOGO_SIDEBOXOURSYSTEM_LINK . '">' . zen_image($template->get_template_dir(LOGO_SIDEBOXOURSYSTEM_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . LOGO_SIDEBOXOURSYSTEM_IMAGE, LOGO_SIDEBOXOURSYSTEM_IMAGE_TEXT, LOGO_SIDEBOXOURSYSTEM_IMAGE_WIDTH, LOGO_SIDEBOXOURSYSTEM_IMAGE_HEIGHT) . '</a>';

//comment this out if you use the above link option.
//$logoimageoursystem = zen_image($template->get_template_dir(LOGO_SIDEBOXOURSYSTEM_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . LOGO_SIDEBOXOURSYSTEM_IMAGE, LOGO_SIDEBOXOURSYSTEM_IMAGE_TEXT, LOGO_SIDEBOXOURSYSTEM_IMAGE_WIDTH, LOGO_SIDEBOXOURSYSTEM_IMAGE_HEIGHT); 

  $content = '';
    $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">';

  $content .=  $logoimageoursystem;

  $content .= '</div>';
?>

For the includes/modules/sideboxes/myfolder/sideboxes/, I have:

For the we_accept.gif (file: logo_sidebox.php)

// $Id: logo_sidebox.php,v 1.1 8/21/2008

// test if box should display
//  $show_logo_sidebox = true;
    if ($this_is_home_page) {
    $show_logo_sidebox = true;
  } else {
    $show_logo_sidebox = true;
  };

 if (!isset($ezpage_id) || !in_array($ezpage_id,explode(",",'5,32,33,26,28,35,18,36,37,38'))) {
      require($template->get_template_dir('tpl_logo_sidebox.php',DIR_WS_TEMPLATE, $current_page_base,'sideboxes'). '/tpl_logo_sidebox.php');
      $title =  BOX_HEADING_LOGO_SIDEBOX;
      $left_corner = false;
      $right_corner = false;
      $right_arrow = false;
      require($template->get_template_dir($column_box_default, DIR_WS_TEMPLATE, $current_page_base,'common') . '/' . $column_box_default);
 }
?>

For the 10_reasons.gif (file: logo_sidebox_10reasons.php)

// $Id: logo_sidebox.php,v 1.1 8/21/2008

// test if box should display
  $show_logo_sidebox = true;

 if (!isset($ezpage_id) || !in_array($ezpage_id,explode(",",'20,5,32,33,26,28,35,18,36,37,38'))) {
      require($template->get_template_dir('tpl_logo_sidebox_10reasons.php',DIR_WS_TEMPLATE, $current_page_base,'sideboxes'). '/tpl_logo_sidebox_10reasons.php');
      $title =  BOX_HEADING_LOGO_SIDEBOX;
      $left_corner = false;
      $right_corner = false;
      $right_arrow = false;
      require($template->get_template_dir($column_box_default, DIR_WS_TEMPLATE, $current_page_base,'common') . '/' . $column_box_default);
 }
?>

For the how_it_works.gif (file: logo_sidebox_oursystem.php)

// $Id: logo_sidebox.php,v 1.1 8/21/2008

// test if box should display
  $show_logo_sidebox = true;

 if (!isset($ezpage_id) || !in_array($ezpage_id,explode(",",'21,5,32,33,26,28,35,18,36,37,38'))) {
      require($template->get_template_dir('tpl_logo_sidebox_oursystem.php',DIR_WS_TEMPLATE, $current_page_base,'sideboxes'). '/tpl_logo_sidebox_oursystem.php');
      $title =  BOX_HEADING_LOGO_SIDEBOX;
      $left_corner = false;
      $right_corner = false;
      $right_arrow = false;
      require($template->get_template_dir($column_box_default, DIR_WS_TEMPLATE, $current_page_base,'common') . '/' . $column_box_default);
 }
?>

For the includes/languages/english/extra_definitions/myfolder/, I have:

For the we_accept.gif (file: logo_sidebox_defines.php)

// $Id: logo_sidebox_defines.php,v 1.1 8/21/2008

define('BOX_HEADING_LOGO_SIDEBOX', 'We Accept');
define('LOGO_SIDEBOX_IMAGE_WIDTH', '200');
define('LOGO_SIDEBOX_IMAGE_HEIGHT', '40');
define('LOGO_SIDEBOX_IMAGE', 'we_accept.gif');
define('LOGO_SIDEBOX_IMAGE_TEXT', 'We Accept Visa, American Express, Mastercard, and Discover via Paypal');

//this is optional if you want to use the logo as a link
//replace your_link.com with the link you choose
define('LOGO_SIDEBOX_LINK', 'linkgoeshere.com');

?>

For the 10_reasons.gif (file: logo_sidebox_10reasons_defines.php)

// $Id: logo_sidebox_defines.php,v 1.1 8/21/2008

define('BOX_HEADING_LOGO_SIDEBOX', '');
define('LOGO_SIDEBOX10REASONS_IMAGE_WIDTH', '200');
define('LOGO_SIDEBOX10REASONS_IMAGE_HEIGHT', '55');
define('LOGO_SIDEBOX10REASONS_IMAGE', '10_reasons.gif');
define('LOGO_SIDEBOX10REASONS_IMAGE_TEXT', '10 Reasons to Choose Benchmark Design');

//this is optional if you want to use the logo as a link
//replace your_link.com with the link you choose
define('LOGO_SIDEBOX10REASONS_LINK', 'index.php?main_page=page&id=20');

?>

For the how_it_works.gif (file: logo_sidebox_oursystem_defines.php)

// $Id: logo_sidebox_defines.php,v 1.1 8/21/2008

define('BOX_HEADING_LOGO_SIDEBOX', '');
define('LOGO_SIDEBOXOURSYSTEM_IMAGE_WIDTH', '200');
define('LOGO_SIDEBOXOURSYSTEM_IMAGE_HEIGHT', '55');
define('LOGO_SIDEBOXOURSYSTEM_IMAGE', 'how_it_works.gif');
define('LOGO_SIDEBOXOURSYSTEM_IMAGE_TEXT', 'Learn How Our System Works!');

//this is optional if you want to use the logo as a link
//replace your_link.com with the link you choose
define('LOGO_SIDEBOXOURSYSTEM_LINK', 'index.php?main_page=page&id=21');

?>

That's about it. Hope this helps.

Thanks

Any luck with this Glen? Is there a way to just, perhaps, to remove any styling from the logo sidebox? This should do the trick.

To remove the xsnazzy styling from individual sideboxes, you need to disable several elements:

#logosidebox10reasons .xtop, #logosidebox10reasons .xbottom {display: none;}
#logosidebox10reasons .xboxcontent {border-width:0;}

Repeat for each version of the logo sidebox.

Also, I notice that the xsnazzy code is incomplete; each .xsnazzyCushion div never closes, so that the fifth sidebox has five layers of .xsnazzyCushion.

As far as making each sidebox appear only on the desired pages, the solution is right in the files you posted:```php
// test if box should display
// $show_logo_sidebox = true;
if ($this_is_home_page) {
$show_logo_sidebox = true;
} else {
$show_logo_sidebox = true;
};

To remove the xsnazzy styling from individual sideboxes, you need to disable several elements:

#logosidebox10reasons .xtop, #logosidebox10reasons .xbottom {display: none;}
#logosidebox10reasons .xboxcontent {border-width:0;}

That worked perfectly - thanks!

Also, I notice that the xsnazzy code is incomplete; each .xsnazzyCushion div never closes, so that the fifth sidebox has five layers of .xsnazzyCushion.

Here's the code I inserted into the tpl_default_right.php file - perhaps you can find the error:

 * @version $Id: tpl_box_default_right.php 2975 2006-02-05 19:33:51Z birdbrain $
 */

// choose box images based on box position
  if ($title_link) {
    $title = '<a href="' . zen_href_link($title_link) . '">' . $title . BOX_HEADING_LINKS . '</a>';
  }
//
?>
<!--// bof: <?php echo $box_id; ?> //-->
<!-- commented out old code <div class="rightBoxContainer" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width: <?php echo $column_width; ?>"> -->
<div class="xsnazzyCushion">
<!-- bof Rounded Corners -->
<div class="xsnazzy" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width: <?php echo $column_width; ?>">
                     <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
                     <div class="xboxcontent">
<!-- eof Rounded Corners -->
<h3 class="rightBoxHeading" id="<?php echo str_replace('_', '-', $box_id) . 'Heading'; ?>"><?php echo $title; ?></h3>

<?php echo $content; ?>
</div>

<!-- bof Rounded Corners -->
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
<!-- eof Rounded Corners -->
</div>
</div>
<!--// eof: <?php echo $box_id; ?> //-->

I just added the last </div> tag. I believe this was all that was missing, but maybe I'm wrong.

Lastly, I'd like to change Live Help sidebox to look like the others (wihout Snazzy and Header Title) - any suggestions?

Thanks again!