Bkgd Header Image - How to create & apply different images

Hi Devs

Cool template. Have to say the big picture got me on this one. Well done!
However, i am wishing to apply a different header image on main areas of my site.
I understand how to apply the imageBg suffix to a menu ID# under Features.

What I have done is created a new image, called it hdr-unique-title.jpg and placed it in the same template images folder for ease of testing the code.
I then copied the code in template.css (line 146-151) into the override.css file and changed the class name and the name of the image link. Turned on the Override option under templates.
I then applied that suffix to the new menu ID# and it successfully placed the new image there.

HOWEVER, the formating of the text in the header module is now crazy and unformated.

How do I apply the same formating to my new background image?

Thanks

Daniel

Hi,
can you give us url to your site? It will be much easier to help you.

Hi Konrad

Thanks for the reply. Here is the temporary location that I'm working on where the formating is not following on: http://dev1.zidanc.com/index.php/cupron-r
This part of course shows the default image with the formating working properly: http://dev1.zidanc.com/index.php/retail

Hi,
can you give us url to your site? It will be much easier to help you.

Please go to the template.css and here in line 271 you will find:

Code: Select all

.imageBg #gkHeaderMod h1 {
    color: #FFFFFF;
    font-size: 52px;
    font-weight: 400;
    letter-spacing: -3px;
    line-height: 56px;
    margin: 0;
    padding: 0;
}


as you see it is .imageBg class becasue on our home page this page has suffix imageBg. In your case I see suffix "imageBgC-R" so check template.css file and add your code every where you find our suffix in this way:

Code: Select all

.imageBg #gkHeaderMod h1,
.imageBgC-R #gkHeaderMod h1 {
    color: #FFFFFF;
    font-size: 52px;
    font-weight: 400;
    letter-spacing: -3px;
    line-height: 56px;
    margin: 0;
    padding: 0;
}


Excellent!
That did the trick for the formating. Was missing the , after I copied the first line.
The only thing that isnt working properly is the logo and menu change.
On the default image it has the inverse logo and no background colour for the menu bar, but I havent seen that setting in the template.css. Do i go looking for that under the menu.css??
Thanks

Daniel

Please compare dom structure your and oryginal. Try to make it same and then check in menu.css if there are rules with original '.imageBg' class and then change them like in previous post.

Hi Konrad

Went through menu.css and most of the other css files and have added the extra formating for my new background image.

I cannot seem to locate the area that affects the menu functioning like it does on the home page.
It appears that the header div is still not picking up some formating parts for example:


http://dev1.zidanc.com/index.php/retail

the highlighted line in the above image shows a class="gkNoMenu" on the page i created with the new image


http://dev1.zidanc.com/index.php/cupron-r

this image shows that there is missing the style display block with the extra div for the gkpage.

Any other thoughts on why the menu is not functioning the same?

Regards
Daniel

so after applying this code will you be able to put any slide show module ?