Question about the logo

Kleinerhexer

Hi everyone,

I have a question regarding the logo that can be uploaded via the admin interface.

The problem I’m facing is that, regardless of the size, the logo always appears tiny. I’ve experimented quite a bit with CSS, but I just can’t seem to get the logo to a reasonable size where it’s clearly visible—like it is here on this forum or on the English-language forum.

Perhaps someone could help me out and explain the ideal specifications for the logo, such as the optimal width, height, and so on.

I look forward to your replies.
Kleinerhexer

Morgan

Ah, I remember this excitement. When I was first sizing my logo I found this thread, which helped point me in the right direction:
#38728

The code I use now, which looks nice on my forum. I don't remember why I commented that 30px was the largest size. 😂 I do remember I had a lot of back and forth with my artist to get a size that looked good on the forum since my logo is pixel art (which gets fuzzy in bad ways if you don't match the size to a clean ratio of the original).

/* Adjust logo to maximum height of 30px */
.Header-logo {
  max-height: 36px;
  image-rendering: pixelated;
}

(The "pixelated" is to help clean up any residual fuzziness, and unless yours is also pixel art you probably want auto? Although there are other options: https://www.w3schools.com/cssref/css3_pr_image-rendering.php )

Tutrix

Kleinerhexer
This logo is 268px wide and 60px high and is formatted using CSS as follows:

.Header-logo {
  display: block;
  max-height: 30px;
}

You can use custom CSS to adjust the max-height to fit your design.

Kleinerhexer

Tutrix

Hello Tutrix,

Unfortunately, that doesn't work for me. Hopefully, the image shows just how small the logo is.

Capybara

Kleinerhexer I use on my forum

.Header-logo {
  display: block;
  width: 50px;
  height: 50px;
  max-height: none;
}

ClaudiusH

Kleinerhexer What are the dimension of the image you uploaded? Adjusting the max-height for the .Header-logo is your best bet to enlarge it (at the cost of block margins in the header).

Kleinerhexer

Many thanks to everyone who helped.

I managed to get it done, and the logo looks good, I think.

Forogramero

Kleinerhexer

I’ve been asking for that CSS for a long time. Could you share it so we can keep it as a knowledge-base reference?

Thanks!

Tutrix

Forogramero What exactly would you like to change about your logo?

Forogramero

Tutrix Only in case of emergency. Months ago, I was in that same situation too. Someone, I don’t know if it was you or someone else, gave me similar code (it only half-worked, by the way, because it overflowed the navigation menu bar). I’m satisfied now, but I know many people are in the same situation. It’s good to leave it written here in the post.

ernestdefoe

I am actually looking into building an extension that will allow you to make your logo bigger or smaller also resizes the header area based on logo size and allows for using an SVG as a logo.

Tutrix

Forogramero
You can use your current logo with a maximum height of 38px so that everything still fits

.Header-logo {
  max-height: 38px !important;
}

Kleinerhexer

Hi everyone,

I noticed that, unfortunately, in my first version, the larger I tried to make the logo, the more pixelated it became.

So I decided to place the logo directly in the Assets folder and include it in the CSS code.

The logo is now large and clearly visible.

Unfortunately, I haven't yet been able to get the same thing to work for the mobile view (smartphone and tablets). I haven't figured out yet how to target the navigation bar on the left side in CSS—where the logo should go.

I used the following CSS code, for those who are curious. It might not be the cleanest, but it works.

`/* 1. Flarums winziges Standard-Logo im Header unsichtbar machen */
.Header-logo {
display: none !important;
}

/* 2. Den Logo-Link-Container vergrößern und das echte, scharfe Logo als Hintergrund einbinden /
#home-link {
display: inline-block !important;
width: 220px !important; / Passt die Breite für dein Logo an /
height: 140px !important; / Die gewünschte Sicht-Höhe im Header */
background-image: url('https://XXX/assets/Forum_Logo_Neu.png') !important;
background-repeat: no-repeat !important;
background-position: left center !important;
background-size: contain !important;
vertical-align: middle !important;
}

/* 3. Den Header-Bereich in der Höhe anpassen, damit nichts abgeschnitten wird */
.navbar-fixed-top,
.App-header,
.Header-navigation,
.Header-title {
height: 75px !important;
display: flex !important;
align-items: center !important;
}`

I deliberately removed the forum URL from the CSS code for you, since I didn't want to accidentally promote my forum, and I'm not even sure if it's allowed to promote your own forum here.

Tutrix

Kleinerhexer
Add this to the custom CSS:

@media (max-width: 767.98px) {
  .Header-title {
    margin-top: 130px;
  }
}

You can introduce your forum hereShowcase 😉

Kleinerhexer

Tutrix

Sometimes the solution can be so simple that you don't see it.

Thanks so much for the tip. You're the best.

Tutrix

Kleinerhexer
Check out the new “Logo Manager” extension #39835. You might find it interesting.