XF 2.3 Force Logo image to the Bottom of the Header

[Elisabeth_K]

I have exhausted things to try so I am asking here.

For visual appeal, I am using a graphic image as my logo. The problem I would like to solve is how to make the logo image align with the bottom edge of the header so it appears directly above the nav bar with no padding.

Here is an example I created with an extremely contrasting header background to illustrate the problem.



It is the area under the logo image that I am trying to eliminate. I don't see any padding settings and nothing I've tried with the image itself has made any difference. This is limiting my creativity.

It is not so bad with a dark background like with the header image I'm using now but it is still noticeable if you look closely as you can see on my current header/logo here:

https://citadel-81.com/xen/

Any idea to fix this would be appreciated. Thanks in advance.

 

[Mr Lucky]

Looks like it's p-header-content padding

Try in the extra.less template adding

.p-header-content
{padding:0}

Edit it may need a priority:

.p-header-content
{padding:0!important}

But try without first

 

[Elisabeth_K]

@Mr Lucky

You, sir, are a genius! This absolutely 100% fixed the issue and I am so happy. Thank you a ton! This is the 2nd time you've come to my rescue.

It worked without the important needed although having this work like I want is very important to me!

 

[Mr Lucky]

You, sir, are a genius!

Not quite! but it’s more about knowing where to look. Use your browser inspect elements tool (I use Chrome right click somewhere near the bit you want to check). I noticed the p header content had a value of padding 6px

 

[Mr Lucky]

Not quite! but it’s more about knowing where to look. Use your browser inspect elements tool (I use Chrome right click somewhere near the bit you want to check). I noticed the p header content had a value of padding 6px

 

[Elisabeth_K]

Thanks, I will try doing that and see if I can figure out myself.

Unless you switched, it looks like the add-on I installed to force dark mode on guests isn't working.

 

[Mr Lucky]

Thanks, I will try doing that and see if I can figure out myself.

Unless you switched, it looks like the add-on I installed to force dark mode on guests isn't working.

Yes it was dark by default. I switched so I could see the padding/margin issue.

 

[Elisabeth_K]

Good to know it came up dark. Thank you for the follow up.

 

[Starlinkhispano]

Good afternoon, I find myself having this same situation in my forum of not being able to adjust the logo defining the contrast of the PNG

 

[Elisabeth_K]

I looked at your site and only see the default xenForo logo so I'm not really sure what the problem is?

Under style properties>basic options, have you defined the public logo width and public logo height sizes? You can also change the background area of the logo by going to style properties>Header and Navigation>Header/logo row and changing the color or adding an image.

To get the look I want I'm using both a png with a transparent background for logo and a jpg header logo row image because I'm using rotating logo images with different background images for the header/logo row. I have defined my logo width and height sizes as 1180 x 255. The images used for the header row are about 2200 x 260 depending on how they wrap when zooming in and out. It makes a neat effect with the logo image staying fixed and the background resizing depending on zoom level. ( https://citadel-81.com/xen )

My problem was padding under the bottom of the logo image preventing it from sitting exactly at the bottom of the logo row. The entry in the extra.less template provided by @Mr Lucky fixed my issue.

 

[Starlinkhispano]

@Elisabeth_K It fit you well, unlike I do not like to use the black background ... I prefer the default style the other option could be to use the same image as the original xF logo but with reference to my site. My preference is to use old banners but I do not consider myself a professional to achieve it

 

[Elisabeth_K]

You have a lot of possibilities. I couldn't find the globe image you used but knocked out some quick samples to give you ideas.. The bottom two use an image for the header/logo row background.

Please try to better describe what you want to do. Feel free to DM me if you'd prefer.

Tienes muchas posibilidades. No pude encontrar la imagen del globo terráqueo que utilizaste, pero preparé unas muestras rápidas para darte algunas ideas. Las dos de abajo utilizan una imagen como fondo para la fila del encabezado o logotipo.

Por favor, intenta describir mejor lo que quieres hacer. No dudes en enviarme un mensaje directo si lo prefieres.