Ribbon zweckentfremden

Thema wurde von Anonymous, 18. Januar 2022 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    364
    Danke erhalten:
    153
    Danke vergeben:
    125
    Hallo,

    ich möchte den Ribboninhalt vom Ribbon "TOP" zweckentfremden und statt dem "TOP" ein Downloadsymbol einbinden.
    Zusatzinfo: Daneben habe ich noch ein weiteres Ribbon mit z.B. "40%".
    Ich habe den folgenden CSS-Code eingesetzt und es funktioniert auch fast gut.

    .ribbons > .ribbon-recommendation {
    border-radius: 5px;
    content: url(bildlink.png);
    }

    Dadurch wird der Inhalt "TOP" vom kleinen Bild ersetzt.
    Aber die Ribbons werden dann nicht mehr nebeneinander sondern untereinander angezeigt.
    Und was noch viel schlimmer ist: Die Form vom Ribbon "TOP" ändert sich.

    Siehe Screenshot:
    [​IMG]

    Was müsste ich hier noch beachten?

    Vielen Dank im Voraus für sämtliche Hilfe.
     
  2. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    30. Oktober 2015
    Beiträge:
    2.349
    Danke erhalten:
    573
    Danke vergeben:
    506
    #2 Anonymous, 18. Januar 2022
    Zuletzt bearbeitet: 5. März 2023
    .
     
  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    364
    Danke erhalten:
    153
    Danke vergeben:
    125
    #3 Anonymous, 19. Januar 2022
    Zuletzt bearbeitet: 23. Juni 2023
    Das Problem habe ich jetzt lösen können.
    Ich hab nen Testshop erstellt und den kompletten CSS Code übernommen.
    Seltsamerweise wurden die Ribbons dort nicht verschoben. So habe ich in der Konsole nach Unterschieden gesucht und einen gefunden, der wohl für den Fehler verantwortlich war.
    Ich habe folgenden Code noch hinzugefügt:

    .ribbons > div {
    display: inline-block;
    }

    Die Größe des Symbols bzw. der Bildes spielt gar keine Rolle, denn es wird i.wie automatisch auf die richtige Größe skaliert. Erklären kann ich mir das nicht, aber es funktioniert jetzt. :)

    Vielen Dank für Deine Bemühung!