Urgent - What is the size of the header logo?

  • Hi everyone,


    I've got a artist on my site right now designing a logo for my forum and he is asking all questions I don't understand, such as this:


    Quote

    Is there a way i can have a template off your site, or a copy of the image files that need to be replaced from the forum.

    He's designing my logo which will go in the header of every page of my site. Is there a particular size this image should be?


    Anything else he needs to know, he is designing all my social media related images too.


    thanks

    Jupiter

    I am a Newbie Admin. Please be gentle, I don't understand technical things.
    (Please can we have a full manual for this software)

  • No idea what size would be best to go for with a header logo? I guess it would have to be wide enough to suit large wide screen monitors with a high res setting, but not really sure about that, if the image would be stretched auto or not.

  • This is the problem. The image needs to display both on huge monitors as well as on tiny smartphones.


    WoltLab give no guidance in the ACP about the size of the header. They talk about things like favicon, but nothing about the header.

    I am a Newbie Admin. Please be gentle, I don't understand technical things.
    (Please can we have a full manual for this software)

    Edited once, last by Jupiter ().

  • I don't know, because the problem is you don't want the header logo to be cut off short on high res wide-screen 2k monitors. So you could be talking having to create a logo that's maybe 3000px wide or more to cover it. I don't bother with header logo's for that reason because you end up with a massive file size image being used and needs to be loaded when people visit for the first time before browser cached.

  • What do you have at the top of your page GTB, do you have a link to it?

    I am a Newbie Admin. Please be gentle, I don't understand technical things.
    (Please can we have a full manual for this software)

  • Nothing, I just use the default theme with colour used for logo background area same as here.


    I don't think it's worth the hassle myself trying to add a full-width background image for reasons mentioned above.

  • Jupiter There are two different logos, the main one and the smaller version that is used for Smartphones. The mobile one should not be higher than 30 Pixels, for the desktop use whatever you're comfortable with.


    There is one thing that you should consider: Request your logos to be of double the display size! For example, the default mobile logo is displayed at 55x30 Pixels, but actually is 110x60 Pixels large. This makes sense on Retina/4K-Displays that render things as if they are the "original" size, but use a 4 times larger pixel density, so using regular images will cause them to be blurry instead of being crystal clear.

  • Jupiter There are two different logos, the main one and the smaller version that is used for Smartphones. The mobile one should not be higher than 30 Pixels, for the desktop use whatever you're comfortable with.


    There is one thing that you should consider: Request your logos to be of double the display size! For example, the default mobile logo is displayed at 55x30 Pixels, but actually is 110x60 Pixels large. This makes sense on Retina/4K-Displays that render things as if they are the "original" size, but use a 4 times larger pixel density, so using regular images will cause them to be blurry instead of being crystal clear.

    Alexander, thanks for the reply.


    I've got a draft image in my header now:


    https://www.forumbox.co.uk/forum/


    At the moment the image is too big in some regards, too boxy and doesn't fill the whole header, it doesn't stretch across the screen.


    I don't have a 4k display, so I've got no way to check what the image looks like on these displays.


    What do you reckon would be the correct sized image I need to fill the whole of the whole header please both on normal sized screens and 4k ones?


    I'm not sure I fully understand about the mobile comments, but if I tell the artist that the mobile image needs to be 55x30, but with 4 times more pixels for retina displays, is that correct?


    thanks

    I am a Newbie Admin. Please be gentle, I don't understand technical things.
    (Please can we have a full manual for this software)

  • At the moment the image is too big in some regards, too boxy and doesn't fill the whole header, it doesn't stretch across the screen.

    The logo is not meant to fill the header with it. ;)

    To fill the header you should work better with background pictures!


    Example:

    CSS
    1. @include screen-lg {
    2.     .pageHeaderContainer {
    3.     background: url('#{$style_image_path}yourheaderbackground.jpg');
    4.     background-repeat: no-repeat;
    5.     background-size: 100% 100%;
    6.     }
    7. }


  • I don't have a 4k display, so I've got no way to check what the image looks like on these displays.

    If you take a look at the logo displayed at the top of this page, the images is actually 4 times larger than the displayed size:




    This is the same exact image as present in the header, I just added the background-color due to the white font color being used. The same image again, but this time scaled to only 1/4 of its original size, both its height and width got halved:





    http://4k.com/resolution/ has some nice pictures that compare the difference between 1080p and 4K displays, in particular how the perceived image quality changes. And don't forget that 4K/Retina resolutions are anything but uncommon these days, it's especially widespread across the smartphone, tablet and notebook market.

  • Thanks Alexander.


    I'm not sure I exactly understand your comments, but Iwill ask the artiest to look at this thread.


    As I understand it, images need to be four times larger if required for 4k displays than standard ones, but I don't know how to tell the artist how to achieve this. Hopefully, he might know!

    The logo is not meant to fill the header with it. ;)

    To fill the header you should work better with background pictures!


    Example:

    CSS
    1. @include screen-lg {
    2. .pageHeaderContainer {
    3. background: url('#{$style_image_path}yourheaderbackground.jpg');
    4. background-repeat: no-repeat;
    5. background-size: 100% 100%;
    6. }
    7. }


    Hi Hitman,


    My logo isn't finished yet and although the two words of the name of my forum will only fill a small proportion of the header, the background will have additional tiny words "faded" into it and its these that I want across the whole page.


    Once the logo is done, may I come back to ask you some questions, as I don't know what to say to the artist about how to achieve this?


    thanks

    I am a Newbie Admin. Please be gentle, I don't understand technical things.
    (Please can we have a full manual for this software)

  • but I don't know how to tell the artist how to achieve this

    For example, if you want your logo to have a final size of 200*50 pixels large, then simply request the logo to be done in 400*100 pixels. Then, in your style editor set the image dimensions to 200*50 pixels, which will cause the browser to use the larger image, but scale it down to the set sizes.


    The result is, that your logo will look sharp on both regular screens and 4K displays.


    That's pretty much all you need to now, but I assume it can be a bit confusing if you've never personally had a device with such a resolution, like modern smartphones.

  • Thanks Alexander for that. Much appreciated.


    Never owned a smartphone, my 15 year old Nokia phone is doing just fine.:)


    I copied the code that Hitman posted into my site, but I haven't "quite" got there yet, with regards the header. I may have a few more questions over the next few days, if that is okay.

    I am a Newbie Admin. Please be gentle, I don't understand technical things.
    (Please can we have a full manual for this software)