Header Tabs | Side By Side

Tabbed Product and Fragment Descriptions.
classixshop
Posts: 10
Joined: Wed Jan 07, 2009 2:45 am

Header Tabs | Side By Side

Post by classixshop » Wed Jan 07, 2009 2:50 am

Hi, I've recently purchased the tabber plug-in for our Actinic site. The tabber headings seem to be in one column (ie. one on top of the other). I am wondering how i can have them all on one row. I am using three tab headings at the moment and don't intend to ad anymore. Most site's i have seen with this function seem to be able to accomplish this. Cheers FrAz

norman
Site Admin
Posts: 1237
Joined: Sat Feb 07, 2004 9:55 pm

Re: Header Tabs | Side By Side

Post by norman » Wed Jan 07, 2009 8:11 pm

As always, an URL would help.

classixshop
Posts: 10
Joined: Wed Jan 07, 2009 2:45 am

Re: Header Tabs | Side By Side

Post by classixshop » Thu Jan 08, 2009 9:00 am

As always i'm half asleep when posting these! lol. Yeh i've got it on our test site.

ww dot classixshop dot com /acatalog/test/acatalog

Cheers FrAz

norman
Site Admin
Posts: 1237
Joined: Sat Feb 07, 2004 9:55 pm

Re: Header Tabs | Side By Side

Post by norman » Thu Jan 08, 2009 11:42 am

That's your home page. There's nothing using Tabber there. I looked around a bit but gave up when I couldn't find a product using Tabber. Definitive URL please?
Norman

classixshop
Posts: 10
Joined: Wed Jan 07, 2009 2:45 am

Re: Header Tabs | Side By Side

Post by classixshop » Thu Jan 08, 2009 12:15 pm

As i said, it's on our test site same address, but /test/acatalog. These only four products on there and i think two of them are using tabber.

direct link:

http://www.classixshop.com/acatalog/tes ... g/8656.php

Cheers FrAz

norman
Site Admin
Posts: 1237
Joined: Sat Feb 07, 2004 9:55 pm

Re: Header Tabs | Side By Side

Post by norman » Thu Jan 08, 2009 12:42 pm

I've found a faulty product and I cannot see why the tabs are stacking like they are. It may some interaction between your site layout or CSS and tabber.

All I can suggest is adding <br clear="all" /> just above the line

<actinic:variable name="TabbedDescription" value="TabbedProductDescription" />

in your procduct layout.

You could also try putting a DIV around

<actinic:variable name="TabbedDescription" value="TabbedProductDescription" />

so that the tabbed area is sitting inside a known width.

If neither of these fix things then I'll happily refund you.
Norman

norman
Site Admin
Posts: 1237
Joined: Sat Feb 07, 2004 9:55 pm

Re: Header Tabs | Side By Side

Post by norman » Thu Jan 08, 2009 12:44 pm

You could also try

<table width="100%"><tr><td width="100%">
<actinic:variable name="TabbedDescription" value="TabbedProductDescription" />
</td></tr></table>
Norman

classixshop
Posts: 10
Joined: Wed Jan 07, 2009 2:45 am

Re: Header Tabs | Side By Side

Post by classixshop » Thu Jan 08, 2009 1:45 pm

I refund is the last thing i want :) It's a great plug-in just want to smooth out the creases.

i've tried what you asked in the earlier posts, but no luck :(

I was using the advanced layouts for the tabber function: and this is our overall layout for all products. Could there be something is this causing it to behave this way?

Code: Select all

<!-- ProductLine HTML begin -->
<!-- Insert HTML for the top of the individual product -->
<actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%20%3e%201" ><!-- ProductSeparator HTML begin -->
<!-- This template specifies the product separators -->

<TR><TD COLSPAN="3"><HR SIZE="1" ALIGN="CENTER" WIDTH="100%"></TD></TR>

<!-- This template specifies the product separators -->
<!-- ProductSeparator HTML end --></actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductFormUsed%22%20%2f%3e" >
      <form method="post" action="<actinic:variable value="Shopping Cart Script URL" name="OnlineScriptURL" />"> 
         <input type="hidden" name="SID" value="<actinic:variable name="SectionID" />" />
         <input type="hidden" name="PAGE" value="PRODUCT" />           
         <input type="hidden" name="PAGEFILENAME" value="<actinic:variable name="SectionPageName" />" />
         <Actinic:SECTION BLOB='<actinic:variable name="SectionCatFile" />'/>
</actinic:block>
  <tr>
    <td width="325" rowspan="2" valign="TOP" align="CENTER">  <actinic:variable name="ProductImageLayout" />
    
<actinic:variable name="Extra Image Layout" />

   	</TD>

	<TD COLSPAN="2" VALIGN="TOP" ALIGN="center">

<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td>
<p class="moiicon"><actinic:variable formatting="font(Name|Verdana|Size|12),bold" encoding="actinic" name="ProductName" />
<br/><br/>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductReferenceVisible%22%20%2f%3e" >
         Product Code: <actinic:variable formatting="font(Name|Verdana|Size|11|Color|ba2323),bold" name="ProductReference" />
