15 replies to this topic

[dgriff]

Hi
Version 2.3.1
I created a header and sliced up the buttons in photoshop. When adding the header via the admin panel it only allows me to select one image. Do I save my header as one .png file (without the slices)? And then do I seperately upload the sliced buttons to the images folder separately?

I know I then need to add code like this to my includes/header.php to make the buttons clickable:
<?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'button.png') . '</a>'; ?>

Thanks

[DunWeb]

@dgriff

The log upload feature is NOT designed to handle sliced images.  In fact, the header is only designed to display a logo 257x60.  If you are going to use a PSD image, you will need to rewrite portions of the header.php to contain the new image and layout.


Chris

[dgriff]

DunWeb, on 03 May 2012 - 01:41 PM, said:

@dgriff

The log upload feature is NOT designed to handle sliced images.  In fact, the header is only designed to display a logo 257x60.  If you are going to use a PSD image, you will need to rewrite portions of the header.php to contain the new image and layout.


Chris

Thanks Chris. I think I'll leave the sliced images alone. I wouldn't know where to start to re-write the header.php. Could I make the header part of a background image? Would you advise this? Do people do this? Thanks.

[NodsDorf]

dgriff, on 03 May 2012 - 04:01 PM, said:

Thanks Chris. I think I'll leave the sliced images alone. I wouldn't know where to start to re-write the header.php. Could I make the header part of a background image? Would you advise this? Do people do this? Thanks.

People do that all the time.. Hell I even use my own navigation menu in the header. See rubberstore.com (this is a Live 2.3.1 shop) or my test site at onlinegamekey.com/index/index.php (this has a background image)

[NodsDorf]

Your header can be modified and is located in catalog/includes/header.php

[dgriff]

Don
Looks great. With rubberstore.com , did you create the header and the buttons in something like photoshop and slice the image up and then re-write portions of the header.php? Or did you create the header as a single .png file and then create the buttons some other way?

Thanks..

[NodsDorf]

Hi Jim, logo and buttons were made in Photoshop. I just added them with proper linking structure to the header by adding new div layers in the header.php file.

It is as easy as coding html and css, javascript, the only thing to note is the way links work in Oscommerce that is you need to use tep_href_link function to ensure you don't lose the Session.

See more at ClubOsc here: http://www.clubosc.com/cookies-links-session-ids.html

[dgriff]

Thanks Don. I created a header in photoshop and I sliced up the buttons getting ready to upload to my server but the Store Logo in the admin area only allows me to select one file / image to upload. Do you save the entire header and buttons as one .png file and upload via the admin area, and then manually upload the individual buttons manually to the images folder? How would you recommend I do that? Thanks.

[NodsDorf]

This is our header.php file.. hopefully it can help..

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2010 osCommerce

  Released under the GNU General Public License
*/
$productno = $cart->count_contents();
$totalprice = $currencies->format($cart->show_total());

  if ($messageStack->size('header') > 0) {
	echo '<div class="grid_24">' . $messageStack->output('header') . '</div>';
  }
?>
<script language="Javascript">
function doClear(theText) {
	 if (theText.value == theText.defaultValue) {
		 theText.value = ""
	 }
}
</script>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
	var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
	if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
	d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script language=Javascript>
<!--
function clear_textbox()
{
if (document.u_input.value == "Enter Part Number")
document.u_input.value = "";
}
-->
</script>
<?php /*** Begin Header Tags SEO ***/
if (HEADER_TAGS_DISPLAY_PAGE_TOP_TITLE == 'true') {
?>
<div style="text-align:center; color:#aaa; font-size:10px;"><?php echo $header_tags_array['title']; ?></div>
<?php
}
/*** End Header Tags SEO ***/
?>
<div id="header" class="grid_24">
   <div id="storeLogo"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', (tep_not_null($header_tags_array['logo_text']) ? $header_tags_array['logo_text'] : STORE_NAME)) . '</a>'; ?></div>
  <?php /*** End Header Tags SEO ***/ ?>
<div style="float:right; padding-right:5px;"><span class="defaults_itl">Search by Design Criteria: </span><a href="<?php echo tep_href_link(FILENAME_PRODUCT_SEARCH);?>" target="_self"><img src="images/Index/Product_Search.gif" alt="Orings, Rubber Bellow, Product Search" border="0" width="157" height="20"></a><BR /><BR /></div>
<div style="clear:right;"></div>
<div class="defaults_itl" style="float:right;">Search by Part # <?php echo tep_draw_form('search', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get') . tep_draw_hidden_field('search_in_description','1') . tep_draw_input_field('keywords', '', 'size="25" name="input" value="Enter Part Number" onfocus="doClear(this)" maxlength="60" style="color: #a7a6a6;" style="width: ' . (BOX_WIDTH+155) . 'px"') . tep_hide_session_id() .'</form>'; ?></div>
<div style="clear:right;"></div>
<div style="float:right; margin-right:30%; margin-top:-20px;">
<div style="text-align:left;"><?php echo tep_customer_greeting(); ?>&nbsp;&nbsp;<?php if (tep_session_is_registered('customer_id')) { ?><a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><span class="defaults"><?php echo HEADER_TITLE_LOGOFF; ?></span></a> <?php } ?></div>
</div>
<div style="clear:both;"></div>

