Looking to replace #navmainwrapper with image links and searchbar

[dvasdekis]

Currently, my #navmainwrapper top bar is like so:


I've replaced the color with my own background in CSS to get the gradient effect.

What I would like to achieve is something like this:


The images work just like the text does normally with alternative text for browsers that don't display images, and someone types something in that box (which would ideally appear as a standard white sans-serif font) and either hits search or presses enter for it to search as per normal.

Any ideas, oh amazing support team?

[dbltoe]

Just as there are around a hundred different types of automobiles. Zen-Cart can be made to look any way you wish and still have the "engine" run smoothly.
Even though most car engines are the same, the car has the hood, trunk, and passenger areas that are designed to make the customer instantly like or dislike the design.
The newer versions of Zen utilize css to "build" the car around the engine. You have a wrapper that surrounds the whole car and a wrapper for each of the other areas. As long as you don't try to have the driver get in through the trunk, you can have the door open at least three different ways. Or just have them climb in Dukes of Hazard style.
The Detroit designers set down and draw out what they want the car to look like. They generally know the basic size of the engine they are going to use. However, their original concepts don't worry about connecting the motor mounts or getting the gas from the tank to the cylinders. All that comes after the first few drafts of the "look."
Get yourself a copy of firefox with the web developer, firebug, and html validator add-ons. A copy of TopStyle lite will help as well. With these tools, you can view from the wrappers right down to the "nuts and bolts" of your cart.
With firefox and firebug you'll be able to see the details of the navMainWrapper and adjust your graphic or the css accordingly.
Maybe my analogy is a little low level for you but my point is that Zen Cart is as flexible as you need it to be and I generally talk to the lurkers as well.

[gjh42]

A note of caution: You appear to be showing the home, about us, contact us and search links filling the navbar. What do you plan to do about the other links that automatically appear in that bar when appropriate? (shopping cart, checkout, my account, logout/login)

If you have a plan to accommodate them elsewhere, that's fine.

[dvasdekis]

A note of caution: You appear to be showing the home, about us, contact us and search links filling the navbar. What do you plan to do about the other links that automatically appear in that bar when appropriate? (shopping cart, checkout, my account, logout/login)

If you have a plan to accommodate them elsewhere, that's fine.

Would it be possible to integrate these into image files as well, and make them only appear when needed? All I know about CSS I've learnt in the past 3 days.

[gjh42]

They automatically only appear when needed. You can make them images instead of text, the same as the other links.

The question I had was: where will they fit? THey normally go in the header navbar, which you appear to have filled with image links. They would generally wrap and start a second line of links in your case; is that ok?

[dvasdekis]

They automatically only appear when needed. You can make them images instead of text, the same as the other links.

The question I had was: where will they fit? THey normally go in the header navbar, which you appear to have filled with image links. They would generally wrap and start a second line of links in your case; is that ok?

No, I've only added an image background to the navmain css section.

I'm still at a loss as to how I would code in the images instead of the text. Looking at includes/languages/english/header.php (line 17) it says DEFINE_HEADER_TITLE 'Log In'. Replacing this 'log in' part with an image filename, that image filename just becomes the text at the top of the page. However, other parts of the PHP files just use an image filename, and that image then appears. Obviously I'm missing something.

The relevant CSS looks like so:

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #ffffff;
white-space: nowrap;
}

I can't see what I need to do here to add images.

I have installed web developer, but using it in itself won't teach me what CSS functions I need.

Thanks for the help!

[dbltoe]

Zen uses a template system for many things not just the stylesheet which is a template for the "look.". The header for instance is created and "laid out" by a template file named tpl_header.php. This file is found in includes/templates/template_default/common and, when modified, should be saved to includes/templates/your_template/common so as not to be overwritten with a later upgrade.
You'll note when editing tpl_header.php that it calls several other tpl_ files as well.
Right around line 50 is where it starts doing the conditional statements that check to see if there is anything in the cart or if the customer is logged in.
Go to most any basic site and add something to the cart. You'll see that the nav bar changes automatically.
If, in fact, your header image is a background, then your nav should not wrap. But, as glen said, we could not really tell from the picture. It's always better to post a link if possible.

[gjh42]

The navbar section of a stock tpl_header.php starts like this:

<!--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 } } ?>

Change
<?php echo HEADER_TITLE_CATALOG; ?>
to
<?php echo zen_image(DIR_WS_TEMPLATE_IMAGES . 'nav_home.gif', HEADER_TITLE_CATALOG); ?>
and save nav_home.gif in the /your_template/images/ folder.

Repeat for other links, to get:

<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
    <ul class="back">
    <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo zen_image(DIR_WS_TEMPLATE_IMAGES . 'nav_home.gif', HEADER_TITLE_CATALOG); ?></a></li>
<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo zen_image(DIR_WS_TEMPLATE_IMAGES . 'nav_logoff.gif', HEADER_TITLE_LOGOFF); ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo zen_image(DIR_WS_TEMPLATE_IMAGES . 'nav_my_account.gif', 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 zen_image(DIR_WS_TEMPLATE_IMAGES . 'nav_login.gif', HEADER_TITLE_LOGIN); ?></a></li>
<?php } } ?>

Continue for the rest of the list.

[dvasdekis]

Amazing! Thankyou both! I assume that many instances in Zen are similar, so that's an excellent bit of code to know.