</actinic:block></p>

<actinic:variable name="TabbedDescriptionAdvanced" value="TabbedProductPrefix" />
<br />
<actinic:variable name="TabbedDescriptionAdvanced" value="TabbedProductSuffix" />
<actinic:variable name="TabbedDescriptionAdvanced" value="TabbedProductTabs" />
<br />

<actinic:block if="%3cactinic%3avariable%20name%3d%22FileURLNotEmpty%22%20%2f%3e" >
	<a href="<actinic:variable name="ProductLinkInfo" />">
	</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22FileURLNotEmpty%22%20%2f%3e" >
	</a>
</actinic:block>
<actinic:variable name="AttributeList" />
<actinic:variable name="ComponentList" />
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsAddToCartButtonShown%22%20%2f%3e%20%3d%3d%20False" >
</actinic:block>
   <p>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsAddToCartButtonShown%22%20%2f%3e%20AND%20%0d%28%3cactinic%3avariable%20name%3d%22NumberAttributesInPushButtonGrid%22%20%2f%3e%20%3d%3d%200%29" >
<actinic:variable name="AddToCartButton" />
</actinic:block>
      <actinic:block if="%3cactinic%3avariable%20name%3d%22IsOutOfStockShown%22%20%2f%3e" ><!-- OutOfStock HTML begin -->
<!-- This template is used for the out of stock message. -->

<P><B><FONT FACE="ARIAL"><actinic:variable name="OutOfStock" /></FONT></B></P>

<!-- This template is used for the out of stock message. -->
<!-- OutOfStock HTML end --></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22IsCatalogSuspendedShown%22%20%2f%3e" ><!-- Suspended HTML begin -->
<!-- This template is used for the catalog suspended message. -->

<P><B><FONT FACE="ARIAL"><actinic:variable name="CatalogSuspended" /></FONT></B></P>

<!-- This template is used for the catalog suspended message. -->
<!-- Suspended HTML end --></actinic:block>

<br /><br />
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsRetailCustomerMessageUsed%22%20%2f%3e" >
<Actinic:PRICE_EXPLANATION PROD_REF="<actinic:variable name="ProductID" />" COMPONENTID=-1><actinic:variable name="RetailCustomerMessage" /></Actinic:PRICE_EXPLANATION>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PriceIsEnabled%22%20%2f%3e" >
<b>
<Actinic:PRICES PROD_REF="<actinic:variable name="ProductID" />" RETAIL_PRICE_PROMPT="<actinic:variable name="ProductPriceDescription" />">
<actinic:variable name="PriceListRetail" />
</Actinic:PRICES>
</b>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductPriceIsEnabled%22%20%2f%3e%20%3d%3d%20False" >
<Actinic:NOTINB2B><strong><actinic:variable name="ProductPriceNotEnabledMessage" /></strong></Actinic:NOTINB2B>
</actinic:block>
   <actinic:block if="%3cactinic%3avariable%20name%3d%22DiscountDescriptionIsShownForProducts%22%20%2f%3e" >
      <actinic:variable value="Standard Section Discount List" name="DiscountList" />
   </actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsOtherInfoPromptShown%22%20%2f%3e" >
         <br />
         <span class="actrequired"><actinic:variable name="OtherInfoPrompt" /></span><br />
         <input type="text" name="O_<actinic:variable name="ProductID" />" size="60" maxlength="1000" value="" />
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsDatePromptShown%22%20%2f%3e" >
         <br />
         <span class="actrequired"><actinic:variable name="DatePrompt" /></span><br />
         <actinic:variable name="DayList" /><actinic:variable name="MonthList" /><actinic:variable name="YearList" />
</actinic:block>
</FONT>

<FONT>

<actinic:variable name="CartErrorListXML" />
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsQuantityPromptShown%22%20%2f%3e" >
      <br />
      <span class="actrequired"><actinic:variable name="QuantityPrompt" /></span>
      &nbsp;
      <input type="text" name="Q_<actinic:variable name="ProductID" />" size="4" value="<actinic:variable name="DefaultQuantity" />" />
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsQuantityPromptHidden%22%20%2f%3e" >
	<input type="hidden" name="Q_<actinic:variable name="ProductID" />"  value="<actinic:variable name="DefaultQuantity" />" />
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22FileURLNotEmpty%22%20%2f%3e" >
	<a href="<actinic:variable name="ProductLinkInfo" />">
	</actinic:block>
<actinic:variable formatting="font(Size|11|Color|000000),bold" encoding="actinic" name="ProductLinkText" />	
<actinic:block if="%3cactinic%3avariable%20name%3d%22FileURLNotEmpty%22%20%2f%3e" >
	</a>
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpPageDisplayedByButton%22%20%2f%3e" >
    <actinic:variable name="ExtendedInformationLinks" />
</actinic:block>
<br /><br />
<script type=text/javascript>
var _d = "<actinic:variable name="ProductName" />";
var _e = "subject=Take alook at this "+_d;
var _m = "<img src='email.gif' border='0' alt='E-mail a friend'/>";
document.write("<a href='mailto:?"+_e+"'>"+_m+"</a>");
</script>
<br /><br />
<!-- AddThis Button BEGIN -->
<script type="text/javascript">addthis_pub  = 'classix';</script>
<a href="http://www.addthis.com/bookmark.php" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s7.addthis.com/button1-addthis.gif" width="125" height="16" border="0" alt="" /></a><script type="text/javascript" src="http://s7.addthis.com/js/152/addthis_widget.js"></script>
<!-- AddThis Button END -->
<br /><br />
<a href="<actinic:variable name="UpALevelPageURL" />"><img src="backpage.gif" border="0" alt="Preivous Page"></a>
</td></tr></table>

<TD COLSPAN="2" VALIGN="TOP" ALIGN="right">
<actinic:variable name="BestSellersList" />
<actinic:variable name="NewProductListSidebar" />

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductFormUsed%22%20%2f%3e" >
      </form>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpPageGenerated%22%20%2f%3e" >
	<actinic:variable name="ExtendedInfoPageDesign" />
</actinic:block>
Cheers FrAz

norman
Site Admin
Posts: 1237
Joined: Sat Feb 07, 2004 9:55 pm

Re: Header Tabs | Side By Side

Post by norman » Thu Jan 08, 2009 2:04 pm

Code: Select all

<table border="1" width="100%"><tr><td width="100%">
<actinic:variable name="TabbedDescriptionAdvanced" value="TabbedProductTabs" />
</td></tr></table>
And see if you can see the border full width. If so, it's likely some sort of CSS conflict.
Norman

classixshop
Posts: 10
Joined: Wed Jan 07, 2009 2:45 am

Re: Header Tabs | Side By Side

Post by classixshop » Thu Jan 08, 2009 2:25 pm

Yes the border was visable at full width. What would be my next port of call?

norman
Site Admin
Posts: 1237
Joined: Sat Feb 07, 2004 9:55 pm

Re: Header Tabs | Side By Side

Post by norman » Thu Jan 08, 2009 2:37 pm

I don't know. It's very likely an interaction between your CSS and the small amount that Tabber uses.

Tabber works fine on default Actinic sites so the problem is very likely to be CSS or other code that you've introduced.

Tabber is a low-cost add-on and I have not got the time required to look at this further.

My offer of a refund may be best.
Norman

classixshop
Posts: 10
Joined: Wed Jan 07, 2009 2:45 am

Re: Header Tabs | Side By Side

Post by classixshop » Thu Jan 08, 2009 5:27 pm

Right i've done i little investgating through the site and here's my findings.

If i it were a .css conflict if i removed all the css from the stylesheet in Actinic then it would have nothing the conflict with!?

Anyway i did this and i changed the 'Tabber' function but only slightly.

I narrowed down in the actinic .css what code with altering the 'Tabber'.

Code: Select all

/*TOP NAVIGATION*/
ul{list-style: none;
margin:0;
margin-top:7px;
margin-bottom:7px;
padding:0;
text-align: center;
width:95px;
font-weight:bold;
font-size:11px;
}
which seems to be responsible for the top navigation links of the site.

I also have one more question regarding 'Tabber'
I have attached a link of how the 'Tabber' looks in Actinic
http://www.classixshop.com/acatalog/tes ... g/8656.php. I have created three headers, but the only header's information that with change from product to product with be the 'INFO' tab. As all product are made from different material and washing instructions, but the other two headers 'DELIVERY & RETURNS' will never change. So instead of adding the returns and delivery informtion to every product within our catalog. Can we input this information somewhere esle within the plug-in, as it would be a real ballache to convert our site to this new format.

Cheers FrAz

norman
Site Admin
Posts: 1237
Joined: Sat Feb 07, 2004 9:55 pm

Re: Header Tabs | Side By Side

Post by norman » Thu Jan 08, 2009 6:47 pm

Re fixed tabs: I've posted how to do this on http://drillpine.biz/forums/viewtopic.p ... 365&p=1270 as others may find this useful.

You could also put the additional content into a Variable or Layout and incorporate that instead of the embedded text.
Norman

classixshop
Posts: 10
Joined: Wed Jan 07, 2009 2:45 am

Re: Header Tabs | Side By Side

Post by classixshop » Fri Jan 09, 2009 1:19 pm

Hi Norman just had chance to reply to your last post, that was very helpful and was just what i wanted to make 'Tabber' worth the effort.
I've got it working just how i want to now, i just have one more question regarding this plug-in. The static tab's "delivery & returns" only appear
if i tab has been created in the product description. Can i make it that the delivery and returns tabs appear regardless of there being a tab created in
the product description

Cheers FrAz

norman
Site Admin
Posts: 1237
Joined: Sat Feb 07, 2004 9:55 pm

Re: Header Tabs | Side By Side

Post by norman » Fri Jan 09, 2009 1:22 pm

Already on this forum. See http://drillpine.biz/forums/viewtopic.php?f=12&t=256 for this.
Norman

Post Reply