Okay
  Public Ticket #1880068
Gutenberg Update
Closed

Comments

  • selectedjungle started the conversation

    Hallo zusammen,

    wir haben heute unseren ersten Blogbeitrag mit dem neuen Gutenberg-Editor erstellt. Leider sind uns ein paar Bugs (?) aufgefallen:

    - Trennzeichen: Obwohl wir kurze Linien ausgewählt haben, werden breite Linien angezeigt (s. Abschnitt "selected Quicklinks")

    - Galerie: Die Galerien werden sowohl auf der mobilen Webseite als auch auf der Desktopvariante mit Aufzählungszeichen versehen. Beim Einfügen im Editor sind diese nicht zu sehen. Zudem werden die Bilder in der Mobilversion teilweise anders angeordnet im Vergleich zur Desktopvariante und dem Editor.

    - Der "Weiterlesen"-Button auf der Startseite unseres Blogs sieht nun anders als, als bei den Beiträgen vor dem Gutenberg-Update (s. https://selectedjungle.com, vgl. Beitrag "Reisebericht. Bunt. Bunter. Valparaiso" vs. übrige Beiträge)

    Gibt es hierfür Lösungen?

    Unabhängig vom Gutenberg-Update wollten wir nachfragen, ob man die Schriftart einfach ändern kann, ohne das gesamte Design des Blogs zu ändern?

    Vielen Dank vorab und VG

    Helena & Julian

  •  787
    Marc replied

    Hallo Helena & Julian,

    vielen Dank für die Hinweise.

    Bitte aktualisiert das Theme auf die letzte Version, welche erst tatsächlich mit dem neuen WordPress-Editor kompatibel ist.

    Weiterlesen-Button: Dieses Problem besteht leider noch immer im Theme. Bitte verwendet den folgenden ergänzenden CSS-Code bis wir eine Lösung in einem Theme-Update umgesetzt haben:

    .blog-classic .entry-content a.more-link {
      box-shadow: inset 0 0 0 transparent;
      display: inline-block;
      color: #1a1a1a;
      border: 1px solid #1a1a1a;
      padding: 10px 26px;
      text-align: center;
      text-decoration: none;
      margin-top: 4px;
    }

    Schriftart: Die Schriftart lässt sich z. B. mit Hilfe von CSS ändern. In den meisten Fällen sind dadurch keine weiteren Anpassungen notwendig. Das Layout wird von dieser Änderung kaum betroffen sein.

    Viele Grüße
    Marc

  • selectedjungle replied

    Hi Marc, 

    danke dir. Das Update hat geklappt und die Änderungen wurden übernommen. 

    Eine Frage noch zur Schrift. Kannst du uns sagen, welche Schriftart der Header (in unserem Beispiel "SELECTEDJUNGLE") hat?

    Merci + liebe Grüße

    Julian & Helena


  •  787
    Marc replied

    Hallo Julian & Helena,

    es ist die Schriftart "Poppins".

    Viele Grüße
    Marc

  • selectedjungle replied

    doppelt*

  • selectedjungle replied

    Hallo Marc,

    vielen Dank für die Info. 

    Können wir die Schriftart einfach über "Zusätzliches CSS" implementieren, sodass die komplette Webseite in der neuen Schriftart erscheint oder müssen wir "tiefer ins System", um das zu ändern?

    Vielen Dank vorab & beste Grüße

    Julian & Helena

  •  787
    Marc replied

    Hallo Julian & Helena,

    wenn ihr eine fremdgehostete Schriftart wie z. B. eine Google-Schriftart verwendet könnt ihr diese durch reines CSS verfügbar machen. Auf der Google-Font-Seite wird euch jeweils der benötigte Code angegeben.

    Wenn ihr die Schriftart lokal zur Verfügung stellen wollt, empfehle ich euch dafür ein Child-Theme zu verwenden. Der eigentliche Abruf wird im Anschluss ebenfalls über reinen CSS-Code durchgeführt.

    In diesem Artikel gibt es weitere Hinweise dazu: https://www.elmastudio.de/google-schriftarten-vom-eigenen-server-laden/

    Viele Grüße
    Marc

  • selectedjungle replied

    Hi Marc, 

    wir haben mittlerweile eine neue Schriftart auf unseren Server geladen, das Child-Theme angelegt und den Code in die style.css des Child-Theme kopiert. Leider wird nach wie vor die alte Schriftart auf unserem Blog angezeigt. 

    Wir haben auch schon den Befehl !important im style.css ausprobiert, leider ohne Erfolg. 

    Hast du eine Idee, woran das liegen könnte bzw. wo wir einen Fehler gemacht haben?

    Danke dir!

    Julian

  •  787
    Marc replied

    Hallo Julian,

    derzeit scheint kein Child-Theme aktiv zu sein. Könnte dies das Problem sein?

    Viele Grüße
    Marc

  • selectedjungle replied

    Hi Marc, 

    wir haben das Child Theme nun aktiviert. Leider ändert sich das komplette Design von Uku. Wir benutzen eigentlich Uku Serif. Mit dem Child Theme wird aber Uku Standard genutzt. Ich nehme an, dass der Designstil in der style.css des Child Themes steht? 

    Oder müssen wir mit dem neuen Child Theme das Layout unseres Blogs wieder komplett anpassen? Wir wollten ja ausschließlich die Schrift damit ändern. 

    Danke dir!

    Julian

  •  787
    Marc replied

    Hallo Julian,

    WordPress vergisst leider die Customizer-Einstellungen beim Theme-Wechsel. Am einfachsten ist es, wenn du mit dem Customizer-Export/Import-Plugin die Customizer-Einstellungen bei aktiviertem Parent-Theme exportierst und diese nach der Child-Theme-Aktivierung wieder importierst.

    Alle weiteren Änderungen werden dann durch die von dir im Child-Theme vorgenommenen Anpassungen durchgeführt.

    Viele Grüße
    Marc

  • selectedjungle replied

    Hi Marc, 

    danke dir! Mit dem Plugin wurden nun auch bei aktiviertem Child Theme alle unsere Anpassungen übernommen. Nur leider stimmt die Schrift immer noch nicht wie gewünscht. Wir möchten gerne für alle Texte die Schriftart Poppins (analog dem Titel auf der Startseite) verwenden. 

    Wir haben diese auch nach Anleitung heruntergeladen, per FTP auf unseren Server geladen, das Child Theme aktiviert und die CSS von Google Web Fonts in unsere style.css des Child Themes kopiert. Trotzdem wird nach wie vor die falsche Schriftart angezeigt bzw. definitiv nicht die Schriftart Poppins. 

    Hast du noch eine Idee woran das liegen könnte?

    Danke!

    Julian


  • Christiane replied

    Guten Morgen,

    es fehlt der "CSS-Befehl", dass die Schriftart Poppins verwendet werden soll. 

    Christiane 

  • selectedjungle replied

    Hallo Christine,

    vielen Dank für deine Antwort.

    Wir haben das bereits probiert, leider ohne Erfolg. Kannst du uns sagen in welcher style.css (Child oder Parent) welcher Befehl genau fehlt?

    Danke dir!
    Julian

  •  787
    Marc replied

    Hallo Julian,

    am besten platzierst du diese CSS-Ergänzungen in der style.css des Child-Themes. 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. So kannst du betroffene Elemente und die verwendeten Selektoren für die Schriftartzuweisung identifizieren.

    Wenn du eine Schriftart vollständig verändern möchtest, kannst du auch in den CSS-Dateien des Paren-Themes nach dieser suchen und die entsprechenden Selektoren herauskopieren. Bitte beachte, dass Selektoren aus der serif-style.css spezifischer deklariert werden müssen. In den meisten Fallen reicht es hier die Klasse ".uku-serif" davorzusetzen.

    Viele Grüße
    Marc

  • selectedjungle replied

    Hi Marc, 

    ich habe mittlerweile nochmals die Änderungen am Child Theme vorgenommen. Da wir die Schriftart komplett ändern möchten, habe ich - wie du beschrieben hast - die entsprechenden Parts aus dem Parent-Theme in das Child-Theme kopiert und die relevanten Selektoren durch ".uku-serif" deklariert. Nun wurde die Schriftart teilweise geändert. Bspw. wird nun die Überschrift H2 oder auch die Content Schrift auf den Übersichtsseiten in der neuen Schriftart dargestellt. Der Rest allerdings noch nicht, obwohl ich alle relevanten Selektoren übernommen habe. 

    Hast du vielleicht eine Idee, woran es liegen könnte, dass nur einzelne Elemente in der neuen Schriftart angezeigt werden?

    Danke dir!

    Julian

  •  787
    Marc replied

    Hallo Julian,

    bei den entsprechenden Elementen müsstest du noch etwas spezifischer mit deinen Selektoren werden. So könnten dir z. B. die folgenden bereits weiterhelfen:

    .uku-serif.single-post .entry-header h1.entry-title,
    .uku-serif.single-post .entry-content p,
    body.uku-serif
    

    Viele Grüße
    Marc