Piggy - Rocket - How to

In the startup theme I am trying to understand how to put my own images in place of the piggy, rocket, and other images in this template that switch from b/w to orange. Is there anyone who can provide detailed information into how to do this? I cant find the original images that the website is even using for this.

Thanks!

In the startup theme I am trying to understand how to put my own images in place of the piggy, rocket, and other images in this template that switch from b/w to orange. Is there anyone who can provide detailed information into how to do this? I cant find the original images that the website is even using for this.

Also, how can you change the theme color scheme

Thanks!

Hi,

The images used in these blocks are:

images/styleX/gk_rocket.png
images/styleX/gk_badge.png
images/styleX/gk_mouse.png
images/styleX/gk_piggy.png

These images are defined in styleX.css

where X is a number of style used on your page.

Thank You! That is so helpful. Its hard to find instructions for some reason. I have two more questions that I need just to finish up the site.

How can I change the entire theme color of the site? We want only one color option and it needs to be changed to a yellow.

I am also having a spacing problem with the profile images. Every once and awhile they will look right, and then they bounce back to being to close together and overlap. If you could help with either of these that would be great!

This is the code I have for the images in the widgit: (I haven't changed anything that I know of so I don't know why its not spacing correctly)

<div class="gk-team" data-count="7">
<figure data-animation="horizontal" data-delay="0">
<a href="http://i9media.com/andre-bio/"><img src="http://i9media.com/wp-content/uploads/2013/02/Andre-headshot.jpg" alt=""></a><figcaption><a href="http://i9media.com/andre-bio/">Andre</a></figcaption>
</figure>

<figure data-animation="horizontal" data-delay="100">
<a href="#"><img src="http://i9media.com/wp-content/uploads/2013/02/Eric-headshot.jpg" alt=""></a>
<figcaption><a href="#">Eric</a></figcaption>
</figure>

<figure data-animation="horizontal" data-delay="200">
<a href="#"><img src="http://i9media.com/wp-content/uploads/2013/02/Erin-headshot.jpg" alt=""></a>
<figcaption><a href="#">Erin</a></figcaption>
</figure>

<figure data-animation="horizontal" data-delay="300">
<a href="#"><img src="http://i9media.com/wp-content/uploads/2013/02/Martha-headshot.jpg" alt=""></a>
<figcaption><a href="#">Martha</a></figcaption>
</figure>

<figure data-animation="horizontal" data-delay="400">
<a href="#"><img src="http://i9media.com/wp-content/uploads/2013/02/Courtney-headshot.jpg" alt=""></a>
<figcaption><a href="#">Courtney</a></figcaption>
</figure>

<figure data-animation="horizontal" data-delay="500">
<a href="#"><img src="http://i9media.com/wp-content/uploads/2013/02/Nicolas-headshot.jpg" alt=""></a>
<figcaption><a href="#">Nicolas</a></figcaption>
</figure>

<figure data-animation="horizontal" data-delay="600">
<a href="#"><img src="http://i9media.com/wp-content/uploads/2013/02/Carlos-headshot.jpg" alt=""></a>
<figcaption><a href="#">Carlos</a></figcaption>
</figure>

<a href="#">More About Us</a>
</div>

How can I change the entire theme color of the site? We want only one color option and it needs to be changed to a yellow.

I recommend to open the styleX.css file (depends from the style used on your page) and replace all colors (i.e. orange) to your own color.

I am also having a spacing problem with the profile images. Every once and awhile they will look right, and then they bounce back to being to close together and overlap. If you could help with either of these that would be great!

Could you provide an URL to your website? Because I didn't observed similar problem in our demo or I don't understand the problem.