XF 2.1 How Do I Fix the Banner?

[Catsmother]

I am trying to make a style for my forum, so I inserted the image for the header but I want it to cover from the nav tree to the top. Is this possible because I inserted the image for nav tree too and it did not look right and was overlapping.

This is what it looks like now.

 

[Catsmother]

Anyone?

 

[Mr Lucky]

Do you mean that there is the staff bar at the top? If so that will always be there for you as admin, but won't show to regular users or gusts. Try logging out and take the screenshot.

To get it higher you either need a larger logo or some padding or margin for the logo which you can do with CSS in the template extra.less

I have this for mine:

.p-header-logo.p-header-logo--image

{
    margin-top:47px ;
    margin-bottom:27px
}

But someone else may have a better method.

 

[Catsmother]

Do you mean that there is the staff bar at the top? If so that will always be there for you as admin, but won't show to regular users or gusts. Try logging out and take the screenshot.

To get it higher you either need a larger logo or some padding or margin for the logo which you can do with CSS in the template extra.less

I have this for mine:

.p-header-logo.p-header-logo--image

{
    margin-top:47px ;
    margin-bottom:27px
}

But someone else may have a better method.

That code worked but how do I stop it repeating?

 

[Mr Lucky]

That code worked but how do I stop it repeating?

In the css field for the style property

background-repeat:no-repeat;

See

CSS background-repeat property

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

[Catsmother]

In the css field for the style property

background-repeat:no-repeat;

See

CSS background-repeat property

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

Thanks that worked
Now I need it Centered.

 

[Brad P]

I'm not a expert but try

background-position: center;

 

[Catsmother]

I'm not a expert but try

background-position: center;

Thanks. that worked

 

[Catsmother]

Sorry just one more question, how do you get the background transparent for the banner? I have managed to center it and increase the the margins but the colour is showing at the side of the banner.

 

[Brad P]

Could try

color: transparent;

Or background: transparent;

 

[Mr Lucky]

You can do quite a lot of different stuff with backgrounds CSS, check out the link I mentioned above in post 5