XF 2.2 How to add full banner

[80sDude]

How can I add a full banner and remove the logo from the site? I know it’s in the header section if I’m not mistaken but don’t know the code. Thanks

 

[Mr Lucky]

The logo is in style properties and is specific to whatever style you are using.

ACP Appearance > Style properties > Basic Options

as suggested previously a full header banner can be easily added using the advertising positions

Advertising > add advertisement > container header

there are other ways, I just outlined the simplest

 

[80sDude]

Hmm strange. I did the ACP appearance suggestion and only some broken image shows up. My banner size is like 900x121. Can that be the reason?

 

[Mr Lucky]

Just to Clarify.

You can remove the logo here: ACP Appearance > Style properties > Basic Options

However it will still show the text name of the forum

A better way to remove both image and text might be to go to the style template extra.less and add this code:

.p-header-logo--image

{display:none}

NB:The style properties edits and extra.less edits only apply to the style you are changing, so if you have more than one (parent) style you must make sure you are doing this in either the style you want to hide the logo for, or in all parent styles (child styles will inherit)

However the advertising slot for the banner (Header Container) is global and so will show on all styles.

BUT will not show on mobiles by default. To make the header display on mobiles you add this to extra.less (again only applies to the style/s not globally)

.p-header {
    display: block !important;
}

I tried a 890 x 110 banner in the header and works fine.

BTW, Also you can of course add a background image to the header.

ACP Appearance > Style properties > Header and Navigation > Header/Logo Row - but this is differnt

 

[Mr Lucky]

An alternative would be to make the logo look like a banner, just put your banner in as the logo in style properties, but need to check whether the small version on mobile fits what you want.

 

[80sDude]

Just to Clarify.

You can remove the logo here: ACP Appearance > Style properties > Basic Options

However it will still show the text name of the forum

A better way to remove both image and text might be to go to the style template extra.less and add this code:

.p-header-logo--image

{display:none}

NB:The style properties edits and extra.less edits only apply to the style you are changing, so if you have more than one (parent) style you must make sure you are doing this in either the style you want to hide the logo for, or in all parent styles (child styles will inherit)

However the advertising slot for the banner (Header Container) is global and so will show on all styles.

BUT will not show on mobiles by default. To make the header display on mobiles you add this to extra.less (again only applies to the style/s not globally)

.p-header {
    display: block !important;
}

I tried a 890 x 110 banner in the header and works fine.

BTW, Also you can of course add a background image to the header.

ACP Appearance > Style properties > Header and Navigation > Header/Logo Row - but this is differnt

Id rather add it to background image header if its easier but regardless it work with the advertise. Personally I still prefer to keep it to stretch across the top like part of the background but I guess this will do.. Thanks

 

[Bow Walker]

I am very interested in this thread as I want to change my header banner photo to a different one.
My current banner is 1920x436

I have tried the method described in post #2 - using my banner size 0 but the banner photo was stretched beyond the borders and looked awful. Plus, it was behind the current banner - but I suspect that I have to get rid of the current banner before trying to install a different one.

I will continue to 'play' around with this by following the above bits of advice, but if there is a code that is required please post it as I am definitely NOT able to write any code.

Thank you, in advance.
Dan.

 

[Bow Walker]

As an example, I am trying to use the "add advertisement" method described by Mr Lucky in post #2.

But, I am unsure whether there is a code that is needed in the HTML portion of the advertisement addition, as pictured below.