gkFeatures gkPerspective

Ok I don't know what is wrong with this and where I messed it up.

My problem is: icons (rocket, badge, mouse, piggy...) isn't showing like it should be. Anyone can help me?

Thanks in advance.

Oh and I tried to use the original code

Code: Select all

<div class="gkFeatures gkPerspective">
<a href="#" class="gkRocket" data-animation="flip" data-delay="0"><span>Rocket</span>Innovative Design</a>
<a href="#" class="gkBadge" data-animation="flip" data-delay="150"><span>Badge</span>Award-winning Agency</a>
<a href="#" class="gkMouse" data-animation="flip" data-delay="300"><span>Mouse</span>Your ideas, imagination</a>
<a href="#" class="gkPiggy" data-animation="flip" data-delay="450"><span>Piggy</span>Save Your Time &amp; Money</a>
</div>
<a href="#">View Full Features</a>

Didn't help. My website's url: http://bol-support.esy.es/

Hi

Ok. I've answered in a copy of this thread, so please ignore it and keep the conversation here.

Your code looks like this:

Code: Select all

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


comparing there is a <span></span> missing. Please amke it as close as possible to the orginal:

Code: Select all

<div class="gkFeatures gkPerspective">
<a data-delay="0" data-animation="flip" class="gkRocket loaded" href="#"><span>Rocket</span>Innovative Design</a>
<a data-delay="150" data-animation="flip" class="gkBadge loaded" href="#"><span>Badge</span>Award-winning Agency</a>
<a data-delay="300" data-animation="flip" class="gkMouse loaded" href="#"><span>Mouse</span>Your ideas, imagination</a>
<a data-delay="450" data-animation="flip" class="gkPiggy loaded" href="#"><span>Piggy</span>Save Your Time &amp; Money</a>
</div>


You may need to disable using editor while doing that. Some editors are removing html5 code.

Hi

Ok. I've answered in a copy of this thread, so please ignore it and keep the conversation here.

Your code looks like this:

Code: Select all

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


comparing there is a <span></span> missing. Please amke it as close as possible to the orginal:

Code: Select all

<div class="gkFeatures gkPerspective">
<a data-delay="0" data-animation="flip" class="gkRocket loaded" href="#"><span>Rocket</span>Innovative Design</a>
<a data-delay="150" data-animation="flip" class="gkBadge loaded" href="#"><span>Badge</span>Award-winning Agency</a>
<a data-delay="300" data-animation="flip" class="gkMouse loaded" href="#"><span>Mouse</span>Your ideas, imagination</a>
<a data-delay="450" data-animation="flip" class="gkPiggy loaded" href="#"><span>Piggy</span>Save Your Time &amp; Money</a>
</div>


You may need to disable using editor while doing that. Some editors are removing html5 code.

Thank you very much. I've paste the code and disabled the editor and it worked!

Can you recommend me an editor?

Hi

I like to keep mine disabled Please try with JCE or adjust the configuration to not to strip the code at all. Unfortunately You will have to refer to editor documentation because I do not know where this options are.

Ok then. Another question: how can I get rid of that "Login" menu? I don't want login system.

Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

#gkUserArea {
    display: none;
}


It worked! Thanks.

Can anyone provide me with some advice on how to change these images to my own?

Also i have 7 categories, instead of 4, so will need to create an additional 3.

Any help will be greatly appreciated. I have exhausted every option (that i know) and it keeps stuffing up - mostly the image disappears altogether.

Hi

Can You please explain what is Your problem @Decoscape ? This is a very old thread and there are couple of things mentioned here. Would be best to start a new thread.

Yes, i'm sorry i do realise this thread is quite old but most relevant to the problem i'm experiencing.

I'm trying to change the icon images of the gkFeatures gkPerspectives (rocket, badge, mouse, piggy) as seen on the home page of the Startup Template.

I have tried simply changing the .png images however this seems to mess up the hover (doesn't change image on hover) and any other changes i make seem to eliminate the image altogether.

Also, i have 7 categories that i need the feature for, instead of the 4 that are in the template.

Any help in solving these two issues would be greatly appreciated.

Thanks

Hi

Replacing images is the best way to do this. Here is an example: https://demo.gavick.com/joomla25/startu ... rocket.png

Than adding new icons will need to be done in override.css. For example:

Code: Select all

.gkNewicon > span {
    background-image: url("path_to_newicon_image_goes_here");
}


In module it should look exactly as other options

Code: Select all

<a class="gkNewicon href="#"><span>New icon</span>Innovative Design</a>