yourShop - GK Tabs module style support

Hi

If you want to use GK Tabs Manager with embed template style, please follow this instructions:

From template css directory open gk_stuff.css file and add this lines:

Code: Select all

/*
 * Tabs Module
 */

.clearfix-tabs { clear: both; }
.gk_tab_item_space { margin: 0 1px;padding: 0 5px }
div.gk_tab-style1 { position: relative; }
div.gk_tab_wrap-style1 { margin: 0 auto; }
ul.gk_tab_ul-style1 { list-style-type: none; margin: 0; padding: 0;}
ul.gk_tab_ul-style1 li { background:transparent; float: left; cursor: pointer; margin: 0 0 5px 0; border: none!important; padding: 0; height: 32px; font-size: 11px}
ul.gk_tab_ul-style1 li span { display: block; padding: 0 15px; margin:0px 10px 0 0; line-height:24px; background: url('../images/moduletable_header.png') repeat-x 0 0; border: 1px solid #d1d1d1; border-radius:3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; color: #383838;font-weight: bold }
ul.gk_tab_ul-style1 li.active,
ul.gk_tab_ul-style1 li.active:hover { color: #fff; }
ul.gk_tab_ul-style1 li:hover { color: #fff; }
ul.gk_tab_ul-style1 li.active span,
ul.gk_tab_ul-style1 li.active:hover span,
ul.gk_tab_ul-style1 li:hover span { background: #6E9F15; border-color: #6e9a1e; color: #fff;}
div.gk_tab_container0-style1 { clear: both; margin: 0; }
div.gk_tab_container1-style1 { overflow: hidden; }
div.gk_tab_item-style1 { float: left; overflow: hidden; padding: 0; }
.gk_tab_container0-style1,
.gk_tab_container1-style1,
.gk_tab_container2-style1 { position:relative; }
.gk_tab_news_image { border:1px solid #dadada; padding:6px;margin: 0 7px 5px 0 }
.gk_tab_news_image:hover {border:1px solid #d0c984;}
.gk_tab_news_text { clear: both; }
.gk_tab_news_header { font-size: 125%; font-weight: normal; }
.gk_tab_news_info {font-size: 11px;margin:5px 0;padding: 0}

div.gk_tab_button_next-style1,
div.gk_tab_button_prev-style1 { background: transparent url('../images/nsp_interface.png') no-repeat 0 -62px; float:right; height:20px; width:20px; margin:3px 0; cursor:pointer; text-indent:-999em; padding:0 !important;  }
div.gk_tab_button_next-style1 {background-position: 0 -22px;}
div.gk_tab_button_next-style1:hover {background-position: 0 -42px }
div.gk_tab_button_prev-style1:hover {background-position: 0 -82px }


Open style1.css file and add this lines:

Code: Select all

ul.gk_tab_ul-style1 li.active span,
ul.gk_tab_ul-style1 li.active:hover span,
ul.gk_tab_ul-style1 li:hover span { background: #6e9a1e!important; border-color: #6e9a1e!important;}


On style2.css file:

Code: Select all

ul.gk_tab_ul-style1 li.active span,
ul.gk_tab_ul-style1 li.active:hover span,
ul.gk_tab_ul-style1 li:hover span { background: #cb1010 !important; border-color: #cb1010!important; }


Finally on style3.css file:

Code: Select all

ul.gk_tab_ul-style1 li.active span,
ul.gk_tab_ul-style1 li.active:hover span,
ul.gk_tab_ul-style1 li:hover span { background: #37b5de !important; border-color: #37b5de!important;}


Important:
To take advance of theme style you need to disable "Use module CSS" parameter on the Tabs module.
Also set "Style CSS" as "style1" and "Style type" as "horizontal"

Here's a screenshot:

tabs-yourshop.png

This will be added on next template update.

Cheers