Making an imagemap or placing links to the right of the logo?

[yelow]

Good day all, thanks for viewing the thread. I've been messing with ZenCart and it's an awesome system, everything is pretty much self explanatory, but there is something that I'm not sure how to go about;

I have an online store that I'm working on (http://store.persite.com) (please don't order stuff it's live) (seriously it'll be a pain to get your moneys back) and it's going pretty well. I still need to get a .csv of all the products to fill our catalog, but I see where it's going in that regard.

Now, it's basically the stylistic changes that need to be made. I've made a handful of EZ pages, that only serve the purpose of displaying information, or in one case, collecting it. There will be no fancy phping in the EZ pages, I know that's standard, I've no need to install a mod to make work any other way.


HOWEVER, this is the issue that I'm having. I need to have four links in the upper right-hand side of the webpage. I have the icons in question saved as .gifs with transparency, and would like to position them in the pre-rendered grooves of the header_bg.jpg image.

I assume this would be best served as separate .gifs and absolute positioning, but this could also function as an imagemap. The implementation does not matter to me, whatever is less lines of code will do, basically.

The links are going to be all internal, one for shopping cart (zen cart needs to make a dedicated SHOPPING CART HERE CLICK CLICK CLICK part of the page, it's not obvious enough), one for account (or log-in, I suppose), one for Contact (ez page) and one for Support (also probably ez page).

I assume that this belongs somewhere here:

<!--bof-branding display-->
<div id="logoWrapper">
    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
    <div id="taglineWrapper">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
              }
?>
<?php
              if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
                if ($banner->RecordCount() > 0) {
?>
      <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
                }
              }
?>
    </div>
<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
</div>
<br class="clearBoth" />
<!--eof-branding display-->

...but I'm not willing to bet the lives of loved ones on this assumption. Is this the right place?

And if so, how do I go about placing the images in? <img src= will surely not play well in the middle of a php document, so..?

Am I putting the images in a .tpl file in general? Or are they being 'styled' in as a z-index layer?

Thanks in advance for reading through this. I am not at all picky, and any method that will get 2 and 2 to equal 4 is good enough for me! :)

-Tim

[yelow]

I would like to put some links in the form of .gif icons in the top-right side of where the main banner is. I am not sure as to what part of the .tpl I should be messing with.

<!--bof-branding display-->
<div id="logoWrapper">
    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
    <div id="taglineWrapper">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
              }
?>
<?php
              if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
                if ($banner->RecordCount() > 0) {
?>
      <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
                }
              }
?>
    </div>
<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
</div>
<br class="clearBoth" />
<!--eof-branding display-->

The question I have about this is (well, two questions):

1) What file should I be editing?
2) Can I put just regular HTML into a .tpl file, like an img src?

thanks,

-Tim

p.s. yes, this is a repeat/crosspost of this original, completely failed, thread:

[yelow]

The address of the site is Store.Persite.com by the way.

I've succeded in getting a 'hello world' up there, so I know that I'm in the right ball park, but I'm having a lot of trouble aligning the content, it won't follow any CSS rules that I dictate. I can't make it absolute, I can't float it, what gives?

-Tim

[Kim]

Please DO NOT start a new thread for an old issue. Your threads have been merged.

[yelow]

Thank you for mergning the threads, I realized that I was posting in in the wrong forum (the override obviously works fine) and thought that this one would have the appropriate traffic associated with it.

The issue is old, true, but I'm having brand new problems with it!

And does no one really have ANY clue as to how to stylize elements in the header / inside a .tpl file?

Would it be 'A Bad Thing' to post about that question speicifcally? I hate the fact that it's not what you ask, it's how you ask it. I imagine many people that otherwise knew the answer just glazed over my thread title as 'obscure' or whatever.

I've searched and searched (both this forum and not) and have come up pretty empty handed.

[monkeypeach]

I want to move the car/login to the right of the logo. How did you actually get the hello world text etc to where it is?

[yelow]

/includes/templates/template_default/common/tpl_header.php

Copy that file into

/includes/templates/YOUR_THEME_NAME/common/tpl_header.php

<?php
/**
 * Common Template - tpl_header.php
 *
 * this file can be copied to /templates/your_template_dir/pagename<br />
 * example: to override the privacy page<br />
 * make a directory /templates/my_template/privacy<br />
 * copy /templates/templates_defaults/common/tpl_footer.php to /templates/my_template/privacy/tpl_header.php<br />
 * to override the global settings and turn off the footer un-comment the following line:<br />
 * <br />
 * $flag_disable_header = true;<br />
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_header.php 4813 2006-10-23 02:13:53Z drbyte $
 */
?>

