Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1181346

    Hi there,

    the logo is always a little blurred on one side: http://00247-01.htz-cs06.clickstorm.de/
    It is particularly noticeable on the move. I installed it as a PNG (in white and black). If I look at it with 100%, it’s sharp too. It also has the same pixel height (111px) as I specified the header height. Unfortunately I can’t upload an SVG file, Enfold doesn’t allow that.
    What can you do?

    Many greetings,
    Martin

    #1181428

    Hey m_reiprich,

    Please have a look at the following thread:

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1181430

    Why do you use an image for that?
    use svg for that (by the way what font was that )

    you can allow the mime-type svg via child-theme functions.php :

    function custom_mtypes( $m ){
        $m['svg'] = 'image/svg+xml';
        $m['svgz'] = 'image/svg+xml';
        return $m;
    }
    add_filter( 'upload_mimes', 'custom_mtypes' );

    or my recommendation is to use that very nice little plugin svg-support

    then you even can use svg inline – not as img src
    there are some css you had to place then – because not all svgs have height – width definitions inside.
    so f.e a width in absolut value had to be set for some browsers.

    #1181678

    I would like to take a look at the plug-in. Is it not possible to insert a picture logo sharply?

    #1181714

    The plugin only has the possibility to replace the img tag with inline svg whereever you like it.
    First of all: There is a lot of crap in that svg ( if i create a svg file with illustrator – there is only the creator on top
    The thing is that there is a possibility to test this without the plugin via via child-theme functions.php with:

    // insert svg as logo
    function replace_logo_with_svg() {
    ?>
      <script type="text/javascript">
      (function($) {
        function a() {
          $( ".logo a img" ).remove();
          $.get('http://00247-01.htz-cs06.clickstorm.de/wp-content/uploads/2020/02/EASH-Verlagsgruppe2.svg', function(svg){
            $( ".logo a" ).html( svg );
          }, 'text');
        }
        a();
      })(jQuery);
      </script>
    <?php
    }
    add_action('wp_footer', 'replace_logo_with_svg');

    But with your svg there is a lot of additonal unnecessary informations in it ( adobe things – some image relicts etc. pp)
    your svg is not set to responsive behavior. i put in the svg code : preserveAspectRatio="xMinYMid meet" etc. pp
    look into this svg code ( open with good text-editor like sublime-text on mac or notepad++ on pc or similar ) : https://webers-testseite.de/EASH-Verlagsgruppe2.svg

    if you use that as svg you even don’t need a transparency extra logo – you can fill the paths with a different color on this case:

    .logo a {
      display: inline-flex;
    }
    
    .av_header_transparency .logo svg .sh0 {
      fill: #fff;
      transition: all 0.7s ease
    }
    #1181717

    by the way : is it a wanted great padding on top and bottom of the logo?
    The bigger it is – the sharpe it will be rendered

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