Auflistungs Button/Grafik ändern oder inzufügen

Thema wurde von Anonymous, 2. August 2023 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    14. Januar 2017
    Beiträge:
    205
    Danke erhalten:
    3
    Danke vergeben:
    78
    Hallo Zusammen,
    ich möchte einen anderen "Punkt" haben bei Auflistungen im Text.
    Wo kann ich das hineinladen?
    Regulär heißt sowas BULLET POINT.
    Aber da finde ich nix im File Manager.
    Quasi sowas wie hier.

    Danke für den einen bestimmten Vorschlag.

    Grüße Alexandra
     

    Anhänge:

  2. Dominik Späte

    Dominik Späte Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2018
    Beiträge:
    1.082
    Danke erhalten:
    931
    Danke vergeben:
    338
    CSS:
    Code:
    ul.check-list {
        list-style: none;
    }
    
    ul.check-list li {
        text-indent: -1em;
    }
    
    ul.check-list li::before {
        content: "\f058";
        font-family: FontAwesome;
        padding-right: 5px;
        font-size: 1.1em;
    }
    HTML:
    Code:
    <ul class="check-list">
       <li>Nummer 1</li>
       <li>Nummer 2</li>
       <li>Nummer 3</li>
    </ul>
    Ergebnis:
    check-list.png
     
  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    14. Januar 2017
    Beiträge:
    205
    Danke erhalten:
    3
    Danke vergeben:
    78
    Guten morgen, vielen Dank. Habe ich gleich ausprobiert, allerdings kommen keine Kreise, sondern Kästchen.
    Ich habe das CSS hochgeladen
    danach die HTML eingefügt.
    dann kam das..
    Hab ich was falsch gemacht?
     

    Anhänge:

  4. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    14. Januar 2017
    Beiträge:
    205
    Danke erhalten:
    3
    Danke vergeben:
    78
    Danke, klappt leider nicht. Wird kein Kreis mit Haken draus.
    Hab aber noch eine andere Lösung versucht, da wird es nur ein gefüllter Punkt
    Sicher passt das irgendwo nicht zusammen. Schade.
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.759
    Danke erhalten:
    704
    Danke vergeben:
    254
    #5 Anonymous, 6. August 2023
    Zuletzt bearbeitet: 6. August 2023
    versuche es hiermit:

    ändere diese Zeile:

    Code:
    font-familiy: "Font Awesome 5 Free";
    damit ist der Kreis leer.



    und wenn du diese Zeile darunter schreibst ist der Kreis ausgefüllt:
    Code:
    font-weight: 900;
     
  6. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    14. Januar 2017
    Beiträge:
    205
    Danke erhalten:
    3
    Danke vergeben:
    78
    hallo und vielen Dank.
    Rund ist es immer noch nicht.
    Es ist jetzt Eckig mit X drin :)

    Ich hab keinen Schimmer was da falsch läuft.

    ul.check-list {
    list-style: none;
    }

    ul.check-list li {
    text-indent: -1em;
    }

    ul.check-list li::before {
    content: "\f058";
    font-family: FontAwesome 5 free;
    font-weight: 900;
    padding-right: 5px;
    font-size: 1.1em;
    }


    upload_2023-8-8_12-7-57.png
     
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    14. Januar 2017
    Beiträge:
    205
    Danke erhalten:
    3
    Danke vergeben:
    78
    das habe ich auch probiert. geht auch nicht.
    li.circle-checkmark::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    border: solid 8px #f9dd94;
    border-radius: 8px;
    }
    aber dann sind es nur wieder "gewöhnliche Punkte"
    Auch keine Kreise.
     
  8. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    14. Januar 2017
    Beiträge:
    205
    Danke erhalten:
    3
    Danke vergeben:
    78
    das ist der 2. code. auch nix
     

    Anhänge:

  9. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.759
    Danke erhalten:
    704
    Danke vergeben:
    254
    Schreib die Zeile genau so:

     
  10. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    14. Januar 2017
    Beiträge:
    205
    Danke erhalten:
    3
    Danke vergeben:
    78
    #10 Anonymous, 11. August 2023
    Zuletzt bearbeitet: 11. August 2023
    Guten morgen,
    habe ein Ticket geöffnet, jetzt wurde es korrigiert.
    Da war einiges mehr zu machen ...
    Sie sagten: der Code wäre ungenau ?!
    Das wäre die Lösung:


    ul.check-list, .gx-content-zone-col ul li {

    list-style: none;

    }

    ul.check-list li {

    text-indent: -1em;

    }

    .gx-content-zone-col ul li::before, #footer .inside .row .footer-col-1

    .panel .panel-body li a:before, #footer .inside .teaser-group-three-squares

    .footer-col-1 .panel .panel-body li a:before, #footer .inside

    .teaser-group-2-cols-big-image .footer-col-1 .panel .panel-body li a:before

    {

    list-style: none;

    content: "\f058";

    font-family: Font Awesome 5 Free;

    font-weight: 900;

    padding-right: 5px;

    font-size: 1.1em;

    }



    Da es dann auch im Footer war, bekam ich eine reduzierte Version, die man mir dann installiert hat:





    .page-index .gx-content-zone-col ul li::before {

    text-rendering: optimizeLegibility;

    list-style: none;

    content: "\f058";

    font-family: "Font Awesome 5 Free";

    padding-right: 5px;

    font-size: 14px;

    }


    "die Farbe des Symbol hat immer die Farbe des Textes dahinter. Wenn das anders sein soll, muss color: #fff; (z.B. für weiß) im CSS hinterlegt werden. "


    Jetzt muss ich das noch schauen WO und dann habe ich es

    Vielen Dank. Alexandra
     
  11. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    14. Januar 2017
    Beiträge:
    205
    Danke erhalten:
    3
    Danke vergeben:
    78

    AHHH, jetzt erste verstanden-. :p
    Hat funktioniert. !
     
  12. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    14. Januar 2017
    Beiträge:
    205
    Danke erhalten:
    3
    Danke vergeben:
    78
    Das ist jetzt das Endprodukt und funktioniert.

    .page-index .gx-content-zone-col ul li::before {
    text-rendering: optimizeLegibility;
    list-style: none;
    content: "\f058";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 5px;
    font-size: 14px;
    color: #f9dd94;
    }
    upload_2023-8-11_8-31-7.png