Header 1 place image

Hi all
I just installed "John" using the quick install.
Looks like none of the images from the demo are included.
How do I place the background image from the demo (or any other image) on the Header 1 module.
I tried the background image. This gets loaded for a quick moment. Then it fades...

Here is my URL:
http://www.zitrone.com.au/subsite_50/

Thanks
Romano

We can't include demo images due to copyrights » No Images From Template Demo in Quickstart ? – GavickPro Documentation

To add image you just need to replace the existing one which is located in root/images/demo/header/header1.jpg

Hi bkrztuk
Thank you for your reply.
I tried this method and I could not get it to work.
I then used the module's background image and this worked.
I had to overwrite the css for the module. But I managed to get an image...
Still a bit puzzled with it. I tried your method afterwords. In order to do this I removed the overwrite.
So when replacing the image this not produce the image, I went back to call it via background image.
This worked again. But this time without the overwrite in the css.
There is something not right. I will try again...

Please restore all CSS files and just replace this image, there is no way that this will not work because this image is inside template directory so only cache may cause false impression that something is wrong

I am having the same problem. I installed the quickstart version for John S and it works fine. I cane ftp a new bg image to replace the blank one that come with the quickstart and it works fine. If I edit the header1 module and change the text (don't touch the image at all) and save changes then the bg image disappears. The same problem occurs if I simply open and save the header1 module without making any actual edits.

I inspected the page element and see the following change has been made:

Code: Select all

<div class="custom gk-header1">
 <h1 class="gkAnimate active"></h1>
 <p class="gkAnimate active"></p>
 <a class="gkScrollDown gkAnimate reverse active" href="#my-works"></a>
 <div class="gkHeaderBg active" style="background-image: url('/images/demo/header/header1.jpg');"></div>

..gets changed to this:

Code: Select all

 <div class="custom gk-header1"></div>

 </div>

We can't include demo images due to copyrights » No Images From Template Demo in Quickstart ? – GavickPro Documentation

To add image you just need to replace the existing one which is located in root/images/demo/header/header1.jpg

Hi,

Yes i did replaced it with exact same sized image... Once it was working fine, then suddenly it stops working. It doesn't show my image anymore, just blank. And somehow the scroll down button move to another area. Please check screen shot. I already checked the HTML codes, it just exactly the same with the default HTML codes from quickstart.

Please help ...

I am having the same problem. I installed the quickstart version for John S and it works fine. I cane ftp a new bg image to replace the blank one that come with the quickstart and it works fine. If I edit the header1 module and change the text (don't touch the image at all) and save changes then the bg image disappears. The same problem occurs if I simply open and save the header1 module without making any actual edits.

He made a point there, "without making any actual edits". So i tried to just change the header1.jpg image instead, without goes to the module manager config from backend. It works! But cmon! I need to change the name, my name is not John! How could i edit the name without go in to the module config and edit it from there? This is stupid, please help...

To follow up:

The real problem to why the image goes away and also to why the scroll button gets screwed up has to do with the editor. If you switch to code view in what editor you chose to use with Joomla (either the default TinyMCE or what I choose to use JCE) you will see a <p></p> tag around code for the background image and the scroll image like this:

Code: Select all

<p><a class="gkScrollDown gkAnimate reverse" href="#my-works">Scroll Down</a><img class="gkHeaderBg" src="images/demo/header/header1.jpg" alt="John S." />
</p>

This <p> is inserted by your editor of choice the moment you edit the module and if you save it gets put there permanently, corrupting the function controlling the bg image not to shoe AND messing with the scroll button.

To fix just switch to code view and remove the <p> tag and save while still in code view and exit. If you switch back to WYSIWYG view for any reason and save, all will be corrupted again.

Hi hyperdrone! Thank you very much for your help!

This problem was bothering me for few hours. I was trying to delete the <p> tags, and save exit, but it doesn't works. My tweak was to change the <p> tags to <div>. And still to add the background image from the "Options" tab.

My advise is just to switch editor to noEditor option when you are editing custom HTML modules - tinyMCE or JCE by default adds the <P> elements for every single line which generate different HTML output.

Hi
i have same problem. when i changed the background picture, scroll button moved to left side - in my text. i tried to fix it but it didn't work and u can see where is it now in the attached file.
the code that i have in header 1 is :

<p class="gkAnimate" style="text-align: center;"><a class="gkScrollDown gkAnimate reverse" href="#my-works">Scroll Ned</a> </p>

what should i do?

I had the same problem. This post is very useful. I had to switch the default editor to 'No Editor' under Global Configuration menu from the System menu. The <p> ... </p> kept being put back in even if I toggled editor when editing the module.
Also, just to be clear to others, it only seems to matter if the '<a class="gkScrollDown gkAnimate reverse" href="#my-works">Scroll Down<....' tag is preceded by a <p>. Everywhere else it seems you can keep the <p> tags (at least in module Header I).

Hi guys. Can you post original html content of header? My is screwed by editor and cannot get back size of image. Thank you very much in advance!

Hi guys. Can you post original html content of header? My is screwed by editor and cannot get back size of image. Thank you very much in advance!

OK, I have installed another copy just for solving this issue. May be it will help anybody in the future:

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