Add advertisement (like a background)

Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Thu May 15, 2014 12:55 pm
Reply with quote
Report this post
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.
User avatar
Junior Boarder

GK User
Thu May 15, 2014 3:53 pm
Reply with quote
Report this post
Could you please post an url to your site?
User avatar
Moderator

GK User
Thu May 15, 2014 4:11 pm
Reply with quote
Report this post
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
User avatar
Junior Boarder

GK User
Thu May 15, 2014 5:49 pm
Reply with quote
Report this post
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.
User avatar
Moderator

GK User
Fri May 16, 2014 8:34 am
Reply with quote
Report this post
Ok! I will add it in the next days and then I will ask you to help me. Thank you very much!
User avatar
Junior Boarder

GK User
Sun May 18, 2014 11:24 am
Reply with quote
Report this post
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.
User avatar
Moderator

GK User
Thu May 22, 2014 8:10 am
Reply with quote
Report this post
I put the site on line.. Can i send you the link by pm?
User avatar
Junior Boarder

GK User
Thu May 22, 2014 6:53 pm
Reply with quote
Report this post
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
User avatar
Moderator

GK User
Thu May 29, 2014 4:26 pm
Reply with quote
Report this post
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.
User avatar
Moderator

GK User
Thu May 29, 2014 4:29 pm
Reply with quote
Report this post
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;   
}
User avatar
Moderator

GK User
Thu May 29, 2014 4:37 pm
Reply with quote
Report this post
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.
User avatar
Moderator

GK User
Fri May 30, 2014 9:46 am
Reply with quote
Report this post
Thank you so much!
User avatar
Junior Boarder

GK User
Mon Jun 02, 2014 5:29 pm
Reply with quote
Report this post
Please share the final result if it will suit your needs.
User avatar
Moderator


cron