Adding slides to the header1

February 2014 WordPress Theme
GK User
Wed Sep 24, 2014 3:33 am
I'm trying to add a few more images to the slide in the header, but i can't find a way to get it.
Here's my code:
Code: Select all
<div class="custom  gk-header1">
<div>
</p>
<h5 data-scrollreveal="enter top and move 150px wait 0.4s">Trompo Games Inc. was founded in 2013 in Toronto Ontario, Canada. We fill a hole in the mobile gaming market between ambitious indie developments, and simple re-skins of games that have already been made.</h5>

<a href="http://trompogames.com/14/?page_id=1527" data-scrollreveal="enter top and move 200px wait 0.6s">Read more</a>
</div>

<div class="gk-tablet" data-slides="3" data-scrollreveal="enter bottom and move 50px wait 0.5s">

<div>
<div>
<a href="https://itunes.apple.com/us/app/pull-my-paw/id793212223?ls=1&mt=8"><img src="http://trompogames.com/14/wp-content/uploads/2014/08/header_screen_1.png" alt="App Screen I" /></a>
<a href="https://www.facebook.com/PullMyPaw"><img src="http://trompogames.com/14/wp-content/uploads/2014/08/header_screen_2.png" alt="App Screen I" /></a>
<a href="https://play.google.com/store/apps/details?id=com.trompogames.pullmypaw"><img src="http://trompogames.com/14/wp-content/uploads/2014/08/header_screen_3.png" alt="App Screen I" /></a>
</div>
</div>
</div>
</div>

How can i achieve this?

Thanks up front!
User avatar
Fresh Boarder

GK User
Wed Sep 24, 2014 3:38 am
Here's a link to my site:
www.trompogames.com
User avatar
Fresh Boarder

GK User
Wed Sep 24, 2014 7:01 am
Hi, Here's the code for 5 slides:

Code: Select all
<div class="custom  gk-header1">
<div>
<h1 data-scrollreveal="enter top and move 100px wait 0.2s">Beautiful theme for app website</h1>
<p data-scrollreveal="enter top and move 150px wait 0.4s">An effective theme for an effective app. Clear and easy
on the eye; a sublime exhibition of minimalism for your app.</p>

<a href="#" data-scrollreveal="enter top and move 200px wait 0.6s">Read more</a>
</div>

<div class="gk-tablet" data-slides="5" data-scrollreveal="enter bottom and move 50px wait 0.5s">

<div>
<div>
<img src="[pageurl]/wp-content/themes/Mo/images/demo/header_screen_1.jpg" alt="App Screen I" />
<img src="[pageurl]/wp-content/themes/Mo/images/demo/header_screen_2.jpg" alt="App Screen I" />
<img src="[pageurl]/wp-content/themes/Mo/images/demo/header_screen_3.jpg" alt="App Screen I" />
<img src="[pageurl]/wp-content/themes/Mo/images/demo/header_screen_4.jpg" alt="App Screen I" />
<img src="[pageurl]/wp-content/themes/Mo/images/demo/header_screen_5.jpg" alt="App Screen I" />
</div>
</div>
</div>
</div>


You have to change this value: data-slides="5" and add 5 images.
User avatar
Moderator

GK User
Wed Sep 24, 2014 11:11 pm
Hi, i've tried that before but doesn't seem to work. I need to put 8 images, here's what i got as a result of this code:
<
Code: Select all
div class="custom  gk-header1">
<div>
</p>
<h5 data-scrollreveal="enter top and move 150px wait 0.4s">Trompo Games Inc. was founded in 2013 in Toronto Ontario, Canada. We fill a hole in the mobile gaming market between ambitious indie developments, and simple re-skins of games that have already been made.</h5>

<a href="http://pasamanos.mx/trompotest/tromponew/?page_id=1527" data-scrollreveal="enter top and move 200px wait 0.6s">Read more</a>
</div>

<div class="gk-tablet" data-slides="8" data-scrollreveal="enter bottom and move 50px wait 0.5s">

<div>
<div>
<a href="#"><img src="http://pasamanos.mx/trompotest/tromponew/wp-content/uploads/2014/08/header_screen_1.png" alt="App Screen I" /></a>
<a href="#"><img src="http://pasamanos.mx/trompotest/tromponew/wp-content/uploads/2014/08/header_screen_2.png" alt="App Screen I" /></a>
<a href="#"><img src="http://pasamanos.mx/trompotest/tromponew/wp-content/uploads/2014/08/header_screen_3.png" alt="App Screen I" /></a>
<a href="#"><img src="http://pasamanos.mx/trompotest/tromponew/wp-content/uploads/2014/08/header_screen_3.png" alt="App Screen I" /></a>
<a href="#"><img src="http://pasamanos.mx/trompotest/tromponew/wp-content/uploads/2014/08/header_screen_3.png" alt="App Screen I" /></a>
<a href="#"><img src="http://pasamanos.mx/trompotest/tromponew/wp-content/uploads/2014/08/header_screen_3.png" alt="App Screen I" /></a>
<a href="#"><img src="http://pasamanos.mx/trompotest/tromponew/wp-content/uploads/2014/08/header_screen_3.png" alt="App Screen I" /></a>
<a href="#"><img src="http://pasamanos.mx/trompotest/tromponew/wp-content/uploads/2014/08/header_screen_3.png" alt="App Screen I" /></a>
</div>
<div>
<div>
</div>
</div>
</div>


And here you can see how does it look like:
http://pasamanos.mx/trompotest/tromponew/

Thanks again!
User avatar
Fresh Boarder

GK User
Thu Sep 25, 2014 6:58 am
Could you send me a PM with backend access to your website? Then I'll check it exactly.
User avatar
Moderator

GK User
Thu Sep 25, 2014 10:35 pm
Unfortunately - 6 slides is the maximal amount of slides. if you want to have 8, please add this code into your Mo/css/override.css file (first enable this override option from Template Options -> Advanced tab)
Code: Select all
.gk-header1 .gk-tablet[data-slides="7"] img { width: 14.2857%; }
.gk-header1 .gk-tablet[data-slides="8"] img { width: 12.5%; }
.gk-header1 .gk-tablet[data-slides="7"] > div > div { width: 700%; }
.gk-header1 .gk-tablet[data-slides="8"] > div > div { width: 800%; }
User avatar
Moderator


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