The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Banner background transparency and gap below banner.

Go down

Solved Banner background transparency and gap below banner.

Post by Tattastic on January 10th 2016, 8:27 pm

Hello,

I have a couple of questions regarding a re-design of my destiny clans forum, thought I would make sure it can be done before I move ahead with all the photoshop work for the new look.

Please see below a screen-grab from the top of the forums currently (the space either side is so big on the example as I am connected to my TV at the moment so the res is 1080p).



My questions are...
1 - Is it possible to just the make the top blue background behind the banner transparent, and leave what is below the nav bar in the blue still?
Just I have a plan for a background, but I want the banner to show the background behind it, but I still want the main content to have the solid blue background behind it.

2 - How do I remove the gap highlighted in red below the banner to the navigation bar?

My forum is using phbbb3 and can be viewed at www.clan-aom.com if required.

Thanks for help in advance.

Tatt


Last edited by Tattastic on January 10th 2016, 9:05 pm; edited 1 time in total
avatar
Tattastic
Forumember

Male Posts : 104
Reputation : 1
Language : English
Location : Middlesbrough, UK

http://www.clan-aom.com

Back to top Go down

Solved Re: Banner background transparency and gap below banner.

Post by SLGray on January 10th 2016, 8:42 pm

Please change the title of your topic to something that is related to your question/issue, so that other users will be able to find their question/issue using the search engine.

1.  When I visit the forum, the banner covers the container it is in.  I do not see a background.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 42737
Reputation : 3010
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Banner background transparency and gap below banner.

Post by Tattastic on January 10th 2016, 9:07 pm

Is to do with the resolution of my tv, if I make a .png would it now have the solid blue background (see screen-grab) or would it still go solid blue because there is something in the container?
avatar
Tattastic
Forumember

Male Posts : 104
Reputation : 1
Language : English
Location : Middlesbrough, UK

http://www.clan-aom.com

Back to top Go down

Solved Re: Banner background transparency and gap below banner.

Post by 10spetter10 on January 10th 2016, 10:36 pm

  1. Try this css:

    Code:
    #wrap {
      padding: 0px;
      background: none;
    }
    #page-header {
      padding: 0 5px;
    }
    #page-body, #page-footer {
      padding: 0 5px;
      background-color: #0b181f;
      width: auto;
    }

    It should remove the background-color of your
    Code:
    #wrap
    and add the background to
    Code:
    #page-body
    and
    Code:
    #page-footer
    .

  2. You can edit the previous code by adding
    Code:
    margin-top: 0px;
    to the code of
    Code:
    #page-body, #page-footer
avatar
10spetter10
Forumember

Posts : 195
Reputation : 82
Language : Dutch

Back to top Go down

Solved Re: Banner background transparency and gap below banner.

Post by Tattastic on January 10th 2016, 11:44 pm

Thanks thats solved issue 1 - but as you will see from the below image the gap (dark grey part) is still between the banner and the Navbar. I have added that but of code you suggested in your answer but to no avail.



I have returned to what it looked like prior to coding now, but this is the coding I put in when the gap was still there between the banner and the navbar

Code:
#wrap {
  padding: 0px;
  background: none;
}
#page-header {
  padding: 0 0px;
}
#page-body, #page-footer {
  padding: 0 5px;
  background-color: #0b181f;
  width: auto;
  margin-top: 0px;
}
avatar
Tattastic
Forumember

Male Posts : 104
Reputation : 1
Language : English
Location : Middlesbrough, UK

http://www.clan-aom.com

Back to top Go down

Solved Re: Banner background transparency and gap below banner.

Post by 10spetter10 on January 11th 2016, 12:26 am

The corner-things of phpBB fill this place but I see you don't use them so you can hide them.

Code:
.corners-bottom, .corners-top {
  display: none;
}

And after that you need to set the margin of the head also to 0.

Code:
.headerbar {
  margin-bottom: 0px;
}
avatar
10spetter10
Forumember

Posts : 195
Reputation : 82
Language : Dutch

Back to top Go down

Solved Re: Banner background transparency and gap below banner.

Post by Tattastic on January 11th 2016, 12:32 am

Have entered that code in and it has made it a little smaller, would I need the corner-things in use for it to work? If so how would I go about using them?
avatar
Tattastic
Forumember

Male Posts : 104
Reputation : 1
Language : English
Location : Middlesbrough, UK

http://www.clan-aom.com

Back to top Go down

Solved Re: Banner background transparency and gap below banner.

Post by 10spetter10 on January 11th 2016, 12:38 am

No, I personnaly don't like them and remove it. But I see when I turn it off on yours the layout get messed up so I specify it for just the top part.

Code:
.headerbar .corners-bottom, .headerbar .corners-top {
  display: none !important;
}
avatar
10spetter10
Forumember

Posts : 195
Reputation : 82
Language : Dutch

Back to top Go down

Solved Re: Banner background transparency and gap below banner.

Post by Tattastic on January 11th 2016, 5:51 pm

That has work - thanks very much, problem marked as solved
avatar
Tattastic
Forumember

Male Posts : 104
Reputation : 1
Language : English
Location : Middlesbrough, UK

http://www.clan-aom.com

Back to top Go down

Solved Re: Banner background transparency and gap below banner.

Post by SLGray on January 11th 2016, 7:39 pm

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 42737
Reputation : 3010
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Banner background transparency and gap below banner.

Post by APE on January 11th 2016, 7:40 pm

Topic solved and archived  



avatar
APE
Manager
Manager

Male Posts : 11865
Reputation : 1173
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum