Schriftproblem in Ribbons und Artikelnamen

Thema wurde von Anonymous, 22. Januar 2022 erstellt.

  1. Anonymous

    Anonymous Mitglied

    Registriert seit:
    3. Januar 2022
    Beiträge:
    19
    Danke erhalten:
    0
    Danke vergeben:
    8
    Hallo, ich nutze eine Kopie des Malibu-Themes in der Cloud und bin aktuell dabei, meinen Shop aufzubauen und zu gestalten. Nun kämpfe ich schon seit Stunden mit zwei Problemen bei der Darstellung von Schrift, die ich weder durch Ändern der Schriftgröße noch durch Auswahl eines anderen Fonts behoben bekomme. Da ich mich mit dem Shopsystem (und CSS etc allgemein) nicht so bombig auskenne, brauche ich nun Hilfe von jemandem, der eventuell versteht, was der Auslöser meines Problems sein kann.

    1.) Text sitzt bei mir nicht zentriert in den Ribbons, sondern viel zu weit unten am Rand (siehe Foto).
    [​IMG]
    Ich habe mir auch einmal den Malibu-Demoshop von Gambio im Internet angeschaut, und da gibt es das Problem wohl auch schon, wenn auch nicht so ausgeprägt, aber auch da sitzt die Schrift nicht wirklich zentriert in den Ribbons. Wäre es bei mir nur so wie dort, könnte ich damit leben, aber ich finde es sieht schon ziemlich übel "verrutscht" aus in meinem Shop.

    2.) Bei zweizeiligen Artikelnamen werden die Unterlängen der Buchstaben abgeschnitten, sieht man ebenfalls oben im Foto. Auch das bekomme ich nicht gelöst, egal welche Schrift und welcher Browser. Im Gambio-Mustershop gibt es nur einzeilige Artikelnamen, von daher tritt das Problem dort nicht auf – da sich das bei mir aber nicht umsetzen lassen wird, alles einzeilig zu bekommen, brauche ich irgendeine andere Lösung, habe nur leider keine Ahnung, wo ich ansetzen muss.

    Habt ihr einen Tipp für mich – oder auch zwei...?
     
  2. markus_wick

    markus_wick Erfahrener Benutzer

    Registriert seit:
    10. Oktober 2018
    Beiträge:
    966
    Danke erhalten:
    214
    Danke vergeben:
    153
    Damit sich im Forum jemand das Ganze ansehen kann, bräuchten wir einen Link auf den Shop.

    Tipp: Man kann im Forum eine Signatur anlegen, in dem Infos wie Shopversion, Cloudshop oder selbstgehostet, Link zum Shop etc. hingterlegt sind, dann können andere Forenteilnehmer schon mal grundlegendes sehen. Dazu einfach in den Gambio-Account einloggen, links im Bereich "Forum" kann dann das Profil und die Signatur eingerichtet werden.
    So z.B.:
    Code:
    [URL="https://www.realrecyclers.com"]www.realrecyclers.com[/URL]
    Theme-basierter Shop (Xycons-theme)
    Gambio GX3 v3.14.3.0
    selbstgehostet bei Estugo
    Fertig!
     
  3. Anonymous

    Anonymous Mitglied

    Registriert seit:
    3. Januar 2022
    Beiträge:
    19
    Danke erhalten:
    0
    Danke vergeben:
    8
    Hallo, danke für diese Infos, das werde ich dann gleich mal machen. Link zum Shop führt aber doch derzeit noch ins Leere, da der Shop ja noch nicht existiert, bzw. noch offline ist?
     
  4. Anonymous

    Anonymous Mitglied

    Registriert seit:
    3. Januar 2022
    Beiträge:
    19
    Danke erhalten:
    0
    Danke vergeben:
    8
    Was die Ribbons betrifft, habe ich jetzt mal deinen Tipp befolgt und mit der rechten Maustaste geklickt und kam so auf etwas, was sich "Untersuchen" nennt? In dem vielen (für mich als Laien) kryptischen Text der dann auftauchte, habe ich nach "Ribbons" gesucht und bin so auf eine Einstellung gestoßen, von der ich vermute, dass es sich um die relevante Formatierung handelt. Da geht es um "Padding", und es sieht so aus, als wäre von Gambio nach oben ein Abstand von 2 px, nach unten aber 0px angelegt. Da ich an diesen Standardeinstellungen des Malibu-Themes bisher nichts geändert habe, hat das aber doch vermutlich einen Grund, dass das so eingestellt ist? Wie gesagt, ich habe null Plan von CSS und wüsste auch gar nicht, wie und wo ich das ändern könnte, um auszuprobieren, ob es daran liegt. Hier einmal ein Screenshot der angezeigten Infos:

    [​IMG]


    Danke vielmals, ich habe die Einstellung für die Texthöhe im SE gefunden, Problem 2 konnte ich so nun tatsächlich beheben! :)
     
  5. Dominik Späte

    Dominik Späte Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2018
    Beiträge:
    930
    Danke erhalten:
    801
    Danke vergeben:
    300
    Ist ggf. ein Zoom aktiv? Mit 80 oder 90% Zoom sieht es bei mir auch so aus wie auf den Screenshots. Mit 100% passt es. Bei Linux oder Windows einfach mal Strg + 0 (null) drücken im Browser-Fenster.
     
  6. Anonymous

    Anonymous Mitglied

    Registriert seit:
    3. Januar 2022
    Beiträge:
    19
    Danke erhalten:
    0
    Danke vergeben:
    8
    Danke, Dominik - ist aber kein Zoom drin, steht auf 100% im Browser. Ganz im Gegenteil, wenn ich auf 80 oder 90% zoome, steht die Schrift genau mittig. Gehe ich dann wieder auf 100% rutscht sie wieder an den unteren Rand. Ich arbeite am Mac und es passiert sowohl in Safari, als auch in Chrome. Und auch in der mobilen Darstellung am Handy und iPad sitzt die Schrift am unteren Rand des Ribbons.

    Und wie gesagt, wenn ich den Malibu Demo-Shop im Browser aufrufe (den unter demo.gambio-shop.de) dann ist da das gleiche Problem, habe gerade mal am Handy getestet, und tatsächlich steht die Schrift da auch so "bodenlastig" im Ribbon - es scheint also nicht spezifisch an meinem eigenen Shop und den dortigen Einstellungen zu liegen.
     
  7. Anonymous

    Anonymous Mitglied

    Registriert seit:
    3. Januar 2022
    Beiträge:
    19
    Danke erhalten:
    0
    Danke vergeben:
    8
    #7 Anonymous, 22. Januar 2022
    Zuletzt bearbeitet: 22. Januar 2022
    So, noch einmal ich. Jetzt habe ich noch einmal herumprobiert und es scheint an der Font-Auswahl zu liegen. Wenn ich im StyleEdit bei den "Grundlagen" die Roboto auswähle und 14px für die Textgröße vorgebe, sitzt alles zentriert. Sobald ich entweder den Font ändere, oder die Textgröße auch nur um 1px verändere, verrutscht alles. Bin ich denn als Cloudnutzer wirklich gezwungen, eine einzige universelle Schrift für alle wesentlichen Elemente der Seite zu nutzen? Wäre es nicht evtl. möglich, für die Ribbons (oder die Menüs in der Navigation) eine andere Schrift als für den Fließtext auszuwählen, so wie ich es für die Headlines auch über die individuelle Schriftanpassung machen kann? Falls ja, wie macht man das? Im StyleEdit finde ich diese Möglichkeit nicht, oder ich bin blind.
     
  8. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    18. August 2021
    Beiträge:
    581
    Danke erhalten:
    62
    Danke vergeben:
    254
    #8 Anonymous, 17. Februar 2022
    Zuletzt bearbeitet: 17. Februar 2022
    Ja, sieht auf einigen Gambio-Seiten wirklich nicht schön aus. Oft ein Versatz des Schriftzugs SOLD OUT zum farbigen Hintergrund nach unten.

    Besser wird's, wenn man die Formatierung des umgebenen Divs in den <span> legt.

    Ich habs so gemacht wie unten angegeben, allerdings ohne Radius - den kann man ja noch dazu stylen.

    // DIV
    .ribbons > .ribbon-sold-out {
    background-color: transparent;
    }
    // SPAN
    .ribbons > .ribbon-sold-out span {
    color: #fff;
    background-color: #474747;
    padding: 3px 7px 3px 7px;
    }

    Betrifft aber nur erstmal das SOLD OUT Ribbon - andere Ribbons nutze ich nicht.
     
  9. Anonymous

    Anonymous Mitglied

    Registriert seit:
    3. Januar 2022
    Beiträge:
    19
    Danke erhalten:
    0
    Danke vergeben:
    8
    Nur verstehe ich als Gambio-Laie überhaupt nicht, wo und wie ich in meinem Cloud Shop an die jeweilige CSS komme und ggf. ändern könnte?
     
  10. Anonymous

    Anonymous Mitglied

    Registriert seit:
    3. Januar 2022
    Beiträge:
    19
    Danke erhalten:
    0
    Danke vergeben:
    8
    Dass ich keinen blassen Schimmer habe würde ich nicht sagen, denn ich habe durchaus schon kleinere Websites mit HTML und CSS gestaltet und angelegt. Diese StyleSheet Geschichten waren Bestandteil des Design-Studiums, aber das ist 15 Jahre her, und sicher fehlt da inzwischen Routine (und der aktuelle Kenntnisstand ist vermutlich auch nicht ganz Up-to-Date) – doch bisher habe ich mir meist ganz gut helfen können.

    Bei Gambio jedoch, zumindest in meiner Cloud-Lösung, habe ich nun das Problem, dass ich teils einfach nicht weiß wo die CSS für bestimmte Elemente überhaupt hinterlegt sind. Da ich nur die Vorgehensweise über Code-Editoren und FTP kenne, wo ich den gesamten Code für die jeweilige Seite komplett vor mir sehe, sind für mich diese WYSIWYG Oberflächen (zumindest die, die nicht eine HTML-Ansicht parallel zur Verfügung stellen) immer "böhmische Dörfer".

    Zu Gambio habe ich beide angebotenen Webinars mitgemacht und mir inzwischen Dutzende Videos angesehen, aber wo und wie ich im Cloudshop gewisse Dinge (außerhalb des StyleEdit) per CSS selber ändern/anpassen kann, wurde da nirgendwo beantwortet. Und unter den drei Punkten die du wohl meinst, erscheint bei nur ein komplett leeres Feld, kein vorhandener CSS-Code für spezifische Elemente, den ich mir anschauen und ggf. modifizieren könnte. Wenn ich da nun etwas hineinschreibe, fügt das doch nur Code hinzu, anstatt ihn zu verändern oder zu ersetzen?
     
  11. Anonymous

    Anonymous Mitglied

    Registriert seit:
    3. Januar 2022
    Beiträge:
    19
    Danke erhalten:
    0
    Danke vergeben:
    8
    Auch zu diesem Thema: Ein dickes "Dankeschön" für deine Zeit und deine Geduld, du hast mir mit den Infos deutlich weiter geholfen! ;-)