How to change the icon images on GK4?

Im looking to change the images for the icons on tabs, I see that gk4 comes with 8 different icons, but how can I change between them? , or add entirely new images for icons?. Right now I have Cloud, Umbrella, Curve and voice. I saw that in the tab there is a piece of code that says Cloud pro logo and so on , depending on the tab, but what are the names of the other 4 tabs? I also added a new tab just to see, and the images don't match, the last tab is a world but when you click the umbrella appears.


You can see the site here http://www.viralcomment.com/jupgrade/

Thanks

Icons are simply a background image. Following is what you can do.

Edit main icon image, see below image. It will load depending on number of tabs. Tab1 first icon , tab2 second icon and so on.
http://www.viralcomment.com/jupgrade/te ... _icons.png

Or you can define your own individual icons by using below css in your override.css. Make sure css override is enabled in template settings > advanced settings > css override.
Image names and folder name is just an example. This will effect all tabs module if you have more then one.

Code: Select all

.gkTab-1 { background: url("../images/tabicons/tabs_icon1.png") !important;}
.gkTab-2 { background: url("../images/tabicons/tabs_icon2.png") !important;}
.gkTab-3 { background: url("../images/tabicons/tabs_icon3.png") !important;}
.gkTab-4 { background: url("../images/tabicons/tabs_icon4.png") !important;}
.gkTab-5 { background: url("../images/tabicons/tabs_icon5.png") !important;}


Or if you have multiple tabs module please use a suffix in tabs module settings and adjust your css as below adding module suffix in front of original example css.

Such as lets say I call my first tab module "mytabs1" and used suffix "mytabs1" and second tab module "mytabs2" with suffix "mytabs2" in module settings, then following css is effective. Image names / folder / location is just an example.

Code: Select all

.mytabs1 .gkTab-1 { background: url("../images/tabicons/tabs_icon1.png") !important;}
.mytabs1 .gkTab-2 { background: url("../images/tabicons/tabs_icon2.png") !important;}
.mytabs1 .gkTab-3 { background: url("../images/tabicons/tabs_icon3.png") !important;}
.mytabs1 .gkTab-4 { background: url("../images/tabicons/tabs_icon4.png") !important;}
.mytabs1 .gkTab-5 { background: url("../images/tabicons/tabs_icon5.png") !important;}
.mytabs2 .gkTab-1 { background: url("../images/tabicons/tabs_icon10.png") !important;}
.mytabs2 .gkTab-2 { background: url("../images/tabicons/tabs_icon20.png") !important;}
.mytabs2 .gkTab-3 { background: url("../images/tabicons/tabs_icon30.png") !important;}
.mytabs2 .gkTab-4 { background: url("../images/tabicons/tabs_icon40.png") !important;}
.mytabs2 .gkTab-5 { background: url("../images/tabicons/tabs_icon50.png") !important;}


Also don't forget to adjust your hover over image or effect if you use above individual icons, such as below example.

Code: Select all

.mytabs1 .gkTab-1:hover { background: url("../images/tabicons/tabs_icon1_hover.png") !important;}


See you around...

Thanks

No problem at all, see you around...

Can me please somebody descripe how to change the pictures of the tabs module! Please with screenshots of the overright .css and of the module settings! Thank you!
I wanna the same function as in the demo homepage! Two pictures with title and under the pics there is container with my text!
How the same as the demo homepage from apps pro tech site!

It is already described in my previous reply.

Location of file is in below folder structure depending on style usage.

templates/gk_appsprotech/images/style1/tabs_small_icons.png
templates/gk_appsprotech/images/style2/tabs_small_icons.png
templates/gk_appsprotech/images/style3/tabs_small_icons.png

Css is already explained in below posts.

See you around...