XF 2.2 How to add full banner

80sDude

Well-known member
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
 
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
 
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:

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)

Code:
.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
 
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.
 
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:

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)

Code:
.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
 
Last edited:
Top Bottom