Notice! Google Chrome Image Bugfix for Hawea, Neubau, Uku & Zeitreise. More info »

Okay
  Public Ticket #1196428
Logo Größe
Open

Comments

  • Andreas started the conversation

    Hallo Elmateam,

    noch eine Frage: Wie kann man das Logo größer machen?  Vorgegeben sind Logobild: 520 x 236 (Retina Version)…aber das sieht bei mir einfach zu mager aus, da ich eine Signatur als Logo verwende…

    Danke, viele Grüße, Andreas

  •  324
    Marc replied

    Hallo Andreas,

    in der functions.php des Theme ist diese Größe definiert. Diese lässt sich in der functions.php eines Child-Themes überschreiben.

    Hier findest du dazu nähere Informationen: https://developer.wordpress.org/reference/functions/add_theme_support/#custom-logo

    Darüberhinaus müsstest du durch ergänzenden CSS-Code das Layout entsprechend anpassen, so dass das größere Logobild entsprechend platziert wird.

    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.

    Viele Grüße
    Marc

  • Maya replied

    Hallo Marc,

    ich habe selbiges Problem mit dem Logo, eine Signatur, die für eine gute Lesbarkeit vor allem in der Breite unbedingt größer dargestellt werden muss. 

    Gibt es hierfür auch eine genauere Anleitung und vor allem auf Deutsch? Und wird das Logo dann auch auf den verschiedenen Geräten (Smartphone, IPad, etc.) in der richtigen Größe angezeigt oder ist das ein aufwendiger Prozess?

    Vielen Dank schonmal für die Hilfe & Viele Grüße,

    Maya

  • Maja replied

    Hallo Marc,

    ich habe genau das Problem vor ein paar Stunden in einem neuen Ticket angesprochen (UKU standard). Das mit css vergrößerte Logo wird eben nicht auf den verschiedenen Geräten skaliert, sondern überdeckt dann den oberen Teil der Seite.

    .custom-logo-wrap a.custom-logo-link img {
    width: 520px;
    max-width: 520px;
    max-height: 170px;

     Ich habe schon ewig herum probiert und  keine Lösung gefunden... Wäre für Hilfe wirklich sehr dankbar! 

    Viele Grüße von Maja, aber diesmal mit "J"

  •  324
    Marc replied

    Hallo Maya und Maja,

    ich werde den Wunsch nach einem größeren bzw. konfigurierbaren Logo einmal als Feature-Request weiterleiten.

    Um die verschiedenen Gerätegrößen individuell anzusprechen, lassen sich sogenannte Mediaqueries verwenden. Werft dazu doch einmal einen Blick in die style.css des Themes. Der Code von Maja könnte in jedem Mediaquery verwendet werden und müsste dort für den jeweiligen Bereich angepasst werden.

    Viele Grüße
    Marc

  • Maya replied

    Das ist doch dann eine ganz schöne Detailarbeit oder nicht?

    Und wenn ich jetzt mit dem Child Theme arbeite, wie habe ich einsicht in die style.css und wo bearbeite ich diese? Muss ich dazu direkt am Uku Theme etwas verändern? Und wie ist das dann mit Aktualisierungen? Sorry ich verstehs glaub einfach nicht :(

    Ich bin ein ganz schöner Wordpress Newbie. Wäre echt toll, wenn du mir da weiterhelfen kannst!

    Danke!

  • Maja replied

    Danke, Marc - es klappt! Ich bin total begeistert... 

    Aber eine einfache Konfiguration des Logo über das Dashboard würden sicher einige Nutzer sehr erfreuen:)

    Grüße von Maja

  •  324
    Marc replied

    Hallo Maya,

    der Aufwand ist überschaubar. Die Mediaquery-Struktur könnte wie folgt aussehen. Innerhalb der einzelnen Blöcke könntest du dann Code wie den von Maja genannten platzieren und entsprechend anpassen:

    /* Minimum width of 600 pixels (smartphone landscape)
    ------------------------------------------------------------------------------------ */
    @media screen and (min-width: 37.500em) {
    ...
    }
    /* Minimum width of 768 pixels (tablet portrait)
    ------------------------------------------------------------------------------------ */
    @media screen and (min-width: 48.000em) {
    ...
    }
    /* Minimum width of 1024 pixels (tablet landscape)
    ------------------------------------------------------------------------------------ */
    @media screen and (min-width: 64.000em) {
    ...
    }
    /* Minimum width of 1060 pixels (small desktop screens)
    ------------------------------------------------------------------------------------ */
    @media screen and (min-width: 66.250em) {
    ...
    }
    /* Minimum width of 1360 pixels (larger desktop screens)
    ------------------------------------------------------------------------------------ */
    @media screen and (min-width: 85.000em) {
    ...
    }
    /* Minimum width of 1800 pixels (larger desktop screens)
    ------------------------------------------------------------------------------------ */
    @media screen and (min-width: 112.500em) {
    ...
    }
    /* Minimum width of 2200 pixels (larger desktop screens)
    ------------------------------------------------------------------------------------ */
    @media screen and (min-width: 137.500em) {
    ...
    }
    

    Du kannst die Bereiche einfach "größer" wählen indem du auf einzelne Mediaqueries verzichtest.

    Dieses CSS kannst du in der style.css deines Child-Themes platzieren, welche von einem zukünftigen Theme-Update nicht überschrieben wird.

    Viele Grüße
    Marc

  • Maya replied

    Danke Marc,

    ich versteh's leider trotzdem nicht. 

    Erst einmal Frage Nummer 1 zum Child Theme (weil ich mir nicht sicher bin, ob ich dieses richtig installiert habe):

    Ich habe erst das Parent-Theme installiert auf Wordpress und danach das Child-Theme, mit dem ich jetzt arbeite. Muss ich da noch etwas beachten? Ich bin verunsichert, da ich den Blogbeitrag gesehen habe von Ellen 'Ein WordPress Theme anlegen - so geht's richtig'

    Frage Nummer 2 zu meinem Logo-Problem:

    Ich sag jetzt einfach mal, wie ich vorgehe um deine Schritte zu verfolgen:

    Ich gehe auf Design - Editor - Stylesheet (style.css)

    darin ist dann geschrieben:

    /*
     Theme Name: Uku Child
     Theme URI:
     Description: Uku Child Theme
     Author: Your Name
     Author URI: http://www.yourdomain.com/
     Template: uku
     Version: 1.0
     License: GNU General Public License v2 or later
     License URI: http://www.gnu.org/licenses/gpl-2.0.html
     Tags: Uku Child Theme
    */

    /*
    You can start adding your own styles here. Use !important to overwrite styles if needed. */

    /*

    Hier habe ich dann den Code eingefügt

    es hat sich aber nicht's geändert. Was habe ich falsch gemacht und vor allem wie ändere ich den Code?

    Sorry ich bin ein totaler Anfänger in Sachen Wordpress und Programmierung.

    Vielen Dank für die Hilfe!

  •  324
    Marc replied

    Hallo Maya,

    du hast bisher alles richtig gemacht und ich vermute auch richtig verstanden. Der von mir genannte Code bewirkt in der Form noch gar keine Änderungen, sondern gibt dir nur eine Struktur an die Hand um die gleichen Mediaqueries zu verwenden, die Uku selbst auch verwendet. Innerhalb dieser Blöcke, könnte dann z. B. der Code von Maja eingesetzt werden und für die verschiedenen Bereiche entsprechend angepasst werden.

    Hast du dir bereits ein paar grundsätzliche Infos zu CSS angesehen? Der folgende Artikel könnte ein Anfang für deine Recherche sein: CSS-Code

    Viele Grüße
    Marc