Im Quark-One-Pager ist bei der Verwendung von SVG-Logos ein hübscher Effekt eingebaut. Das Logo wechselt beim Hochscrollen seine Farbe von weiss auf schwarz:
https://demo.getgrav.org/onepage-skeleton | https://gravik.ch
Leider verschwindet dieser Effekt, wenn man, wie empfohlen, ein Child-Theme erzeugt. Dort ist es erforderlich, in den Theme-Einstellungen eigene Logos hochzuladen, da sonst Fehlermeldungen angezeigt werden. Damit verschwindet aber auch der erwähnte Effekt.
Übrigens wird der Effekt ausschliesslich auf SVG-, jedoch nicht auf JPG-, GIF- oder PNG-Dateien angewendet.
{% set logo = theme_var(mobile ? 'custom_logo_mobile' : 'custom_logo') %}
<a href="{{ home_url }}" class="navbar-brand mr-10">
{% if logo %}
{% set logo_file = (logo|first).name %}
{% set logo_end = (logo_file|split('.')|last) %}
{% if logo_end == 'svg' %}
{# the logo is a svg file -> include #}
{% include('@images/logo/' ~ logo_file) %}
{% else %}
{# the logo is a bitmap file (PNG, JPG etc.) -> insert with img-tag #}
<img src="{{ url('theme://images/logo/' ~ logo_file) }}" alt="{{ site.name }}" />
{% endif %}
{% else %}
{% include('@images/grav-logo.svg') %}
{% endif %}
</a>
{% if logo %}
bis und mit {% endif %}
ersetzen.Code der Originaldatei logo.html.twig
{% set logo = theme_var(mobile ? 'custom_logo_mobile' : 'custom_logo') %}
<a href="{{ home_url }}" class="navbar-brand mr-10">
{% if logo %}
{% set logo_file = (logo|first).name %}
<img src="{{ url('theme://images/logo/' ~ logo_file) }}" alt="{{ site.title }}" />
{% else %}
{% include('@images/grav-logo.svg') %}
{% endif %}
</a>
Code der Datei logo.html.twig mit dem Logo von gravik.ch
{% set logo = theme_var(mobile ? 'custom_logo_mobile' : 'custom_logo') %}
<a href="{{ home_url }}" class="navbar-brand mr-10">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 612 111" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g>
<g>
<g transform="matrix(1,0,0,1,-145.51,-103.253)">
<path d="M194.11,103.253C201.059,103.253 207.214,104.301 212.579,106.397C217.945,108.493 223.027,111.586 227.831,115.679L216.958,127.02C213.177,124.063 209.623,121.923 206.291,120.601C202.974,119.267 199.118,118.599 194.727,118.599C186.556,118.599 179.863,121.868 174.648,128.405C169.432,134.942 166.825,144.96 166.825,158.459C166.825,172.556 168.89,182.724 173.019,188.961C177.162,195.187 183.474,198.299 191.957,198.299C198.406,198.299 204.033,196.92 208.835,194.163L208.835,166.579L192.892,166.579L190.74,151.552L228.765,151.552L228.765,203.37C217.313,210.318 205.149,213.793 192.274,213.793C177.142,213.793 165.564,209.096 157.542,199.701C149.52,190.295 145.509,176.547 145.509,158.458C145.509,146.905 147.68,136.968 152.022,128.647C156.376,120.314 162.227,114.001 169.575,109.709C176.936,105.405 185.114,103.253 194.11,103.253ZM282.258,169.031L269.383,169.031L269.383,211.491L249.155,211.491L249.155,105.555L280.724,105.555C308.731,105.555 322.735,115.928 322.735,136.675C322.735,143.737 320.995,149.569 317.514,154.172C314.046,158.764 308.631,162.487 301.27,165.344L329.022,211.491L305.705,211.491L282.258,169.031ZM269.383,154.471L281.958,154.471C288.396,154.471 293.273,153.069 296.592,150.262C299.911,147.443 301.57,142.913 301.57,136.676C301.57,130.962 299.855,126.801 296.424,124.194C293.006,121.587 287.623,120.284 280.275,120.284L269.383,120.284L269.383,154.471ZM398.922,211.491L392.335,186.957L357.23,186.957L350.624,211.491L329.628,211.491L362.583,105.555L387.584,105.555L420.388,211.491L398.922,211.491ZM361.216,171.632L388.182,171.632L374.689,121.049L361.216,171.632ZM504.389,105.555L472.968,211.491L448.904,211.491L416.549,105.555L438.313,105.555L461.312,193.563L483.692,105.555L504.389,105.555Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(1,0,0,1,-145.51,-103.253)">
<path d="M528.908,131.323L528.908,211.491L520.019,211.491L520.019,131.323L528.908,131.323ZM524.323,105.548C526.369,105.548 528.004,106.166 529.226,107.401C530.448,108.624 531.06,110.152 531.06,111.986C531.06,113.833 530.448,115.373 529.226,116.609C528.003,117.831 526.369,118.443 524.323,118.443C522.377,118.443 520.793,117.831 519.57,116.609C518.346,115.373 517.736,113.833 517.736,111.986C517.736,110.152 518.346,108.624 519.57,107.401C520.793,106.166 522.377,105.548 524.323,105.548ZM570.072,104.187L570.072,211.491L561.638,211.491L561.638,105.211L570.072,104.187ZM615.231,131.323L581.508,167.196L618.747,211.492L608.025,211.492L571.234,167.645L604.955,131.323L615.231,131.323ZM636.077,198.616C638.223,198.616 639.981,199.308 641.354,200.693C642.74,202.065 643.432,203.774 643.432,205.82C643.432,207.966 642.74,209.731 641.354,211.116C639.981,212.488 638.223,213.175 636.077,213.175C634.032,213.175 632.292,212.464 630.856,211.042C629.433,209.607 628.722,207.867 628.722,205.82C628.722,203.774 629.433,202.065 630.856,200.693C632.292,199.309 634.032,198.616 636.077,198.616Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(1,0,0,1,-145.51,-103.253)">
<path d="M683.417,152.656C686.724,152.656 689.662,153.117 692.231,154.041C694.801,154.951 697.302,156.437 699.735,158.495L696.535,162.687C694.627,161.139 692.662,159.998 690.641,159.261C688.62,158.526 686.324,158.157 683.754,158.157C678.315,158.157 673.979,160.271 670.747,164.5C667.516,168.718 665.9,174.868 665.9,182.952C665.9,190.961 667.498,196.986 670.691,201.028C673.884,205.058 678.201,207.073 683.641,207.073C686.211,207.073 688.543,206.675 690.64,205.876C692.736,205.064 694.843,203.849 696.964,202.227L700.052,206.531C695.211,210.649 689.703,212.707 683.528,212.707C678.6,212.707 674.302,211.534 670.634,209.189C666.967,206.831 664.122,203.431 662.101,198.99C660.08,194.537 659.07,189.227 659.07,183.064C659.07,176.964 660.081,171.619 662.101,167.028C664.122,162.436 666.967,158.894 670.634,156.398C674.304,153.903 678.565,152.656 683.417,152.656ZM740.821,152.656C745.961,152.656 749.928,154.216 752.722,157.334C755.516,160.453 756.913,164.77 756.913,170.285L756.913,211.491L750.513,211.491L750.513,171.164C750.513,162.281 746.877,157.84 739.604,157.84C735.936,157.84 732.687,158.851 729.854,160.871C727.035,162.88 724.34,165.83 721.77,169.723L721.77,211.492L715.371,211.492L715.371,130.388L721.77,129.62L721.77,163.453C726.91,156.256 733.26,152.656 740.821,152.656Z" style="fill-rule:nonzero;"/>
</g>
</g>
</g>
</svg>
</a>
Kommentar hinzufügen