gkFeatures gkPerspective

October 2012 Joomla Template
Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Sat Nov 22, 2014 1:31 am
Reply with quote
Report this post
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.
User avatar
Fresh Boarder

GK User
Sat Nov 22, 2014 2:00 am
Reply with quote
Report this post
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/
User avatar
Fresh Boarder

teitbite
Sat Nov 22, 2014 10:13 am
Reply with quote
Report this post
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.
User avatar
Moderator

GK User
Sat Nov 22, 2014 3:17 pm
Reply with quote
Report this post
teitbite wrote: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!
User avatar
Fresh Boarder

GK User
Sat Nov 22, 2014 3:26 pm
Reply with quote
Report this post
Can you recommend me an editor?
User avatar
Fresh Boarder

teitbite
Sun Nov 23, 2014 12:22 pm
Reply with quote
Report this post
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.
User avatar
Moderator

GK User
Sun Nov 23, 2014 9:30 pm
Reply with quote
Report this post
Ok then. Another question: how can I get rid of that "Login" menu? I don't want login system.
User avatar
Fresh Boarder

teitbite
Mon Nov 24, 2014 3:39 pm
Reply with quote
Report this post
Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all
#gkUserArea {
    display: none;
}
User avatar
Moderator

GK User
Sat Dec 06, 2014 5:59 pm
Reply with quote
Report this post
It worked! Thanks.
User avatar
Fresh Boarder

GK User
Fri Jan 08, 2016 4:24 am
Reply with quote
Report this post
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.
User avatar
Fresh Boarder

teitbite
Mon Jan 11, 2016 2:39 pm
Reply with quote
Report this post
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.
User avatar
Moderator

GK User
Mon Jan 11, 2016 11:05 pm
Reply with quote
Report this post
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
User avatar
Fresh Boarder

teitbite
Thu Jan 14, 2016 10:41 am
Reply with quote
Report this post
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>
User avatar
Moderator


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.