GK Tabs Images and content

Hello, i have 2 issues using the GK tabs.
Firstly i would like to know how i can change the icons shown, it displays by default the first 4 icons while i would like to use some other icons and in different order.
Secondly i would like to know how i can make bigger space for the content because the text doesn't fit to the box.

About the second issue you can check my website here: http://www.filo-logiko.gr

Thanks in advance.

Hi

The height of the module (content part) needs to be configured in module settings.

Icons are stored in file http://www.filo-logiko.gr/templates/gk_ ... _icons.png" so You can add Your own there. Than You need to operate CSS to display a correct one. For example for tab1:

Code: Select all

.big .gkTab ul.gkTabs li.gkTab-1 {
    background-position: 45px 0;
}

.big .gkTab ul.gkTabs li.gkTab-1:hover, .big .gkTab ul.gkTabs li.gkTab-1.active {
    background-position: 45px -200px;
}


Thanks a lot, content fixed.
About the icons i don't want to use another icon i just want to use the existing icons but in that order:
5, 3, 6, 4

Can you explain me with more details how i can do that?
Thanks again.

Hi

Here is a full code for icons:

Code: Select all

.big .gkTab ul.gkTabs li.gkTab-1 {
    background-position: 45px 0;
}
.big .gkTab ul.gkTabs li.gkTab-1:hover, .big .gkTab ul.gkTabs li.gkTab-1.active {
    background-position: 45px -200px;
}
.big .gkTab ul.gkTabs li.gkTab-2 {
    background-position: -155px 0;
}
.big .gkTab ul.gkTabs li.gkTab-2:hover, .big .gkTab ul.gkTabs li.gkTab-2.active {
    background-position: -155px -200px;
}
.big .gkTab ul.gkTabs li.gkTab-3 {
    background-position: -355px 0;
}
.big .gkTab ul.gkTabs li.gkTab-3:hover, .big .gkTab ul.gkTabs li.gkTab-3.active {
    background-position: -355px -200px;
}
.big .gkTab ul.gkTabs li.gkTab-4 {
    background-position: -555px 0;
}
.big .gkTab ul.gkTabs li.gkTab-4:hover, .big .gkTab ul.gkTabs li.gkTab-4.active {
    background-position: -555px -200px;
}
.big .gkTab ul.gkTabs li.gkTab-5 {
    background-position: -755px 0;
}
.big .gkTab ul.gkTabs li.gkTab-5:hover, .big .gkTab ul.gkTabs li.gkTab-5.active {
    background-position: -755px -200px;
}
.big .gkTab ul.gkTabs li.gkTab-6 {
    background-position: -955px 0;
}
.big .gkTab ul.gkTabs li.gkTab-6:hover, .big .gkTab ul.gkTabs li.gkTab-6.active {
    background-position: -955px -200px;
}
.big .gkTab ul.gkTabs li.gkTab-7 {
    background-position: -1155px 0;
}
.big .gkTab ul.gkTabs li.gkTab-7:hover, .big .gkTab ul.gkTabs li.gkTab-7.active {
    background-position: -1155px -200px;
}
.big .gkTab ul.gkTabs li.gkTab-8 {
    background-position: -1355px 0;
}
.big .gkTab ul.gkTabs li.gkTab-8:hover, .big .gkTab ul.gkTabs li.gkTab-8.active {
    background-position: -1355px -200px;
}


numbers are for each tab, so You just need to replace the code or the number