X-Cart forums

[Martin Bishop]

I've recently put the full product description in a tab and installed custom product tabs mod. I want to make one of the tabs a different colour but can't work out how or if it can be done. I've tracked done the UI jquery css file and have found this line that controls the default tab state:

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #b8b8b8; background: #ebebeb url(images/ui-bg_glass_100_ebebeb_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #3b3b3b; }

I can see that each tab has an href anchor id to target the tab content:

<li><a href="#product-tabs-csi-13">Colours / Buy</a></li>

can anyone tell me if it's possible to create a style that just targets that button/tab? I've tried but failed and it's frustrating me.

The page that this is on is:

http://www.mathmoseurope.eu/mathmos-astro-1227-0.html

and the tab I want a different colour is the 'Colours / Buy' tab.

any help would be much appreciated

[totaltec]

Martin,
I think the best way would be to change the way the tabs are called, adding a class to that particular tab. I don't have the custom tabs module to check, but I expect there is a php file that defines the tab and passes it to the template. I also imagine that you have an admin interface to assign new tabs. To do this properly I think you would need to add to the admin interface a place for class, create a field in the database to hold the class name, reference that field in the php file that builds the tab, and finally assign the class in the template.

Not an easy task.

[Martin Bishop]

ouch

I think I was hoping for a css trick/miracle but you've confirmed my thoughts, thanks

[totaltec]

Originally Posted by Martin Bishop

I think I was hoping for a css trick/miracle but you've confirmed my thoughts, thanks

Well if you want a CSS miracle I think I can help. I didn't suggest this because it is not always supported by the browser, and its not really a scalable solution that will give you precise control.

You could try assigning the CSS you want using the last child psuedo selector. http://quirksmode.org/css/selectors/firstchild.html

You can also get some similar result using Javascript. http://stackoverflow.com/questions/1329841/changing-css-for-last-li

And finally you can do it with Smarty. http://www.smarty.net/forums/viewtopic.php?p=65372

Since this is X-cart 4 and we have Smarty, I would try that solution first.

Your template may be different, but mine is: /ideal_responsive/customer/main/ui_tabs.tpl

I see this code:

<ul>
  {foreach from=$tabs item=tab key=ind}
    {inc value=$ind assign="ti"}
    <li><a href="{if $tab.url}{$tab.url|amp}{else}#{$prefix}{$tab.anchor|default:$ti}{/if}">{$tab.title|wm_remove|escape}</a></li>
  {/foreach}
</ul>

We need to give the foreach loop a name "product_tabs", then we can use the if statment.

<ul>
  {foreach from=$tabs item=tab key=ind name=product_tabs}
    {inc value=$ind assign="ti"}
    <li{if $smarty.foreach.product_tabs.last} class="last_tab"{/if}><a href="{if $tab.url}{$tab.url|amp}{else}#{$prefix}{$tab.anchor|default:$ti}{/if}">{$tab.title|wm_remove|escape}</a></li>
  {/foreach}
</ul>

You can see it working fine on my test site: http://trainingpen.com/product.php?productid=17515 -warning this site gets reloaded frequently, example might not exist in the future.

So I didn't suggest this because I was thinking that it would only work for first or last, but now that I think more about it, you could assign any color to any tab you want this way, based on the index of the foreach loop. Sorry I didn't see this immediately, and worried you unnecessarily.

[Martin Bishop]

ahaaa great!

that looks perfect, the uitabs.tpl looks the same so I'll give it a go and let you know.

many thanks

[Martin Bishop]

this works really well and your help was spot on apart from one thing that I stupidly didn't think of......sometimes I don't want the last tab to be a different colour, only pages with the 'Colours / Buy' button.

I've amended the if statement to include product id so that only a product that is last and has product id xxxxx gets the different colour button. do you know how I can add multiple product ids to the if statement? I can't get it to work? here's what I have:

<li{if (($smarty.foreach.product_tabs.last)&&($product.productid eq "17516"))} class="last_tab"{/if}><a href="#{$prefix}csi-{$tab.tabid}">{$tab.title|wm_remove|escape}</a></li>

I want to have it so that it has more than one product id so something like:

<li{if  (($smarty.foreach.product_tabs.last)&&($product.productid eq  "17516,17515,17519"))} class="last_tab"{/if}><a  href="#{$prefix}csi-{$tab.tabid}">{$tab.title|wm_remove|escape}</a></li>

any ideas? We only have a finite amount of products so I'm happy with quite a mechanical rule like this (i.e. specifying the ids individually) unless you can see another way?

again many thanks for your help it's really appreciated

[Martin Bishop]

don't worry I worked it out, excuse my laziness, I just used:

<li{if (($smarty.foreach.product_tabs.last)&&($product.pr oductid eq "17516" or $product.productid eq "17515"))} class="last_tab"{/if}><a href="#{$prefix}csi-{$tab.tabid}">{$tab.title|wm_remove|escape}</a></li>

again many thanks!!