picture in header module

Am i stupid? I think so....

However, I am trying for hours to insert the portrait in the header of the John template, like shown in the demo http://demo.gavick.com/

The html code for the header is, as shown in your documentation:

<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" />

Wenn I now replace the header1.jpg with my portrait picture, nothing happens. The feature of the background picture seems neither to be the right way (as shown in your docu). When I take the picture as a background picture (in the options), I lose the animation (from dark to picture).

So, my question for hours: where and how can i insert my portrait picture (which is contained in the media database (.../images/demo/header/Portraet-JC.jpg) so that it looks exactly like in the demo?

Please help this confused newbie, thanks a lot!

1. Please disable tinyMCE in global configuration (change it to editor - none). tinyMCE damages the code while saving making.§r
2. Could You please post an url to your site?

Hy Cyberek,

thanks for your quick reply!

1. I disabled the tinyMCE in global configuration.
2. www.callewaert.de/joomla3

Tthe header module should look like this:

<h1 class="gkAnimate">Hallo!<br />Ich bin<br />Jeroen <br />Callewaert</h1>
<p class="gkAnimate">Marketing-, CRM- und Vertriebsprofi mit langjähriger Erfahrung auf Key Account und Führungsebene. Gerne unterstütze ich Sie bei Ihrem nächsten Projekt!</p>
<p><a class="gkScrollDown gkAnimate reverse" href="#my-works">Scroll Down</a> <img class="gkHeaderBg" src="images/demo/header/Portraet-JC.jpg" alt="John S." /></p>

In the WYSIWYG editor I can see the pic Portraet-JC, but in the frontend the picture is not there. Why?

Another small prob is the scroll-down button. How can I place it under the text?

Thanks a lot for your help!

Hi Cyberek,
finally it works! Obiously the disabling of the tinyMCE had not been saved.

After disabling tinyMCE you still need to insert the html code back to the module
Is there anything else I can help you with on this topic?

Hi Cyberek, oh, I think I'll need you a hundred times till my page is online

My actual question: is there a possibility to appear the scroll button in the header white, like in the module "header 1" (I'm actually using header2). That would be great!

www.callewaert.de/joomla3

Thank you!

Please edit: /templates/gk_john_s/css/override.css and add at its end:

Code: Select all

.gk-header2 .gkScrollDown, .gk-header2 .gkScrollDown:after {
color: #c9c9c9;
}


Remember to enable "CSS override" in template settings - advanced section.