animation image

I add the animation in the text widget and it works perfectly now. But does someone know which code I need to but a image in the background (like the map/guitar in the demo)?

Thanks in advance,

Hi,

To change these images you have to edit code in the css/extensions.css file.

For example to change background map, you must change this code:

Code: Select all

.gk-animation .gka-bg {
   background: transparent url('../images/map.png') no-repeat center center;

to:

Code: Select all

.gk-animation .gka-bg {
   background: transparent url('../images/your_image.png') no-repeat center center;

Before that, copy your image to ..Fest/images directory.

You can do the same with other images, e.g. guitar, stars.

Hi,

To change these images you have to edit code in the css/extensions.css file.

For example to change background map, you must change this code:

Code: Select all

.gk-animation .gka-bg {
   background: transparent url('../images/map.png') no-repeat center center;

to:

Code: Select all

.gk-animation .gka-bg {
   background: transparent url('../images/your_image.png') no-repeat center center;

Before that, copy your image to ..Fest/images directory.

You can do the same with other images, e.g. guitar, stars.

I did exactly what you said but nothing changed..
But I think that's because I put the animation code in a widget (header text widget)?

So, there's no option to import a background image in the widget code?

It's OK, animation code should be in a text widget, but to change background image you have to edit css/extensions.css file.

First of all you can install the Quickstart package which will reproduce the original demo content for your page:
http://www.gavick.com/documentation/wordpress-themes/wordpress-quickstart-installation/

You also can send me link to your website (or code of your text widget with animation).

It's OK, animation code should be in a text widget, but to change background image you have to edit css/extensions.css file.

First of all you can install the Quickstart package which will reproduce the original demo content for your page:
http://www.gavick.com/documentation/wordpress-themes/wordpress-quickstart-installation/

You also can send me link to your website (or code of your text widget with animation).

I tried to edit the extensions.css but nothing changed.
This is the website: http://test.paulcoppen.nl
This is the code:

<div class="gk-animation" data-height="230">
<div class="gk-animation-wrap">
<h2 class="gk-scale-up" data-start="{'opacity':0}" data-end="{'opacity':1}" data-delay="200" data-time="500">29 Juni</h2>
<h1 class="gk-scale-up" data-start="{'opacity':0}" data-end="{'opacity':1}" data-delay="600" data-time="500">Toxic Beach</h1>
<div class="gk-stars" data-start="{'opacity':0}" data-end="{'opacity':1}" data-delay="1000" data-time="500">* * * * * *</div>
</div>
</div>

<div
class="gk-jscounter gk-scale-up"
data-dateend="29-6-2013"
data-timeend="19:42"
data-timezone="+2"
data-start="{opacity:0}"
data-end="{opacity:1}"
data-delay="900"
data-time="500"
>
Counting finished!
</div>

Ok, Your animation code is incomplete. I don't see layer:

Code: Select all

<div class="gka-bg">Background</div>

which is responsible for displaying background map and there is no div with class="gk-guitar" too.

The best solution is replace your animation code with the original one:

Code: Select all

<div class="gk-animation" data-height="530">
 <div class="gk-animation-wrap">
 
  <div class="gka-bg">Background</div>
   <h2 class="gk-scale-up" data-start="{'opacity':0}" data-end="{'opacity':1}" data-delay="200" data-time="500">Festival 21 Feb. - 27 Feb. 2014</h2>
   <h1 class="gk-scale-up" data-start="{'opacity':0}" data-end="{'opacity':1}" data-delay="600" data-time="500">Festival Musico</h1>
   <div class="gk-stars" data-start="{'opacity':0}" data-end="{'opacity':1}" data-delay="1000" data-time="500">* * * * * *</div>
   <div class="gk-jscounter gk-scale-up" data-dateend="1-1-2014" data-timeend="19:42" data-timezone="+2" data-start="{'opacity':0}" data-end="{'opacity':1}" data-delay="900" data-time="500">Counting finished!</div>
   <div class="gk-guitar" data-start="{'opacity': 0, 'right': '-200px'}" data-end="{'opacity': 1, 'right': 0}" data-delay="900" data-time="450">Guitar</div>
   <a href="#" class="gk-ticket" data-start="{'opacity':0, 'top': '45px'}" data-end="{'opacity':1, 'top': 0}" data-delay="1300" data-time="450">
      <strong>Get a ticket</strong>
     <small>Authentic Tickets on Time or Your Money Back!</small>
   </a>

 </div>
</div>   

then customize this code.