Quark-One-Page-Site: Farbwechsel-Effekt des Quark-SVG-Logos in einem Child-Theme


logo quark svg
Problem

Im Quark-One-Pager ist ein hübscher Logo-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.

Lösung, Variante 1
  1. Die Datei /user/themes/mein-quark-child/mein-quark-child.php mit einem Texteditor öffnen
  2. Mit dem folgenden PHP-Code vergleichen, Fehlendes ergänzen und anpassen:
<?php
namespace Grav\Theme;

use Grav\Common\Grav;
use Grav\Common\Theme;

class Mein-Quark-Child extends Quark
{
   // Some new methods, properties etc.
}
?>
  1. Speichern
  2. Ein eigenes schwarz-weisses SVG-Logo gestalten und unter dem Namen grav-logo.svg speichern oder exportieren –> sich dabei mehr oder weniger genau an die Ausmasse des Original-Quark-Logos (grav-logo.svg) halten
  3. Im Verzeichnis /user/themes/mein-quark-child einen Ordner namens images erzeugen (sofern er nicht bereits vorhanden ist)
  4. Die SVG-Datei grav-logo.svg in den Ordner /user/themes/mein-quark-child/images kopieren
  5. Überprüfen, dass in den Themes-Einstellungen keine Logos vorhanden sind
  6. Den Cache leeren, die Seite neu laden und überprüfen, ob das Logo angezeigt wird und der Scroll-Effekt funktioniert

    falls es klappt, freuen wir uns über ein kleines Feedback ;-)

Quelle

Lösung, Variante 2

Klappt es mit der vorgängig beschriebenen Methode nicht, kann man es mit folgendem Vorgehen versuchen:

  1. Ein eigenes SVG-Logo gestalten und speichern oder exportieren –> sich dabei mehr oder weniger genau an die Ausmasse des Original-Quark-Logos (grav-logo.svg) halten
  2. Die Datei /user/themes/quark/templates/partials/logo.html.twig in das Verzeichnis /user/themes/mein-quark-child/templates/partials kopieren
  3. Das SVG-Logo und die Datei /user/themes/mein-quark-child/templates/partials/logo.html.twig mit einem Texteditor öffnen
  4. Den vollständigen Logo-Code kopieren und mit ihm in der Datei logo.html.twig den Code ab {% if logo %} bis und mit {% endif %} ersetzen.
  5. Speichern, Cache leeren, Seite neu laden

    Beispiel

    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>

nächster Beitrag

Kommentar hinzufügen

Vielen Dank für den Kommentar!