"Key feature" module icons

Hello,

I installed the template using quickstart, but I did not find any "key feature" module icon. I mean the ones "INNOVATIVE DESIGN" "AWARD-WINNING AGENCY" etc. (rocket, badge, mouse etc.). I can only see the module divided in 4 with text and mousehover orange effect.

How can I use those icons (eventually other custom icons)? I know they are in /templates/gk_startup/images/style1/gk_badge.png, but I did not understand how can I put them in the module and make them appear.

I tried to compare with the help of element inspect, the code of my template with the one of the demo page and it seems to me that something is missing... I could see "<span>rocket</span>" in demo, that seems to contain the css that sets the image act like it should, but it's missing in my template (or I think so...)

I aldo tried to put in override the following (taken from demo page)

Code: Select all

.gkBadge > span {
background-image: url('/templates/gk_startup/images/style1/gk_badge.png');
}
.gkBadge > span {
background: transparent url('/templates/gk_startup/images/style1/gk_badge.png') no-repeat 0 0;
}


But it seems not working...

Thanks for your help

Hi

Please check if typography is enabled in template settings and tell me the url to Your site.

Hello,

typography is enabled, as well as "Use typography iconset" is

My site is actually offline; I've sent you a PM with link and password.

Thanks

Hi

Yes "<span>Rocket</span>" is missing in Your site and it's crucial to show icons. Which means You will have to edit this module's code and add it.

Ehm... ehm... uhm... can you be more explicative please? Where do I have to put it exactly? It's a custom HTML module which contains:

Code: Select all

<div class="gkFeatures gkPerspective"><a class="gkRocket" href="#" data-animation="flip" data-delay="0">RocketInnovative Design</a> <a class="gkBadge" href="#" data-animation="flip" data-delay="150">BadgeAward-winning Agency</a> <a class="gkMouse" href="#" data-animation="flip" data-delay="300">MouseYour ideas, imagination</a> <a class="gkPiggy" href="#" data-animation="flip" data-delay="450">PiggySave Your Time &amp; Money</a></div>
<p><a href="#">View Full Features</a></p>

I could only see the difference simply comparing the code, but I'm not so hard-coded

Thanks

Hi

Please just use this code instead:

Code: Select all

<div class="gkFeatures gkPerspective">
<a class="gkRocket" href="#" data-animation="flip" data-delay="0"><span></span>RocketInnovative Design</a>
<a class="gkBadge" href="#" data-animation="flip" data-delay="150"><span></span>BadgeAward-winning Agency</a>
<a class="gkMouse" href="#" data-animation="flip" data-delay="300"><span></span>MouseYour ideas, imagination</a>
<a class="gkPiggy" href="#" data-animation="flip" data-delay="450"><span></span>PiggySave Your Time &amp; Money</a>
</div>
<p><a href="#">View Full Features</a></p>


Hello,

it does not work...

In gk.stuff.css I could see:

Code: Select all

}
.gkRocket > span {
   background: transparent url('../images/style1/gk_rocket.png') no-repeat 0 0
}

I also put the folder style1 in /images/ of the root (I thougt the path could lead there...)

I also emptied the browser and site cache, I tried with chrome, FF and IE, but I could not see any icon...

What can I do?

Thanks for your help...

Hi

It's not about images. They are where they should be. Problem was with lack of <span></span>. I've done exactly as I told You a post before.

- disabled editor
- edited module settings
- replaced the code with one I have mentioned above:

Code: Select all

<div class="gkFeatures gkPerspective">
<a class="gkRocket" href="http://www.google.com" data-animation="flip" data-delay="0"><span></span>Rocket Innovative Design</a>
<a class="gkBadge" href="#" data-animation="flip" data-delay="150"><span></span>BadgeAward-winning Agency</a>
<a class="gkMouse" href="#" data-animation="flip" data-delay="300"><span></span>MouseYour ideas, imagination</a>
<a class="gkPiggy" href="#" data-animation="flip" data-delay="450"><span></span>PiggySave Your Time &amp; Money</a>
</div>
<p><a href="#">View Full Features</a></p>


Hello,

sorry for the delay in my answer: I've been in holidays for some days...

THANK YOU SO MUCH!!!! You helped me very very much.

You Gavick guys are great!

Thank you!!!

PS I did not understand I had to disable the editor...

Hi

No problem. Glad I could help

Just another issue... I noticed that if I want to get class div I have to disable the editor... infact if I use the HMTL view of the editor, the class disappear after saving.

A way to get both editor and classes is to use (i.e.) JCE editor and set in its configuration in "editor class" the classes you want to keep in wysiwyg.

In this way even if you modify the text with the editor, the classes you've set in the editor config will not disappear

Hi

Yes, that's true some of the html are stripped from code. I always advice to disable editor while making changes to them in user configuration, but Your idea is probably more useful since You do not need to turn it on and off.