Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Site wide horizontal thumb display please

Site wide horizontal thumb display please

Locked

Views: 3,525

Results 1 to 20 of 28
This thread is locked. New replies are disabled.
19 Oct 2007, 2:15 AM
#1
nicecarvings avatar

nicecarvings

New Zenner

Join Date:
Oct 2007
Posts:
51
Plugin Contributions:
0

Site wide horizontal thumb display please

I would like for my image thumbs to display in a 3 horizontal column like in my "new products for month) on the main page...
http://www.nicecarvings.com/cart/

I think I would like for product image thumbs in all categories to display in 3 horizontal columns like this as well. Not just a single vertical row like here...
http://www.nicecarvings.com/cart/index.php?main_page=index&cPath=1

Can it be done? If so...how?

TIA :smile:

19 Oct 2007, 10:15 PM
#2
nicecarvings avatar

nicecarvings

New Zenner

Join Date:
Oct 2007
Posts:
51
Plugin Contributions:
0

Re: Site wide horizontal thumb display please

This issue is not nearly as important to me now that I have standardized my image size width... :blink:

Still might be neat to get the image display in columns for category views.. Don't have a clue how to do it though.

PS: Anyone know how to get a break or space between the images on this page?...

http://www.nicecarvings.com/cart/index.php?main_page=index&cPath=1

19 Oct 2007, 11:32 PM
#3
rufus avatar

rufus

Zen Follower

Join Date:
Sep 2007
Posts:
214
Plugin Contributions:
0

Re: Site wide horizontal thumb display please

Hi,

The top of your page overlaps your header in IE7

This can be fixed by changing your #logoWrapper height from 75px to the actual height of your header image (200px) like so:

#logoWrapper{
background-image: url(../images/header_bg.jpg);
background-repeat: repeat-x;
background-color: #ffffff;
height:200px;
}

19 Oct 2007, 11:35 PM
#4
rufus avatar

rufus

Zen Follower

Join Date:
Sep 2007
Posts:
214
Plugin Contributions:
0

Re: Site wide horizontal thumb display please

:oops: I forgot to mention, to add space between your category list images, you can add this to your stylesheet also

.productListing-data {
padding: 0.1em 0.1em 0.1em 0.1em;
}

20 Oct 2007, 5:09 AM
#5
nicecarvings avatar

nicecarvings

New Zenner

Join Date:
Oct 2007
Posts:
51
Plugin Contributions:
0

Re: Site wide horizontal thumb display please

Thanks Rufus!

Will be tackling those tasks tomorrow thanks to your help.

Actually, I don't see the problem in IE7 that you mentioned. hmmm. :dontgetit

21 Oct 2007, 12:32 AM
#6
nicecarvings avatar

nicecarvings

New Zenner

Join Date:
Oct 2007
Posts:
51
Plugin Contributions:
0

Re: Site wide horizontal thumb display please

I found the solution to original question here...EASY!

Admin>Config>Product Listing>Product Listing>Layout Style>Toggle Cloumns or Rows!! :)

22 Oct 2007, 8:40 PM
#7
nicecarvings avatar

nicecarvings

New Zenner

Join Date:
Oct 2007
Posts:
51
Plugin Contributions:
0

Re: Site wide horizontal thumb display please

RuFuS:

Hi,

The top of your page overlaps your header in IE7

This can be fixed by changing your #logoWrapper height from 75px to the actual height of your header image (200px) like so:

#logoWrapper{
background-image: url(../images/header_bg.jpg);
background-repeat: repeat-x;
background-color: #ffffff;
height:200px;
}

Weird, turns out this problem does exsist Rufus. It just wasn't showing on my PC and I noticed it on my kids pc. Really funky looking.

I tried your fix...it didn't work.

Link is in my signature, header image area is messed up looking in IE7. Please help! I dunno what to do. :smile:

22 Oct 2007, 9:20 PM
#8
rufus avatar

rufus

Zen Follower

Join Date:
Sep 2007
Posts:
214
Plugin Contributions:
0

Re: Site wide horizontal thumb display please

Hi,

When I looked on the site it was set back to 75px again so I tested everything again and it worked fine for me once I had set it to 200px?

Change it back to 200px and I will look again for you... :blink:

22 Oct 2007, 9:40 PM
#9
nicecarvings avatar

nicecarvings

New Zenner

Join Date:
Oct 2007
Posts:
51
Plugin Contributions:
0

Re: Site wide horizontal thumb display please

Ok. Changed it back!

You're right man! Checked the kids IE7. All good. :cool:

Wait a minute...don't go nowhere. While you are here...

  1. Do you know how to fix that line where the background shows through and eliminate the large gap between the header image and the cart contents area? (see screen cap)

  2. Then, about where that gap is...I'd like to put a little make shift text navigation area with links to the rest of my website.

I'm guessing this is all done in the stylesheet?? :huh:

22 Oct 2007, 11:11 PM
#10
rufus avatar

rufus

Zen Follower

Join Date:
Sep 2007
Posts:
214
Plugin Contributions:
0

Re: Site wide horizontal thumb display please

Try:

In templates/yourtemplate/common/tpl_header.php

Remove <div id="taglineWrapper"> and everything in it (inluding any other divs) as you are not using this function.

