Introduction

X-Cart 5.1.4 introduced vertical product attribute tabs that look as follows:

If you are one of the clients, who want previous horizontal look of product tabs: 

then this guide is for you.

Table of Contents

Implementation

We start with creating an empty module with developer ID Tony and module ID ProductTabsChange. This change comes to applying set of CSS rules, so we need to register a new CSS file. We create the <X-Cart>/classes/XLite/Module/Tony/ProductTabsChange/View/AView.php file with the following content: 

<?php
// vim: set ts=4 sw=4 sts=4 et:

namespace XLite\Module\Tony\ProductTabsChange\View;

/**
 * Abstract widget
 */
abstract class AView extends \XLite\View\AView implements \XLite\Base\IDecorator
{
    protected function getThemeFiles($adminZone = null)
    {
        $list = parent::getThemeFiles($adminZone);

        $list[static::RESOURCE_CSS][] = 'modules/Tony/ProductTabsChange/css/style.css';

        return $list;
    }
}

and then create the <X-Cart>/skins/default/en/modules/Tony/ProductTabsChange/css/style.css file with the following content: 

.product-details-tabs div.tabs ul.tabs {
    width: 100%;
    margin-bottom:10px;
    border-bottom:1px solid #E5E5E5;
}

.product-details-tabs div.tabs ul.tabs > li {
    float:left;
    margin-right:2px;
    margin-bottom:-2px;
}

.product-details-tabs div.tabs ul.tabs > li + li {
    margin-top:0px;
}

.product-details-tabs div.tabs-container {
    width:100%;
}

.product-details-tabs div.tabs-container .tab-container {
    margin-left:0px;
}

.product-details-tabs div.tabs ul.tabs > .active,
.product-details-tabs div.tabs ul.tabs > .active:hover {
    border:1px solid #E5E5E5;
    border-bottom:1px solid white;
    margin-bottom:-1px;
}

.product-details-tabs div.tabs ul.tabs > li > a, .product-details-tabs div.tabs ul.tabs > li > span {
    border-radius:0px;
    border:1px solid #E5E5E5;
}

That is it. Now you need to re-deploy the store and check the results in store-front.

Module pack

You can download this module pack from here: https://dl.dropboxusercontent.com/u/23858825/Tony-ProductTabsChange-v5_1_0.tar

Attachments: