Everything you need to know icons

Hi!

Does anyone know how to change the "Everything you need to know" Icons just below the header for the simplicity template?

I have successfully changed their colours which is fine, but I would like to replicate this module elsewhere using different icons. I have amended the code to the image name in the custom HTML module and I have uploaded the files to FTP but still no use.

Either the old image still shows or non at all, any help would be greatly received. Thanks

Hi

I need to see Your site while this changes are done so I'll check what is wrong.

My sincere apologies for the super late response.

This is the icons in which I wish to change....

http://www.mnwdesigns.co.uk/index.php/a ... ward-money

Any help it greatly received - thanks

Hi

Ok. Looking at the example here is a link to the image with rocket: http://www.mnwdesigns.co.uk/templates/g ... rocket.png, new icons should be prepared in a similar way, than uploaded to /images/style1/ folder.

Next step is to add new css classes for new icons which are as an example:

Code: Select all

.gkRocket {
    background-color: #FFFFFF;
    background-image: url("../images/style1/gkrocket.png");
    background-position: center top;
}
.gkRocket:hover {
    background-color: #4C90FE;
    background-position: center bottom;
}


You can add them to override.css file but remember to allow using override in template settings. So all You wil have to change will be "gkRocket" name to the one You have created.

Thank you very much for this info - I will give it a try now. Thanks for taking the time to respond

Hi

No problem. Glad I could help.

Hi,

I have tried to add the code below so that I can show the heart symbol, but unfortunately it does not appear.

I want to keep the original icons on the homepage then replicate the layout on a "Recommend Us" page but using the new icons. Here is what I have done

.gkHeart {
background-colour: #fff;
background-image: url ('../images/style1/gkheart.png');
background-position: centre top;
}
.gkHeart:hover {
background-colour: #fec54c;
background-position: centre bottom;
}

Thank you for your continued help with this.

Hi

Yes that's exactly what I've asked You do to. But I cannot see this code in Your site. Please tell me where have You added it and if it was override.css please check if this file is enabled.

I added this info to the CSS/template.css files. should I of added it to the CSS/override.css instead?

Thanks

Hi

template.css is fine, but I simply do not see this code there http://www.mnwdesigns.co.uk/templates/g ... mplate.css please send me an access to joomla panel I'll add it myself. Maybe it just needs the cache to be cleared.

Thank you very much.

[edited by moderator]

I do need to change the other two icons on the same page also, so would you be kind enough to tell me what you have done afterwards so that I can add the others please?

Thank you so much.

Hi

I could not find the code in template.css as well. I have copied the code to override.css and now the hear icon is visible. To add more icons just copy the code, change names and upload new images.