changing frontpage gkIcons

I love the function of frontpage elements "gkIcons" on the Simpliciy template. Can I put my own icons in somewhere for the image and roll-over images?

Sample image css looks this way:

Code: Select all

.gkRocket {
   background-image: url('../images/style1/gkrocket.png');
}
.gkRocket:hover {
   background-color: #4c90fe;
}


Using override.css and your own sprites you can create unimited number of icons.

Thank you Cyberek, this worked great! I found the demo images in the template directory -- for example gkcrop.png. I was able to make similar files that are 2 images stacked in the single .png file.

I uploaded the image files to the Media Manager. I put the css code you suggested in the Template Manager / gk-simplicity / Advanced Settings / in the Custom CSS Code text-box. I put in 3 CSS code snippets to replace gkrocket.png, gkmobile.png, and gkrocket.png.

At first my files were too big and looked funny, but I shrunk them to 126 × 252 and they worked fine!

Thanks for the help!

I'm glad you could solve it out .
Is there anything else I can help you with regarding this topic?

I am good on this one, thank you so much

Feel free to post new forum threads if you have any other questions.

Hello Cyberek,
I tried making another class like you said and it didn't worked. I think the code you posted is only for prefixed classes. I would like more icons there. I think there is more to that class. Can you help?

.gkThumbs {
background-image: url('../images/style2/thumbs.png');
}
.gkThumbs:hover {
background-color: #000000;
}

Could you please create a screenshot of this element (where it is placed) and post an url to your site?

Of course Cyberek,
the url is http://fotohara.gr/simply/ and you can find attached a thumbnail

Override.css code should look this way:

Code: Select all

.gkThumbs {
   background-image: url('../images/style2/thumbs.png');
}
.gkThumbs:hover {
   background-color: #000000;
   background-image: url('../images/style2/thumbs.png');
   background-position: center bottom;
}