Key Features buttons

I am having trouble with the key features changing to white on scroll over. I modified the buttons but not sure why they remain grey.

www.socialpatient.com/sp3

Hi

You need to add classes on gk_style.css file. For example for gkcloud pseudo class:

Code: Select all

.gkcloud > span { background: transparent url('../images/style2/gk_cloud.png') no-repeat 0 0 }
.gkcloud:hover > span { background: transparent url('../images/style2/gk_cloud.png') no-repeat 0 bottom
}

Cheers

Thanks. I have the following, would the hover be different syntax?:

.gkcloud > span { background-image: url('../images/style2/gk_cloud.png'); }
.gkheart > span { background-image: url('../images/style2/gk_heart.png'); }
.gksocial > span { background-image: url('../images/style2/gk_social.png'); }
.gkreward > span { background-image: url('../images/style2/gk_reward.png'); }
.gkcloud:hover > span { background-image: url('../images/style2/gk_cloud.png'); }
.gkheart:hover > span { background-image: url('../images/style2/gk_heart.png'); }
.gksocial:hover > span { background-image: url('../images/style2/gk_social.png'); }
.gkreward:hover > span { background-image: url('../images/style2/gk_reward.png'); }

Hi

You need to add classes on gk_style.css file. For example for gkcloud pseudo class:

Code: Select all

.gkcloud > span { background: transparent url('../images/style2/gk_cloud.png') no-repeat 0 0 }
.gkcloud:hover > span { background: transparent url('../images/style2/gk_cloud.png') no-repeat 0 bottom
}

Cheers

Yes of course, you need to set different background position

There are other ways to do it, but following the structure of the ones that the template provides, you should have this:

Code: Select all

.gkcloud > span { background-image: url('../images/style2/gk_cloud.png') no-repeat 0 0; }
.gkheart > span { background-image: url('../images/style2/gk_heart.png') no-repeat 0 0; }
.gksocial > span { background-image: url('../images/style2/gk_social.png') no-repeat 0 0; }
.gkreward > span { background-image: url('../images/style2/gk_reward.png') no-repeat 0 0; }
.gkcloud:hover > span { background: transparent url('../images/style2/gk_cloud.png') no-repeat 0 bottom; }
.gkheart:hover > span { background: transparent url('../images/style2/gk_heart.png') no-repeat 0 bottom; }
.gksocial:hover > span { background: transparent url('../images/style2/gk_social.png') no-repeat 0 bottom;}
.gkreward:hover > span { background: transparent url('../images/style2/gk_reward.png') no-repeat 0 bottom; }


Cheers

Awesome your the best, thanks! One other question how can i add content (HTML, images, etc) to the following area of the site http://socialpatient.com/sp3/index.php/sign-up

I would like to add an image or text to the white space to the left of the registration.

You need to work on this page ../templates/gk_startup/html/com_users/registration/default.php

Is there a way to have the key feature buttons, display specific text below for each feature. I would compare this to the functions of tabs and how you designed AppsPro Tech. When a user clicks a button it displays the text below?

Any assistance would be greatly appreciated.

Hi again

Like you see on Appprotech template is more difficult because it's done with tabs GK4 module with js support.

But you can do a hover effect. For example, using your website on the first gkcloud Features, replace:

Code: Select all

<a class="gkcloud loaded" href="#" data-animation="flip" data-delay="0"><span>HealthCloud</span>Synced Activities</a>


with

Code: Select all

<a class="gkcloud loaded" href="#" data-animation="flip" data-delay="0"><span>HealthCloud</span>Synced Activities<div class="hiddendata"><span class="arrow-up"></span>This is your custom text.</div></a>


Now add this css on override.css file:

Code: Select all

.gkFeatures .loaded {position: relative;}

.gkFeatures .loaded .hiddendata {
    visibility: hidden;
    position: absolute;
    left:0;
    bottom: -55px;
    background-color: #212323;
    padding: 10px;
    text-transform: none;
    text-align: center;
   -webkit-border-radius: 0 0 2px 2px;
       -moz-border-radius: 0 0 2px 2px;
               border-radius: 0 0 2px 2px;
 }
.gkFeatures .loaded:hover .hiddendata  {
     visibility: visible;
}
.gkFeatures .arrow-up {
        width: 0;
   height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-bottom: 5px solid #212323;
        position: absolute; top: -5px; left: 10px
}


Here's the result when user hover the cursor:

screen.jpg

Cheers

This is perfect. I am having issues with the code. WHen I enter in the html it puts "This is your custom text.
" see socialpatient.com/sp3

Check html structure. You are doing it wrong
It should be

Code: Select all

<a class="gkcloud loaded" href="#" data-animation="flip" data-delay="0"><span>HealthCloud</span>Synced Activities
<div class="hiddendata"><span class="arrow-up"></span>This is your custom text.</div>
</a>


and you have it like:

Code: Select all

<a data-delay="0" data-animation="flip" href="#" class="gkcloud loaded"><span>HealthCloud</span>Synced Activities</a>
<div class="hiddendata">This is your custom text.</div>


Cheers

Yes I paste the above:
<a class="gkcloud loaded" href="#" data-animation="flip" data-delay="0"><span>HealthCloud</span>Synced Activities
<div class="hiddendata"><span class="arrow-up"></span>This is your custom text.</div>
</a>

but this system changes it to:

<div class="gkFeatures gkPerspective"><a class="gkcloud loaded" href="#" data-animation="flip" data-delay="0"> <span>HealthCloud</span>Synced Activities</a>
<div class="hiddendata">This is your custom text.</div>
</div>

Not sure what I am doing wrong here??

Set the editor to toogle mode and insert the code.