Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • March 5, 2024 at 5:03 am #1436321
    carmentvaalba

    Hello I have try this: https://kriesi.at/support/topic/logo-mobile-blurry/ but is the same in my site, how can I do it?: this is the page: https://gonowjets.com/

    March 5, 2024 at 9:03 am #1436340
    Ismael

    Hey carmen,

    Thank you for the inquiry.

    The size of the logo is only 200x60px, surrounded by a lot of transparent space. You may need to remove the excess transparent space and upload a larger version of the logo. The theme should vertically align the image automatically. If not, we can adjust it with css.

    Best regards,
    Ismael

    March 5, 2024 at 5:04 pm #1436386
    carmentvaalba

    Hello and what size in pixels you recommend? For that site: https://gonowjets.com/

    March 6, 2024 at 8:07 am #1436454
    Ismael

    Hi,

    Thank you for the update.

    Consider doubling or tripling the size of the logo to cover retina displays; dimensions like 400x120px or 600x240px should be enough. And again, please make sure that the transparent spaces around the logo are removed.

    Best regards,
    Ismael

    March 6, 2024 at 12:09 pm #1436493
    carmentvaalba

    OK I have the logo https://gonowjets.com/wp-content/uploads/2024/03/logo-gonowjets-800px.png with bigger dimensions, but if I insert it as a logo it looks huge, and is still looking blurry… (now is not there, i have removed it now
    What can I do?

    March 6, 2024 at 3:01 pm #1436504
    Guenni007

    do you have that logo as svg file? Vectorbased Files are sharper even on small dimensions
    If not – what Font is the base for it? (the G and E and T and S will not be there on default – but it is much easier to make an svg of that – if we know the source font.

    March 6, 2024 at 4:05 pm #1436512
    carmentvaalba

    It works with sgv!! Thank you

    March 6, 2024 at 4:37 pm #1436513
    Guenni007

    Yes – but do replace both files – logo for transparency headers and the other one.

    March 6, 2024 at 5:40 pm #1436517
    Rikard

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

    March 7, 2024 at 7:35 am #1436571
    Guenni007

    but this is not a pure svg file – it has an embedded image file ( as data:image/png;base64 ) – the advantage of svg is the vectorbased curves.

    The embedded Image in your file is superflous. Here is a cleaned version of your logo:
    https://webers-testseite.de/gonowjets.svg

    you see on the xml code of that svg a group class : fillColor
    so you can now colorize that logo via quick css:

    .fillColor {
  fill: #FFF;
}

    see in action on : https://webers-testseite.de/gonowjets-2/
    with: 

    #top .logo svg {
  width: 300px;
}

    ps: the svg does not shrink with the header because it fits with the given width even in the shrinked header.
    if you do not set the svg width – it will shrink but then it is very big of course.

    March 7, 2024 at 1:14 pm #1436615
    Guenni007

    now you can see on that example page – that i can influence the inline svg logo to have different fill colors if the header is transparent.

    in this case i do not use the transparency logo on enfold options. – i just switch the fill color for that case:

    .html_header_transparency #header:not(.header-scrolled) .fillColor {
  fill: #FFF;
}

    by the way – on your page – i wouldn’t try to set the svg dimension via height – because this is calculated by the shrinking script.
    just set a width ( absolute value) 

    .logo svg {
  /*** margin-top: 10px; ***/
  /*** padding: 10px; ***/
  width: 350px;
  /*** height: auto; ***/
}

    so get rid of margin-top, padding and height

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.