Also remove the <br class="clearBoth" /> directly below it.

In your css, change the #logowrapper height to 150px (sorry I thought your banner logo was 200px high :blush:)

#logoWrapper{
background-image: url(../images/header_bg.jpg);
background-repeat: repeat-x;
background-color: #aabbbb;
height:150px;
}

22 Oct 2007, 11:53 PM
#11
nicecarvings avatar

nicecarvings

New Zenner

Join Date:
Oct 2007
Posts:
51
Plugin Contributions:
0

Re: Site wide horizontal thumb display please

I see the first thing you want me to remove, the tagline wrapper. But I don't even see the <br class="clearBoth" />

<?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 } ?>
23 Oct 2007, 12:03 AM
#12
nicecarvings avatar

nicecarvings

New Zenner

Join Date:
Oct 2007
Posts:
51
Plugin Contributions:
0

Re: Site wide horizontal thumb display please

Ok. I removed those two things but it looks funny. I must have missed something.

<div id="taglineWrapper"> <br class="clearBoth" />

here is the code currently.

<?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))) { ?>
   
<?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>

<!--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 } ?>
23 Oct 2007, 12:08 AM
#13
rufus avatar

rufus

Zen Follower

Join Date:
Sep 2007
Posts:
214
Plugin Contributions:
0

Re: Site wide horizontal thumb display please

So it would be this:

 <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>

and then just below it remove this:

<br class="clearBoth" />
<!--eof-branding display-->

Obviously you don't need to remove the <!--eof-branding display--> but I included it for your reference.

23 Oct 2007, 12:10 AM
#14
rufus avatar

rufus

Zen Follower

Join Date:
Sep 2007
Posts:
214
Plugin Contributions:
0

Re: Site wide horizontal thumb display please

You didn't remove what was inside the Tags (as above)

23 Oct 2007, 12:21 AM
#15
nicecarvings avatar

nicecarvings

New Zenner

Join Date:
Oct 2007
Posts:
51
Plugin Contributions:
0

Re: Site wide horizontal thumb display please

Oh Schnap!! Zomygod...Perfect! :clap: You are good Rufus and I appreciate your help!!

BTW: At the time you told me about the header image to go to 200, it was 200 high at the time. I only recently changed it to 150!

Now I swear 1 more issue and I'm going live...How do I add some text to that area that we were just messing with? I just want a few various links. :huh:

Or if not that particular area...anywhere that you think I could pull it off. I see there isn't much room there now...

23 Oct 2007, 12:26 AM
#16
rufus avatar

rufus

Zen Follower

Join Date:
Sep 2007
Posts:
214
Plugin Contributions:
0

Re: Site wide horizontal thumb display please

BTW: At the time you told me about the header image to go to 200, it was 200 high at the time. I only recently changed it to 150!

LOL I was scratching my head how I messed that up :blush:

Give me an example of what you want to link to...

23 Oct 2007, 12:35 AM
#17
nicecarvings avatar

nicecarvings

New Zenner

Join Date:
Oct 2007
Posts:
51
Plugin Contributions:
0

Re: Site wide horizontal thumb display please

RuFuS:

LOL I was scratching my head how I messed that up :blush:

Of course it was me the whole time. :wacko:

Give me an example of what you want to link to...

Well if you look on our forum page...just below the header image you will see this little make shift text navigation area like this...

News: Links to main site:
** Website Signs Arcade Store Forum Contact**Link here...
http://www.nicecarvings.com/forum/

It's cheesy I know, but I would just like to do something similar in my zencart. Where exactly would I enter the code for that? Or do you have any other suggestions?

:)

23 Oct 2007, 12:50 AM
#18
rufus avatar

rufus

Zen Follower

Join Date:
Sep 2007
Posts:
214
Plugin Contributions:
0

Re: Site wide horizontal thumb display please

You could do that BUT aesthetically I don't think you will be pleased with the result. There is also the point that 5 of the 6 links would only be repeating what is already on the page.

Why not create a side banner for your forum instead?

23 Oct 2007, 1:01 AM
#19
nicecarvings avatar

nicecarvings

New Zenner

Join Date:
Oct 2007
Posts:
51
Plugin Contributions:
0

Re: Site wide horizontal thumb display please

You mean a side banner for the zencart and the forum probably..?

That would be awesome, but I wouldn't know how to. My web design skills unfortunately limited to Netobjects fusion wysiwyg. I have to know how to code to add stuff to the cart and forum...If the forum and zencart were residing within my wysiwyg program, it would be easy for me to add the banner navigator. Well easy cause the master border follows you to every new page you make in that program.

Anyway...hmmmm. I just know I need a couple links from my zencart to my main website and forum, etc. Otherwise it is kinda weird. Example: If you are navigating from my main website right now, you eventually get stuck in my zencart. 2 choices from there...BUY SOMETHING! :smile: ...or leave... :(

See what I'm sayin...?

23 Oct 2007, 2:11 AM
#20
nicecarvings avatar

nicecarvings

New Zenner

Join Date:
Oct 2007
Posts:
51
Plugin Contributions:
0

Re: Site wide horizontal thumb display please

Or is there something within Zen admin where I can easily add a nice little custom nav banner?

Is that what you were trying to say? :blush: