Hi to everyone i found a code that it supposed to create tabs in a block like:
Bestsellers Special products Hot deals
in each tab are shown the products.
I can't make it to work maybe its for another version.
i am using 4.0.3 and i am going now to 4.1.1
If someone can help i'll be grateful! Here are the steps:
1.Create the 16-grid with class name “tab_containerâ€,and create three blocks named best seller, special products and hot deals with class name “tab1 tab_contentâ€,â€tab2 tab_content†and “tab3 tab_content†respectively.
2.In that grid,create a html block and within that write the coding like this,[indent]```php
```[/indent]
Include li with ID of class name of blocks for which you are creating inside the grid.
3.And include the js script in index.tpl inside the head tag,
```php
```
4.Add the following css in styles.css,
```php
ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; width: 100%; } ul.tabs li { float: left; margin: 0; cursor: pointer; height: 31px; line-height: 31px; font-weight: bold; background:url("images/tabbg.png") no-repeat scroll right 8px transparent; overflow: hidden; position: relative; } ul.tabs li a{ margin: 0 15px; padding: 7px 10px; font: 18px/18px MalgunGothic; text-transform: uppercase;} ul.tabs li:last-child{ background:none;} ul.tabs li:hover a,ul.tabs li.active a,ul.tabs li.active:hover a{ background: #F3F1F1; color: #E35973; text-decoration:none; } ul.tabs li.active a{ color:#e35973;} .tab_container { clear: both; float: left; width: 100%; } .tab_container h1{ display:none;} .tab_content { padding: 0px; font-size: 1.2em; display: none; }
```
5.Note that both the html block and other blocks should be in the same grid with class name as “tab_containerâ€.