Roll Overs

Hi,
First off – Awesome template!!!

I would like to know how to change the roll overs on the "What we do" and "The Team" sections. Is it possible to have another image as the roll over in the what we do section.
In the Team section, how do we edit the social icons that only the relevant ones display?

Thanks
Craig

Hi,
First off – Awesome template!!!

I would like to know how to change the roll overs on the "What we do" and "The Team" sections.

To adress hover state of first "What we do" button You could use this css code:

Code: Select all

.gkIsWrapper-gk_creativity .figcaption > a:hover {background: #FFF;color: #7484FF;}


{place it in override.css and enable use of override.css in template advanced settings)
The code has current look, You could change color, background, add different border etc, or replace it with image sprite.

Is it possible to have another image as the roll over in the what we do section.

All other buttons hover state could be addressed with:

Code: Select all

a.border.bigbutton:hover {}


If You would like to address specific button, then You need to check its parent's unique id or class and build it into css address chain.

In the Team section, how do we edit the social icons that only the relevant ones display?

1. Change currently used editor to "Editor - none".
2. Go to Extensions -> module manager, filter the position: "bottom1" and edit module thats name starts with:
"About __Meet our talented team. "
3. Now You will see html code of that module. Each user is created with section:

Code: Select all

   <figure data-fb="https://www.facebook.com/gavickpro" data-twitter="https://twitter.com/gavickpro" data-gplus="https://plus.google.com/+gavickpro/posts" class="animate_queue_element">
      <img src="images/demo/about/1.jpg" border="0" alt="Tim Berners" />
      <figcaption>
         <h3>Tim Berners</h3>
         <small>CEO Executive Officer</small> </figcaption>
   </figure>


If You remove

Code: Select all

data-fb="https://www.facebook.com/gavickpro"


link to fb icon will dissapear. If You edit it, You will change what the icon is linking to.

{place it in override.css and enable use of override.css in template advanced settings)
The code has current look, You could change color, background, add different border etc, or replace it with image sprite.

Hi: Can you provide a sample code for replacing it with an image sprite?

Code: Select all

a.border.bigbutton {background: transparent url('../path/to/you/image.png') 0 0 no-repeat;}
a.border.bigbutton:hover {background: transparent url('../path/to/you/image2.png') 0 0 no-repeat;}


This will work with 2 images, but it is not a method that I would suggest, instead place 2 states (not hovered and hovered) in same file one under another.
You need to measure button width and height (inner). For one of the is 155x58px), so the final png sprite will have 155x116px, and then You can use sprite technique:

Code: Select all

a.border.bigbutton {background: transparent url('../path/to/you/image.png') 0 0 no-repeat;}
a.border.bigbutton:hover {background: transparent url('../path/to/you/image.png') 0 -58px no-repeat;}


where this time image.png is your sprite.

Thanks for the info and sorry for the late reply. With regards to the social icons, what I want to do is to remove the social icons that are not needed. So when you roll ver only the FB icon or twitter or Google+ icon will appear.

Code: Select all

<figure data-fb="https://www.facebook.com/gavickpro" data-twitter="https://twitter.com/gavickpro" data-gplus="https://plus.google.com/+gavickpro/posts" class="animate_queue_element">
      <img src="images/demo/about/1.jpg" border="0" alt="Tim Berners" />
      <figcaption>
         <h3>Tim Berners</h3>
         <small>CEO Executive Officer</small> </figcaption>
   </figure>


in this code You would need to remove not used links with they 'data tag'. So to remove link to fb, You remove:
data-fb="https://www.facebook.com/gavickpro"

The icons might still appear due to a little bug. Then You would need to replace file:
/templates/gk_creativity/js/gk.scripts.js
with one from attachment:

gk.scripts.js.zip