Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Align buttons in tpl_product_info_display?

Align buttons in tpl_product_info_display?

Locked

Views: 4,986

Results 21 to 31 of 31
This thread is locked. New replies are disabled.
20 Aug 2006, 9:06 PM
#21
seethrou avatar

seethrou

Totally Zenned

Join Date:
May 2004
Location:
Hong Kong
Posts:
1,156
Plugin Contributions:
0

Align buttons in tpl_product_info_display?

I had downloaded the purpleshades_template_for_zencart_v_1.3.zip.
And tested the original file of:
includes/templates/purpleshades/common/tpl_header.php

It has two problems from my first trial.

  1. You pointed out, it has a blank space over the header under IE.
  2. It will display double Banners if in admin -> Layout Settings, and the following is enabled:
    Banner Display Groups - Header Position 1

With refer to the above file tpl_header.php

<!-- Show the banners table -->
<table class="centershop" border="0" cellspacing="0" cellpadding="0">
<?php
if (!isset($flag_disable_header) || $flag_disable_header == false) {
?>

<?php
  if ($banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET1)) {
    if ($banner->RecordCount() > 0) {
?>
<tr>
<td align="center"><div class="banners"><?php echo zen_display_banner('static', $banner); ?></div></td>
</tr>
<?Php
    }
  }
?>
<tr><td>
</table>
<!-- End Show the banners table -->

I changed some codes and only solved the above two problems.
Please modify the above codes to read as below:

<!-- Show the banners table -->

<?php
if (!isset($flag_disable_header) || $flag_disable_header == false) {
?>

<div id="headerWrapper">

<!-- End Show the banners table -->

And in the end of the file add one line:

</div>

Attached is the modified file for your reference.

.

20 Aug 2006, 9:32 PM
#22
peterbauer avatar

peterbauer

New Zenner

Join Date:
Jun 2006
Posts:
21
Plugin Contributions:
0

Re: Align buttons in tpl_product_info_display?

Yes, it works fine :-)
Now it seems to be perfect.
Thank you very much seethrou!

28 Aug 2006, 6:10 AM
#23
birdlim avatar

birdlim

New Zenner

Join Date:
Sep 2005
Posts:
44
Plugin Contributions:
0

Re: Align buttons in tpl_product_info_display?

seethrou:

Try the following in stylesheet.

.navNextPrevList {
display: inline;
}

.navNextPrevWrapper {
text-align: center;
}


Hi, how about mine? I wish to place the shipping weight and model no. first, then beside is the attribute then the right will be the add to cart button. All in horizontal line.

tks alot! website is <https://www.after5estore.com/shop>
28 Aug 2006, 9:35 AM
#24
seethrou avatar

seethrou

Totally Zenned

Join Date:
May 2004
Location:
Hong Kong
Posts:
1,156
Plugin Contributions:
0

Re: Align buttons in tpl_product_info_display?

birdlim:

Hi, how about mine? I wish to place the shipping weight and model no. first, then beside is the attribute then the right will be the add to cart button. All in horizontal line.

tks alot! website is https://www.after5estore.com/shop
Have you try the suggestion in Post #9 of this thread?
And the concept is the same.

As the title, the discussions of this thread had changed to two different designs of templates and fixed differnet issues. I had some trouble to refer to it clearly later on.

And for the more easy to follow up, better reference and easier to search which may help more others with the similar needs.

Then if you have more need, would you mind to open a new topic for your problem?
Thanks! :smile:

31 Oct 2006, 1:21 PM
#25
saurabhgautam avatar

saurabhgautam

New Zenner

Join Date:
Oct 2006
Posts:
28
Plugin Contributions:
0

Re: Align buttons in tpl_product_info_display?

Dear All,

How do i add a image button instead of Prev & Next text links in search listings?

Also in css the ez pages and listing content product name is linked

a:link, #navEZPagesTOC ul li a {
color: #FFFFFF;
text-decoration: none;
}

If i change the color it changes the sidebox ez pages listing as well as product listing in search.

can anybody help me on this. I just need to change the font colour in seach listing.

thanks in advance

1 Nov 2006, 12:56 AM
#26
seethrou avatar

seethrou

Totally Zenned

Join Date:
May 2004
Location:
Hong Kong
Posts:
1,156
Plugin Contributions:
0

Re: Align buttons in tpl_product_info_display?

saurabhgautam:

How do i add a image button instead of Prev & Next text links in search listings?

First, of course you need two buttons for the Prev and Next.
For example, call them:
for the Prev call it bn_prev.gif
for the Next call it bn_next.gif

