Add advertisement (like a background)

Hello everybody,
I would like to add advertisement as background and scrolling just contents keeping fixed the advertisement.

It will be started under 'top menu' module position.

Basically (to be more clear) I need something similar to the attached image.

Could you please help me?
Thank you.
P.

Could you please post an url to your site?

It's still on local, I've to move to the server in the next days.. Anyway the template (news) doesn't make a hudge modifications

But I need to see what there is actually... Creating working background that will be seen through some elements isn't easy task so I need to see target site to prepare it as good as it can be done.
In short - you need to add background image to body element and fix it (so it doesn't scroll). After that - there will be a lot of small tweaking to make elements not transparent.

Ok! I will add it in the next days and then I will ask you to help me. Thank you very much!

No problem.
Please write back as soon as the site will be live.
If you will have any other questions (not relative to this thread), feel free to post new forum threads - it allows us to answer you faster.

I put the site on line.. Can i send you the link by pm?

Please send me a PM with:
1. URL to your website
2. login and password of user with login privileges (please create one for me)
3. link to this thread

Ok, this is not an easy task - lets do it in few steps with describing each carefully.

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

Code: Select all

#gkContentTop {margin-bottom: 100px;}
#gkContent, #gkSidebar {border-top: 1px solid #e5e5e5;}


What this code does - it creates 100px spacing between topmenu/search/social element and site content. It also recreates top borders over the content.


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

Now as we are planning to replace body's background with an image - we need to fix background on all the elements. To do that above code should be modified to:

Code: Select all

#gkContentTop {
    margin-bottom: 100px;
    background: #fff;}
#gkContent, #gkSidebar {
    border-top: 1px solid #e5e5e5;
}
#gkPageContent, #gkBottom1, #gkBottom2, #gkFooter  {
    background: #fff;   
}


Now the touch...
You need to create your image and place it in:
/templates/news/images/mybg.jpg (lets assume this is the file name).
Now edit override.css and add at its end:

Code: Select all

body {
background: #fff url('../images/mybg.jpg') no-repeat 0 50%;
}


What it does - it loads your image from prepared file and places it on top of the browser window (0 value right after no-repeat, you can modify it to eg. 10px to move image down 10px), centers it horizontally (50%) and adds white (#fff) background where the image ends. You should create your image so on both sides and bottom it ends with solid colour - and this colour should be used instead of #fff.

Thank you so much!

Please share the final result if it will suit your needs.