Header Picture

i cant seem to get the code in the header picture to work, i have followed some of the instruction from other posts by turning of the text editor so as not to damage the code but still its not working perfectly. need help.

Could You please post an url to your site?

http://iamking.co.za/throcksideoflyf2

I have exactly the same problem!

@sasha8586 - your problem lies in html you are using:

Code: Select all

<img src="/throcksideoflyf2/images/header.jpg" alt="" /><h1 class="gkAnimate">Hello!<br />My name<br />is John</h1>
<p class="gkAnimate">I'm multidisciplined freelance designer specialise in rich interactive experiences for web. If you’ve got an exciting project, get in touch with me!</p>
<a href="#my-works" class="gkScrollDown gkAnimate reverse">Scroll Down</a>
<img src="/throcksideoflyf2/images/demo/header/header.jpg" alt="John S." class="gkHeaderBg" />   


and should be:

Code: Select all

<h1 class="gkAnimate">Hello!<br />My name<br />is John</h1>
<p class="gkAnimate">I'm multidisciplined freelance designer specialise in rich interactive experiences for web. If you’ve got an exciting project, get in touch with me!</p>
<a href="#my-works" class="gkScrollDown gkAnimate reverse">Scroll Down</a>
<img src="images/demo/header/header1.jpg" alt="John S." class="gkHeaderBg" />


thank you the code worked. But i have another problem with the code on the animation of all the headings the cup on award and the love on clients they disappear when i edit them can you give me the correct code for them as well?

Code: Select all

<i class="gk-icon-prize"></i>
<i class="gk-icon-heart"></i>


If you are missing some original html you can always go to our demo site:
http://demo.gavick.com/joomla25/john/
display site source code and find correct html fragment.

Hello,

I have a similar problem with the hero image on the front page on header 1.

I have copied the code direct from the post and the animation loads then 'removes the photo' so that the image is black.

Code: Select all

<h1 class="gkAnimate">Hello!<br />My name<br />is John</h1>
<p class="gkAnimate">I'm multidisciplined freelance designer specialise in rich interactive experiences for web. If you’ve got an exciting project, get in touch with me!</p>
<a href="#my-works" class="gkScrollDown gkAnimate reverse">Scroll Down</a>
<img src="images/demo/header/header1.jpg" alt="John S." class="gkHeaderBg" />

Any suggestions please?

Kind regards
Drew

Hi. Could you please be more specific?
Could you please post an url to your site?

Hello again,
I have no idea how I fixed it but we did overnight- perhaps a browser cache issue.

Sorry for the false alarm - thats for your fast response too.

kind regards
Drew
(perhaps it was VooDoo )

VooDoo is a great explanation .

hey, is it possible to put videos in my works area of the theme as some of my work include motion picture.

Please ask this question as a separate forum thread.

I am having the same issue. I attempted to change the wording and now the entire picture disappeared. I replaced it with the original code and it still doesnt show. Also, can someone please give me an actual solution? I dont mean to be rude, but every time I come here I either get a vague response or no response at all. If people are having the same issues with these templates, it should seem that there would be a universal solution. Please help:
www.claudiagadelha.com

Your problem is probably connected with tineMCE - please disable it before editing the code.

Hi!
I also have problem with the Header 1 picture. I have done all the recomendations you've suggested both in the documents for John S. template support and in this thread, but i still having problem to get it like i want. Could you please suggest something more/different?

http://tidemo.se/

Thanks!
/Daniel

Good Afternoon,
I am having issues with my header photo. I have read through all of the recommendations and nothing has helped. Can you please help me.

http://www.doctordez.inlight10me.com

@danieltidemo - it works absolutely fine from what I see.

@awlboi - if you compare your source code:

Code: Select all

<div class="custom  gk-header1"  style="background-image: url('/images/headers/photodez5resize.jpg')" >

<h1 class="gkAnimate">Hypnotherapy<br />Personal/ Health Coaching<br />NLP Trainer</h1>
<p class="gkAnimate">I am a world renowned Executive and Health Coach, Hypnotherapist, NLP Trainer and Reiki Master specializing in abundance creation. Are you ready to change your life and experience the abundance you desire?  Work with me and I will show you how to have the life you DESERVE !</p>
<a class="gkScrollDown gkAnimate reverse" href="#my-works">Scroll Down</a> <img class="gkHeaderBg" src="/images/headers/photodez5resize.jpg" alt="John S." />   
</div>


to original one:

Code: Select all

<div class="custom  gk-header1"  >

<h1 class="gkAnimate">Hello!<br />My name<br />is John</h1>
<p class="gkAnimate">I'm multidisciplined freelance designer specialise in rich interactive experiences for web. If you’ve got an exciting project, get in touch with me!</p>
<a href="#my-works" class="gkScrollDown gkAnimate reverse">Scroll Down</a>
<img src="/joomla25/john/images/demo/header/header1.jpg" alt="John S." class="gkHeaderBg" />   
</div>


You have set a background for entire module that messes with background which should be created by our code and is used in image element.

So then what do I do to get it to look like the original one? The picture is way to big so how do I get it to be smaller and look like the original "jonh s." picture?

@awlboi - if you compare your source code:

Code: Select all

<div class="custom  gk-header1"  style="background-image: url('/images/headers/photodez5resize.jpg')" >

<h1 class="gkAnimate">Hypnotherapy<br />Personal/ Health Coaching<br />NLP Trainer</h1>
<p class="gkAnimate">I am a world renowned Executive and Health Coach, Hypnotherapist, NLP Trainer and Reiki Master specializing in abundance creation. Are you ready to change your life and experience the abundance you desire?  Work with me and I will show you how to have the life you DESERVE !</p>
<a class="gkScrollDown gkAnimate reverse" href="#my-works">Scroll Down</a> <img class="gkHeaderBg" src="/images/headers/photodez5resize.jpg" alt="John S." />   
</div>


to original one:

Code: Select all

<div class="custom  gk-header1"  >

<h1 class="gkAnimate">Hello!<br />My name<br />is John</h1>
<p class="gkAnimate">I'm multidisciplined freelance designer specialise in rich interactive experiences for web. If you’ve got an exciting project, get in touch with me!</p>
<a href="#my-works" class="gkScrollDown gkAnimate reverse">Scroll Down</a>
<img src="/joomla25/john/images/demo/header/header1.jpg" alt="John S." class="gkHeaderBg" />   
</div>


You have set a background for entire module that messes with background which should be created by our code and is used in image element.

First of all please correct settings so there is no doubled background.

@danieltidemo - it works absolutely fine from what I see.

Yes, I did what you suggested in another answer and disabled the TinyMCE editor. And then I made a new modul with your siggested code. Thanks!

Now I have other issues with some of the other frontpage elements, for example the social icon bagdes in the Contact section... And the Blog-element where I want the same good looks as your K2-blog example/sample but instead of K2 I like to have EasyBlog articles.

But I should open up new threads on this topics, dont you think?

Ok, please open new forum threads as this thread became messy after 3 or 4 people asking questions.