<?php
  // Display all header alerts via messageStack:
  if ($messageStack->size('header') > 0) {
    echo $messageStack->output('header');
  }
  if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
  echo htmlspecialchars(urldecode($_GET['error_message']));
  }
  if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
   echo htmlspecialchars($_GET['info_message']);
} else {

}
?>


<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>

<div id="headerWrapper">
<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
    <ul class="back">
    <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
<?php } } ?>

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?>
</ul>
</div>
<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
<br class="clearBoth" />
</div>
<!--eof-navigation display-->

<!--bof-branding display-->
<div id="logoWrapper">
    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
    <div id="taglineWrapper">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
              }
?>
<?php
              if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
                if ($banner->RecordCount() > 0) {
?>
      <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
                }
              }
?>
    </div>
<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
</div>
<br class="clearBoth" />
<!--eof-branding display-->

<!--eof-header logo and navigation display-->

<!--bof-optional categories tabs navigation display-->
<?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>
<!--eof-optional categories tabs navigation display-->

<!--bof-header ezpage links-->
<?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<?php require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php'); ?>
<?php } ?>
<!--eof-header ezpage links-->
</div>
<?php } ?>

There is a div with the ID logowrapper, that's the tag that calls for the logo to be loaded. I inserted my code right after it.

Just be sure to override the file by copying it into your theme folder, rather than editing the original.

-Tim

[yelow]

Well, problem got solved - kinda - but here's how I did it:

We're still working in the tpl_header.php file

<div id="logoWrapper">
    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . '<img src="http://store.persite.com/includes/templates/persite/images/logo.gif">'  . '</a>'; ?></div>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
    <div id="taglineWrapper">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
              }
?>
<?php
              if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
                if ($banner->RecordCount() > 0) {
?>
      <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
                }
              }
?>
    </div>
<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT)   zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT)
?>

<div id="buttonContainer">
<?php echo '<img src="http://store.persite.com/includes/templates/persite/images/nav/spacer.gif" width="215px">'; ?>
<?php echo '<a href="http://store.persite.com/#">' . '<img src="http://store.persite.com/includes/templates/persite/images/nav/icon_1.gif">'  . '</a>'; ?>
<?php echo '<a href="http://store.persite.com/index.php?main_page=page&id=12">' . '<img src="http://store.persite.com/includes/templates/persite/images/nav/icon_2.gif">'  . '</a>'; ?>
<?php echo '<a href="http://store.persite.com/index.php?main_page=account">' . '<img src="http://store.persite.com/includes/templates/persite/images/nav/icon_3.gif">'  . '</a>'; ?>
<?php echo '<a href="http://store.persite.com/index.php?main_page=shopping_cart">' . '<img src="http://store.persite.com/includes/templates/persite/images/nav/icon_4.gif">'  . '</a>'; ?>
</div>

</div>

Here is the code I added, only five images, spaced pixel-perfect.

<div id="buttonContainer">
<?php echo '<img src="http://store.persite.com/includes/templates/persite/images/nav/spacer.gif" width="215px">'; ?>
<?php echo '<a href="http://store.persite.com/#">' . '<img src="http://store.persite.com/includes/templates/persite/images/nav/icon_1.gif">'  . '</a>'; ?>
<?php echo '<a href="http://store.persite.com/index.php?main_page=page&id=12">' . '<img src="http://store.persite.com/includes/templates/persite/images/nav/icon_2.gif">'  . '</a>'; ?>
<?php echo '<a href="http://store.persite.com/index.php?main_page=account">' . '<img src="http://store.persite.com/includes/templates/persite/images/nav/icon_3.gif">'  . '</a>'; ?>
<?php echo '<a href="http://store.persite.com/index.php?main_page=shopping_cart">' . '<img src="http://store.persite.com/includes/templates/persite/images/nav/icon_4.gif">'  . '</a>'; ?>
</div>

I cannot figure out why some CSS code works, and some doesn't All these divs have IDs attached to them, but if I attach one in the same manner it doesn't work. Or, oddly, it only works in Internet Explorer and not Firefox. I'm kinda used to the opposite.

Regardless, they're up there now, and seem to be working. I Browsershot about 36 different browsers and every single one (except IE 4 and 5) rendered the page to my satisfaction.

To my satisfaction does not nececsarily mean 'correctly', but it's right enough for now.

HTML and CSS don't even come close to validating, no one is going to surprise me with that.

-Tim

[monkeypeach]

Looks great. Thanks for posting the details.

[yelow]

The ZenCart! Community Forum - helping me, help myself.

I actually pulled out a php dev to work on this for me, he looked at it for like 15 seconds, and said "Oh no, this is how."

Lo and behold.

-Tim