then save them to:
includes/templates/YOUR_TEMPLATE/images/bn_prev.gif
includes/templates/YOUR_TEMPLATE/images/bn_next.gif

For the orginal Prev and Next ae texts, are defined at:
includes/languages/english.php

For the use of override, copy the above file,
and save it to a new file to your template override directory:
includes/languages/YOUR_TEMPLATE/english.php

At about line #285, found the lines below:

  define('PREVNEXT_BUTTON_FIRST', '<<FIRST');
  define('PREVNEXT_BUTTON_PREV', '[<< Prev]');
  define('PREVNEXT_BUTTON_NEXT', '[Next >>]');
  define('PREVNEXT_BUTTON_LAST', 'LAST>>');

The following only show how to modify the Prev button, and the steps for the other buttons are same.

Method #1,
use hard code for the image file location

define('PREVNEXT_BUTTON_PREV', '<img height="16" width="16" border="0" src="includes/templates/YOUR_TEMPLATE/images/bn_prev.gif" alt=""/>');

Method #2,
use relative path for the image file location

define('PREVNEXT_BUTTON_PREV', '<img height="16" width="16" border="0" src=' . DIR_WS_TEMPLATE_IMAGES . 'bn_prev.gif alt=""/>');

At #2 above, it is for more convenient and only replaced the path:
includes/templates/YOUR_TEMPLATE/images/
With the relative path:
DIR_WS_TEMPLATE_IMAGES

saurabhgautam:

Also in css the ez pages and listing content product name is linked

If i change the color it changes the sidebox ez pages listing as well as product listing in search.

can anybody help me on this. I just need to change the font colour in seach listing.
Not quite clear for me, please be more specific.

Or, try the css in below:

.productListing-data a {
	color: Maroon;
}

.productListing-data a:hover {
	color: blue;
}

#ezpagesContent a {
	color: green;
}

#ezpagesContent a:hover {
	color: maroon;
}
1 Nov 2006, 6:54 PM
#27
saurabhgautam avatar

saurabhgautam

New Zenner

Join Date:
Oct 2006
Posts:
28
Plugin Contributions:
0

Re: Align buttons in tpl_product_info_display?

Many thanks seethrou....solved my issue...you are a genius:smartass:

2 Nov 2006, 10:06 AM
#28
ellivir avatar

ellivir

Zen Follower

Join Date:
Sep 2005
Posts:
444
Plugin Contributions:
0

Re: Align buttons in tpl_product_info_display?

Hi!

How would I align the AddCart Button to the text nicely that they would be either aligned on the bottom or that the text "Add to Cart:" and the box after would be in the middle of the button that is on right?
As you can see in the attached picture, now the button is a bit higher than the text and it doesn't look nice. I do not want the button below the text "Add to Cart:" + box and thus I removed a <br> from the template code.

Elli

2 Nov 2006, 10:40 AM
#29
seethrou avatar

seethrou

Totally Zenned

Join Date:
May 2004
Location:
Hong Kong
Posts:
1,156
Plugin Contributions:
0

Re: Align buttons in tpl_product_info_display?

Try the following in stylesheet, it vertical align the input box and the button. And adjust it for other style.

#cartAdd input {
	vertical-align: middle;
}
3 Nov 2006, 9:56 AM
#30
ellivir avatar

ellivir

Zen Follower

Join Date:
Sep 2005
Posts:
444
Plugin Contributions:
0

Re: Align buttons in tpl_product_info_display?

seethrou:

Try the following in stylesheet, it vertical align the input box and the button. And adjust it for other style.

#cartAdd input {
vertical-align: middle;
}


Great seethrou! It worked fine! :)
I was trying the exactly same but didn't have the word "input" there...

Elli
3 Nov 2006, 10:18 AM
#31
seethrou avatar

seethrou

Totally Zenned

Join Date:
May 2004
Location:
Hong Kong
Posts:
1,156
Plugin Contributions:
0

Re: Align buttons in tpl_product_info_display?

The right tools and view source will always help. :smile:
There are #cartAdd and input in the source but not in normal stylesheet. For it is not all class or id will be used in normal suitation.

<div id="cartAdd">
<input type="text" size="4" maxlength="6" value="1" name="cart_quantity"/>
<input type="hidden" value="26" name="products_id"/>
<input type="image" title=" Add to Cart " alt="Add to Cart" src="includes/templates/template_default/buttons/english/button_in_cart.gif"/>
</div>

.