<div style="float:left; background-color:#000; height:28px; width:75%;">
<div style="margin-top:-1px"><a href="<?php echo tep_href_link(FILENAME_DEFAULT);?>" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/Navigation_Template/mn_home_over.gif',1)"><img src="images/Navigation_Template/mn_home.gif" alt="Home -TheRubberStore.com" name="Home" width="79" height="29" border="0"></a><a href="<?php echo tep_href_link(FILENAME_ACCOUNT);?>" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('MyAccount','','images/Navigation_Template/mn_myaccount_over.gif',1)"><img src="images/Navigation_Template/mn_myaccount.gif" alt="My Account -TheRubberStore.com" name="MyAccount" width="115" height="29" border="0"></a><a href="<?php echo tep_href_link(FILENAME_CONTACT_US);?>" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/Navigation_Template/mn_contacts_over.gif',1)"><img src="images/Navigation_Template/mn_contacts.gif" alt="Contact Us - RubberStore.com" name="Contact" width="108" height="29" border="0"></a><a href="<?php echo tep_href_link(FILENAME_MADE_TO_PRINT); ?>" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('MadeToPrint','','images/Navigation_Template/mn_madetoprint_over.gif',1)"><img src="images/Navigation_Template/mn_madetoprint.gif" alt="Made-To-Print Custom Rubber Parts - RubberStore.com" name="MadeToPrint" width="108" height="29" border="0"></a>
</div>
</div>

  <div  style="float:right; margin-left:-1%;  border-top:1px solid #000; border-right:1px solid #000; border-bottom:1px solid #000; height:26px; width:25%;">
<div style="margin-top:3px; margin-left:10px;">  <a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART);?>" target="_self"><img src="images/Navigation_Template/mn_cart-2.gif" alt="Rubber Store - Shopping Cart" border="0"></a></div>
<div style="margin-right:5px; margin-top:-15px; text-align:right;"> Items: <?php echo $productno ?> &nbsp; Total: <?php echo $totalprice ?> | <a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART);?>" target="_self" style="color: #000000; font-family: Arial; font-weight: bold;"> View Cart</a>
</div>
</div>

  <div style="clear:both;"></div>
  </div>
<?php include_once(DIR_WS_INCLUDES . 'sub_header.php'); ?>
<div class="grid_24 ui-widget infoBoxContainer">
  <div class="ui-widget-header infoBoxHeading" style="margin-top:2px;"><?php echo $breadcrumb->trail(' &raquo; '); ?></div>
</div>
<?php
  if (isset($HTTP_GET_VARS['error_message']) && tep_not_null($HTTP_GET_VARS['error_message'])) {
?>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
  <tr class="headerError">
	<td class="headerError"><?php echo htmlspecialchars(stripslashes(urldecode($HTTP_GET_VARS['error_message']))); ?></td>
  </tr>
</table>
<?php
  }
  if (isset($HTTP_GET_VARS['info_message']) && tep_not_null($HTTP_GET_VARS['info_message'])) {
?>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
  <tr class="headerInfo">
	<td class="headerInfo"><?php echo htmlspecialchars(stripslashes(urldecode($HTTP_GET_VARS['info_message']))); ?></td>
  </tr>
</table>
<?php
  }
?>

Edited by NodsDorf, 04 May 2012 - 11:00 AM.

[germ]

An alternate approach would be to use a single image and alter the code to use an "image map" for the buttons and other links.

It's not that difficult.

I could link you to a thread I posted that shows an example if you want.

[dgriff]

@NodsDorf
Thanks Don. I'll have a look at that.

[dgriff]

@germ
Yes Jim. I'd like to see that thread you posted. Cheers.

[germ]

Click Me

Of course the image coordinates for your image would be different.

[dgriff]

@germ

Jim, I had a look at that post and I have a question regarding the coordinates. For example:


<area shape="rect" coords="623,172,648,200" target="_blank" href="<?php echo $link1; ?>" alt="<?php echo $alt1; ?>" title="<?php echo $alt1; ?>" />

Regarding "coords="623,172,648,200". These are obviously the coords of the rectangle button. Do I go to the 4 corners of my rectangle shaped button and take the coords of the 4 corners?  These are the pixel coordinates of my 4 corners but they're not in the same format as the coords in your example:
(148,135....  243,134.....242,174....148,174). Where am i going wrong? Thanks

[germ]

The coordinates are taken from the upper/left corner of the image. For a rectangle the coordinates specify the upper/left, lower/right corner of the rectangle. A little explanation here

I have also used the online tool here when I was in a hurry a time or two.

[dgriff]

@germ
Thanks a lot.

Edited by dgriff, 04 May 2012 - 09:16 PM.