Falsche Darstellung Wort "Maße"

Deutsch Diskussion Technische Fragen & Antworten
14

Hey @Anja73

Ja, das ist so wie ich oben gezeigt habe - es geht im Grunde nur mit einer App. Haben dir die Demos gefallen?

Wenn du es doch DIY machen möchtest

Man könnte das zusammen mit einem Experten programmieren - das wäre Würde könnte groß aber eine grössere Operation - Kostenschätzung um die €2k-5k. Unten liste ich die Beispiele was alles gemacht werden muss, um so etwas DIY umzusetzen.

Um die Anzeige der Sprachen in der Header-Leiste des “Be Yours”-Themes anzupassen und die gewünschte Darstellung zu erreichen, musst du einige Änderungen am HTML- und CSS-Code vornehmen. Wenn du es selber DIY im Header Liquid programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Nicht vergessen - Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Hier ein paar Schritte, die befolgen müsste:

  • Anpassen des HTML-Codes: Ersetze den vorhandenen HTML-Code für die Sprachauswahl durch den angepassten Code und stelle sicher, dass der Code die gewünschte Darstellung der Sprachauswahl enthält.
  • Anpassen des CSS-Codes: Füge benutzerdefiniertes CSS hinzu, um die Darstellung der Sprachauswahl zu ändern und die gewünschte Positionierung zu erreichen.

Hier ist ein Beispiel, wie man den HTML- und CSS-Code anpassen könnte (siehe auch meine kommentare im Code, um zu sehen, was der Code alles unter der Haube bewirken muss):

CSS-Code:

/* Verkleinern der Sprachauswahl und Weltkugel-Symbol */
.custom-lang-selector .label {
  margin-left: 8px;
  font-size: 14px; /* Passen Sie die Schriftgröße nach Bedarf an */
}

.custom-lang-selector .icon-localization {
  width: 16px; /* Passen Sie die Größe des Symbols an */
  height: 16px; /* Passen Sie die Größe des Symbols an */
}

/* Positionierung der Sprachauswahl nach rechts */
.localization-form {
  position: absolute;
  right: 20px; /* Passen Sie die Position nach Bedarf an */
  top: 0;
}

/* Weitere Anpassungen nach Bedarf */

Falls erforderlich, müsste man auch das Verhalten der Sprachauswahl mit JavaScript anpassen. Zum Beispiel sicherstellen, dass das Dropdown-Menü korrekt geöffnet und geschlossen wird, wie im folgenden JS dargestellt:

document.addEventListener('DOMContentLoaded', function() {
  const langSelectorButton = document.querySelector('.custom-lang-selector');
  const langList = document.getElementById('HeaderLanguageList');

  langSelectorButton.addEventListener('click', function() {
    const isExpanded = langSelectorButton.getAttribute('aria-expanded') === 'true';
    langSelectorButton.setAttribute('aria-expanded', !isExpanded);
    langList.hidden = isExpanded;
  });

  document.addEventListener('click', function(event) {
    if (!langSelectorButton.contains(event.target) && !langList.contains(event.target)) {
      langSelectorButton.setAttribute('aria-expanded', 'false');
      langList.hidden = true;
    }
  });
});

Diese Änderungen sollten die gewünschte Darstellung und Positionierung der Sprachauswahl ermöglichen. Stellen Sie sicher, dass Sie die Anpassungen testen und gegebenenfalls anpassen, um das gewünschte Ergebnis zu erzielen.

Hoffe das hilft dir weiter, Anja - lass wissen falls nicht! :wink: