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 »

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: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Header Tabs | Side By Side

Post by norman »

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 »

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: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Header Tabs | Side By Side

Post by norman »

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 »

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: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Header Tabs | Side By Side

Post by norman »

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: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Header Tabs | Side By Side

Post by norman »

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 »

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: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Header Tabs | Side By Side

Post by norman »

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 »

Yes the border was visable at full width. What would be my next port of call?
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Header Tabs | Side By Side

Post by norman »

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 »

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: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Header Tabs | Side By Side

Post by norman »

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 »

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: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Header Tabs | Side By Side

Post by norman »

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