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.

View previous topic View next topic 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

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.


SLGray
Administrator
Administrator

Male Posts : 36641
Reputation : 2441
Language : English
Location : United States

http://ztwds.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?

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

10spetter10
Forumember

Posts : 195
Reputation : 81
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;
}

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;
}

10spetter10
Forumember

Posts : 195
Reputation : 81
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?

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;
}

10spetter10
Forumember

Posts : 195
Reputation : 81
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

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.


SLGray
Administrator
Administrator

Male Posts : 36641
Reputation : 2441
Language : English
Location : United States

http://ztwds.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




APE
Manager
Manager

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

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

Back to top Go down

View previous topic View next topic Back to top


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