I've installed the new Tabs gk5 and all works fine if I force enable to use CSS from admin panel. When I try to use my custom settings (Use CSS - force disable) something goes wrong and the tabs do not work properly.
You can see it here.
http://demo.ecquadro.com/revista/index. ... erson#page
The first one (top) in the example when I use Tabs gk5 vs. the bottom one when I use tabs Gk4.
Below the code used in custom CSS.
- Code: Select all
/*
* Tabs Module
*/
.gkTab, .gkTabsGK5 { background: #fbfbfb; border: 1px solid #eee; position: relative; }
.gkTabWrap { margin: 0 auto; }
ul.gkTabs, .gkTabsWrap.vertical ol { height: 52px; padding: 0; margin-top: 0; background: #eee; }
ul.gkTabs li, .gkTabsWrap.vertical ol li { float: left; padding: 0 20px; height: 52px; line-height: 53px; list-style-type:none; background: none; border: none; color: #888; font-size: 18px; text-transform: uppercase; font-family: 'Oswald';}
ul.gkTabs li span, .gkTabsWrap.vertical ol li { display: block; }
ul.gkTabs li.active, .gkTabsWrap.vertical ol li.active { background: #fbfbfb; color: #3681b6; }
ul.gkTabs li:hover, .gkTabsWrap.vertical ol li:hover { color: #3681b6; cursor: pointer; }
.gkTabContainer0 { clear: both; margin:0; }
.gkTabContainer1 { overflow: hidden; }
.gkTabItem { float: left; overflow: hidden; padding: 0; }
.gkTabButtonNext,.gkTabButtonPrev,
.gkTabsButtonNext,.gkTabsButtonPrev { display: none; }
.gkTabContainer0, .gkTabContainer1, .gkTabContainer2 { position:relative; }
.gkTabItem { position: absolute; left: -999em; top: 0; width: 100%; }
.gkTabItem.active { position: static; left: 0; }
.gkTabItemSpace { padding: 0px 24px 24px 24px; }
/* tab1 suffix */
.tab1 .gkTab, .tab1 .gkTabsGK5 { background: #fff; border: 1px solid #eee; }
.tab1 ul.gkTabs, .tab1 .gkTabsWrap.vertical ol { background: #121212; }
.tab1 ul.gkTabs li, .tab1 .gkTabsWrap.vertical ol li { color: #888; }
.tab1 ul.gkTabs li.active, .tab1 .gkTabsWrap.vertical ol li.active { background: #fff; color: #3681b6; }
.tab1 ul.gkTabs li.active:hover, .tab1 .gkTabsWrap.vertical ol li.active:hover { color: #3681b6; }
.tab1 ul.gkTabs li:hover, .tab1 .gkTabsWrap.vertical ol li:hover { color: #3681b6; }
/* tab2 suffix */
.tab2 .gkTab, .tab2 .gkTabsGK5 { background: #fff; border: 1px solid #eee; }
.tab2 ul.gkTabs, .tab2 .gkTabsWrap.vertical ol { background: #3681b6; }
.tab2 ul.gkTabs li, .tab2 .gkTabsWrap.vertical ol li { color: #fff; }
.tab2 ul.gkTabs li.active, .tab2 .gkTabsWrap.vertical ol li.active { background: #fff; color: #3681b6; }
.tab2 ul.gkTabs li.active:hover, .tab2 .gkTabsWrap.vertical ol li.active:hover { color: #3681b6; }
.tab2 ul.gkTabs li:hover, .tab2 .gkTabsWrap.vertical ol li:hover { color: #7ac5fa; }
Thanks
