frontpage, how??

Hi
What a great template...I'm slowly picking my way through the Quickstart version on localhost, but I really can't see how the frontpage "About" section is done, with the social icons on mouseover...in the quickstart its just a Custom HTML module, with some text and images. I'd really appreciate a clue here.
Thanks

Its exactly like that + some styling and animation in css and js.
Remember to use noeditor to edit this module. If not, additional html elements will be stripped by tineMCE and You will not be able to create structure correctly:

Code: Select all

<div class="gkTeam col4 animate_queue">
   <figure data-fb="https://www.facebook.com/gavickpro" data-twitter="https://twitter.com/gavickpro"  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>
   <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/2.jpg" border="0" alt="Julia Morena" />
      <figcaption>
         <h3>Julia Morena</h3>
         <small>Creative Director</small> </figcaption>
   </figure>
   <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/3.jpg" border="0" alt="Eddy Doe" />
      <figcaption>
         <h3>Eddy Doe</h3>
         <small>Customer Support</small> </figcaption>
   </figure>
   <figure data-fb="https://www.facebook.com/gavickpro" data-twitter="https://twitter.com/gavickpro" class="animate_queue_element">
      <img src="images/demo/about/4.jpg" border="0" alt="Robert Frost" />
      <figcaption>
         <h3>Robert Frost</h3>
         <small>Web Designer</small> </figcaption>
   </figure>
</div>
<p style="text-align: center;"><a class="border bigbutton" href="#">Learn More</a></p>


This is module structure - as You can see it has some wraping elements, and sections defined by:

Code: Select all

   <figure data-fb="https://www.facebook.com/gavickpro" data-twitter="https://twitter.com/gavickpro" class="animate_queue_element">
      <img src="images/demo/about/4.jpg" border="0" alt="Robert Frost" />
      <figcaption>
         <h3>Robert Frost</h3>
         <small>Web Designer</small> </figcaption>
   </figure>


Each section is opened by figure element with data-XX to create link to social network of a person (removing one of the data elements will remove icon), then there is a picture of person, his name in h3 tag and short description in small tag. Thats just it. Rest is in gk.stuff.css and gk.scripts.js file

Thank you very much. I'll go away and have a try.
One further question: I'm trying to set up the Image Show module as you have done in the intro, and link it to the News Show Pro module in the same way, as it looks great in the demo. However, I'm getting an errors in 2 places; in the Image Show mod, the "read more" button is showing up as MOD_IMAGE_SHOW_CREATIVITY_READMORE, although the button is working, and the url link takes it to the header module, but keeps cutting off the top text line of the NSP mod, which disappears under the menu bar. Help greatly appreciated here.

Sorry, forgot to post a url for this;
www.linemine.com/
Thanks

Im not quite sure what You refer to.
Visiting your side made an impression - that everything is ready and working correctly.
If You could make some screenshots and mark "wrong" places, I'll try to help more.

Hi

Yes, I'm sorry, one of the issues I asked about yesterday, I found the solution in the template documentation in the demo, where you have to put any text you want to show in the link in Image Show in the intro position into brackets [ link ], then the url. For some reason this wasn't done in the quickstart, maybe a workaround, but I won't just rely on that in future, and spend some time reading stuff first.
The other issue is the alignment of the header module position when the intro link is enabled. If you look at my site, for example, there is a title to the module (findshareselect), but it slides under the menu. I noticed that in the quickstart (and presumably your demo) version there is a blank space above the title in the header module, which prevents the words being hidden. The only module suffix seems to be "bigtitle" which only affects the text size, not spacing at the top.
Thanks for your help on this so far, much appreciated.

I'm not quite sure whats wrong with gkHeader- as I see entire "Big text here" and icon on the right.
But if You would like to move it a little bottom, You can use this css:

Code: Select all

#gkHeader {margin-top: 20px}


adjust margin value to your liking.

Hi
Thanks very much, appreciate the response. Great support from your forum these days, and great templates as well.
Thanks again.