Okay
  Public Ticket #1833479
Uku Logo Größe
Closed

Comments

  • SannaEver started the conversation

    Hallo liebes Elmastudio-Team,

    ich versuche die Logogröße zu verändern, aber es gelingt mir irgendwie nicht (Designstil: serif, Shopseite). Ich benötige eine Größe von 300x300px, da mein Logo ein Kreis ist und möchte, dass es wie in eurer Ruapuke-Demo zentral auf dem Headerbild steht. Daher habe ich folgenden Code in die functions.php meines Uku Child Themes geschrieben:

    // Enable support for custom logo. add_theme_support( 'custom-logo', array( 'width'       => 300, 'height'      => 300, ) );

    Aber das funktioniert nicht. Habe ich den falschen Code oder einen Fehler darin? Wie schaffe ich es, dass die Bild-Zuschneidefunktion im Customizer einen anderen Rahmen zeigt, damit ich aus meinem runden Logo kein rechteckiges schneiden muss?

    Vielen Dank schonmal im Voraus für Eure Hilfe.

    VG Sanna

  •  41
    Thomas replied

    Hi Sanna,

    bin zwar nicht im Team, versuche aber trotzdem eine sinnvolle Antwort. In der Doku zum Theme steht:

    "The logo image is prepared to be Retina optimized, so your logo image should be of the size 520 x 236 pixels. This is 2x the size, the logo will later appear on your website. This logo size can not be customized (since it is prepared to fit into the fix-positioned header bar and the mobile theme menu as well)."

    Habe die englische Version genommen, weil diese m.E. aktueller ist als die deutsche. Klingt danach, als ließe sich die Logogröße nicht ohne weiteres verändern. Du kannst ja aber doch einfach Deinen Kreis auf 236 x 236 skalieren und dann links und rechts entsprechend "anstückeln". Du brauchst jeweils 142 px zusätzlich nach links und rechts. In einschlägigen Programmen wie z.B. Photoshop heißt der entsprechende Befehl meistens "Arbeitsfläche vergrößern". Falls Du Hilfe brauchst, schick mir einfach Dein Logo. E-Mail ggf. gern per privater Nachricht.

    Viele Grüße, Thomas

  • SannaEver replied

    Hallo Thomas,

    lieben Dank für deine Antwort. 

    Ich finde, dass ist eine prima Idee, die ich gerne ausprobieren werde. Allerdings fürchte ich, dass mir das Logo in den Endmaßen trotzdem zu klein sein wird, denn der Kreis wird ja dann nur in 118px gezeigt werden. Hhmm ... es wäre irgendwie schöner, wenn ich den Bereich für das Logo einfach größer machen könnte. Aber ich werde es auf jeden Fall mal testen, lieben Dank. :-)

    LG Sanna

  •  800
    Marc replied

    Hallo Sanna,

    mit Hilfe von ergänzendem CSS-Code kannst du die Beschränkungen des Logos aufheben bzw. erweitern, welche unabhängig von den von dir bereits angepassten Vorgaben gesetzt sind.

    Die meisten Browser bieten ein Werkzeug um den verwendeten CSS-Code zu analysieren. Mit einem Rechtsklick auf dem jeweiligen Element und der Wahl von "Element untersuchen", "Element-Informationen" o. Ä. öffnet sich dieses Werkzeug. Dort kannst du recherchieren welche CSS-Eigenschaften verwendet werden und wie sich das Element mit eigenem CSS-Code ansprechen lässt.

    Gerne kann ich dir etwas Beispiel-Code zur Verfügung stellen, wenn du mir einen direkten Link zur betroffenen Seite geben kannst.

    Viele Grüße Marc

  • Thomas replied

    Hallo Marc (und natürlich auch Sanna),

    vielen Dank, dass Du hier im Forum so gute Hilfestellungen gibst. Ich habe das gleiche Problem und habe Deinen Code-Schnipsel in einem anderen Forumsbeitrag gelesen:

    @media screen and (min-width: 48.00em) {    .custom-logo-wrap a.custom-logo-link img {        max-height: 200px;        max-width: 400px;    }
    }

    Ich habe mal meine benötigen Pixelgrößen eingegeben - es hat aber trotzdem nicht funktioniert. Gibt es noch andere Dinge, die ich in dem Schnipsel individualisieren muss? Was ist z.B. mit der (min-width: 48.00em)? 

    Und es ist doch richtig, dass ich es hier eingegeben habe, oder? (siehe Screenshot)

    Vielen Dank im voraus und besten Gruß,

    Beginner T. ;)

    Attached files:  Bildschirmfoto 2019-01-02 um 10.27.51.png

  •  800
    Marc replied

    Hallo Thomas,

    darüberhinaus müsstest du folgenden Code hinzufügen und entsprechend anpassen:

    @media screen and (min-width: 66.25em) {
        #site-branding .custom-logo-wrap a.custom-logo-link img {
            width: 260px;    
        }
    }

    Die em-Werte lassen sich mit 16 multiplizieren um die minimale Pixelbreite zu errechnen, welche dein Browserfenster haben muss, damit diese CSS-Regeln gelten.

    Viele Grüße
    Marc

  • Thomas replied

    Hallo Marc,

    vielen Dank zunächst einmal. In dem anderen Thread, in dem ich ein neues Ticket angelegt hatte, hatte ich andere gewünschte Logomaße angegeben, sodass Dein Codeschnipsel hier leider nicht funktionierte.

    Ich benötige schlussendlich eine Logogröße von 250px (Höhe) x 700px (Breite). 

    Wenn ich es richtig verstehe, müsste ich dann in Summe folgende Schnipsel in das Extra CSS kopieren, wobei ich Dich bitten würde, hier nochmal auf die "em-Werte" (oben und unten) zu schauen, sowie auf die width: im unteren Schnipsel.

    @media screen and (min-width: 48.00em) {
        .custom-logo-wrap a.custom-logo-link img {
            max-height: 250px;
            max-width: 700px;
        }
    }

    @media screen and (min-width: 66.25em) {
        #site-branding .custom-logo-wrap a.custom-logo-link img {
            width: 260px;    
        }
    }

    Ich danke Dir, Thomas

  •  800
    Marc replied

    Hallo Thomas,

    lediglich den unteren width-Wert müsstest du ebenfalls auf 700 anheben.

    Viele Grüße
    Marc

  • Thomas replied

    Entschuldige Marc, dass ich Dich noch mal belästigen muss. Wenn ich den CSS Code eingegeben habe und dann eine Logodatei hochladen möchte, bekomme ich immer das Bildzuschnittfenster, das mir es nicht ermöglicht, das gesamte Logo zu erfassen. Siehe Screenshot.

    Viele Grüße,

    Thomas

    Attached files:  Bildschirmfoto 2019-01-05 um 10.56.45.png

  •  800
    Marc replied

    Hallo Thomas,

    das Theme gibt leider das Format für das Logo vor. Dies kannst du frei wählbar gestalten indem du folgenden ergänzenden Code am Ende der functions.php des Themes einfügst. Für derartige Anpassungen empfehle ich dir dringend die Verwendung eines Child-Themes. Ein vorbereiteter Child-Theme-Ordner ist in der Uku-Dokumentation verlinkt. Mit einem Child-Theme könntest du den folgenden Code in der functions.php des Child-Themes unterbringen und müsstest keinen Verlust des Codes bei einem Theme-Update fürchten.

    add_theme_support( 'custom-logo', array(
            'width'       => 520,
            'height'      => 236,
            'flex-height' => true,
            'flex-width'  => true,
        ) );

    Viele Grüße
    Marc

  • Thomas replied

    Hallo Marc,

    entschuldige bitte - aber ich konnte das Problem leider noch nicht lösen. Es verhält sich so wie vorher. 
    Ich habe ein Child vom Theme angelegt und den Code entsprechend eingesetzt. Der Logo-Beschnitt ist aber wie vorher.

    In angehängtem Bild habe ich von allem Relevanten Screenshots beigefügt. Ich lasse Dich gern auch einmal auf die Installation, wenn es das für Dich unkomplizierter macht.

    Viele Grüße, Thomas

    Attached files:  Logo-Problem.jpg

  • Thomas replied

    Hallo Marc, könntest Du bitte noch mal in mein Ticket schauen? Besten Dank, Thomas

  •  800
    Marc replied

    Hallo Thomas,

    gerne würde ich einmal direkt in dein Dashboard schauen. Würdest du mir dazu ein Administrator-Konto anlegen? Du kannst die Mail-Adresse wordpress@marcjandt.de verwenden. Bitte sage in jedem Fall hier auch Bescheid, wenn du ein Konto angelegt hast.

    Viele Grüße
    Marc

  • Thomas replied

    Hallo Marc,

    ich habe Dir einen Admin-Account eingerichtet und Dir die Daten an Deine Mailadresse geschickt. Ist es angekommen? Vielen Dank schon einmal,

    Thomas

  •  800
    Marc replied

    Hallo Thomas,

    leider habe ich jedoch keine URL zur betroffenen Seite auf der ich mich mit den Daten anmelden könnte. Diese kannst du mir gern ebenfalls per Mail schicken.

    Viele Grüße
    Marc

  •  800
    Marc replied

    Hallo Thomas,

    leider war mein Code nicht ganz vollständig. Der folgende Code funktioniert jedoch tatsächlich:

    function uku_child_setup() {
        add_theme_support( 'custom-logo', array(
            'width'       => 520,
            'height'      => 236,
        'flex-height' => true,
        'flex-width'  => true,
        ) );
    }
    add_action( 'after_setup_theme', 'uku_child_setup', 11 );
    

    Ich habe diesen auch bereits auf deiner Seite eingebaut.

    Viele Grüße
    Marc

  • Thomas replied

    Vielen Dank, Marc! Jetzt hat es gut funktioniert! Well done! Ein schönes Wochenende!