Farbe der Schrift (Artikelnummer & Eigenschaften)

Thema wurde von Anonymous, 23. Mai 2021 erstellt.

  1. Anonymous

    Anonymous Mitglied

    Registriert seit:
    21. April 2021
    Beiträge:
    18
    Danke erhalten:
    0
    Danke vergeben:
    8
    Hallo,

    ich bin leider nach wie vor blutiger Anfänger.... und ich würde gerne auf der Produktseite, als Beispiel
    ((Link nur für registrierte Nutzer sichtbar.)) die Farbe der Artikelnummer ändern da diese sehr schlecht lesbar ist.

    Ebenso die durch Artikeleigenschaft erstellten "Auswahlboxen" wie Größe, Anzahl usw. dessen Schrift ebenfalls grau ist. Leider finde ich im StyleEdit keine Einstellmöglichkeit hierfür...

    In einem anderen Beitrag hier habe ich etwas von Firebug gelesen, als Hilfe, den richtigen CSS Bereich zu finden.

    Kann man die von mir gewünschten Änderungen nur per CSS vornehmen ?

    Vielen Dank für eure Hilfe und frohe Pfingsten !
     
  2. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    ja, das geht nur per css.

    für die Artikelnummer:
    Code:
    product-info .product-model {
        color: #DeineFarbe;
    }
    Die Links zu den Lieferbedingungen bei der Lieferzeit und unter dem Preis solltest Du auch ändern.
    Das sollte aber die normale Linkfarbe sein, die Du im Style Editor ändern kannst.

    Den Artikelnamen kann man auch schwer lesen, der sollte größer.
     
  3. Anonymous

    Anonymous Mitglied

    Registriert seit:
    21. April 2021
    Beiträge:
    18
    Danke erhalten:
    0
    Danke vergeben:
    8
    Hallo Barbara,

    danke für deine schnelle Antwort ! Wenn ich dich richtig verstehe klicke ich im StyleEdit auf CSS/bearbeiten und füge deine Codezeilen ein ?

    Danke für Anregungen, gebe dir Recht. Muss mal schauen wie ich das geändert bekomme (Größe Artikelname)

    Wenn ich die Farbe der Links ändere, ändert es sich ja auch in der Widerrufsbelehrung usw.
    Ich müsste eine Farbe finden, die für beides passt.
     
  4. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Ja.
    Das "DeineFarbe" musst du natürlich noch durch Deinen Farbcode ersetzen :)

    Eine Möglichkeit wäre auch, nicht die Textfarben, sondern den Hintergrund zu ändern.
    vielleicht die Holzmaserung als generellen Hintergrund und in dem Details-Feld lieber etwas einfarbiges....
     
  5. Anonymous

    Anonymous Mitglied

    Registriert seit:
    21. April 2021
    Beiträge:
    18
    Danke erhalten:
    0
    Danke vergeben:
    8
    Soooo.. ich war im StyleEdit und habe deine Code oben bei CSS eingefügt. (Artikelnummer)

    Leider keine Veränderung, habe mein braun getestet und schwarz :(

    Auch finde ich die Einstellungen bezüglich der Größe des Artikelnamens nicht.

    Ich hatte die Holzmaserung mal als Hintergrund, gefiel mir nicht. Du hast übrigens einen sehr schönen Shop ! :)

    Und danke das du dir die Zeit nimmst mir zu helfen ! :)
     
  6. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Ich sehe Deinen Code nicht.... was genau hast Du im eigenen css eingefügt?
     
  7. Anonymous

    Anonymous Mitglied

    Registriert seit:
    21. April 2021
    Beiträge:
    18
    Danke erhalten:
    0
    Danke vergeben:
    8
    product-info .product-model {
    color: #443937;
    }
     
  8. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    setzte mal bitt einen Punkt an den Anfang, vor product-info
    Den habe ich offenbar nciht mit kopiert :oops:
     
  9. Anonymous

    Anonymous Mitglied

    Registriert seit:
    21. April 2021
    Beiträge:
    18
    Danke erhalten:
    0
    Danke vergeben:
    8
    .product-info .product-model {
    color: #443937;
    }

    Tut sich leider garnichts :(
     
  10. Kai Stejuhn

    Kai Stejuhn Beta-Held

    Registriert seit:
    26. September 2014
    Beiträge:
    1.403
    Danke erhalten:
    707
    Danke vergeben:
    92
    Da muss noch ein !important hinter, also

    product-info .product-model {
    color: #443937 !important;
    }
     
  11. Anonymous

    Anonymous Mitglied

    Registriert seit:
    21. April 2021
    Beiträge:
    18
    Danke erhalten:
    0
    Danke vergeben:
    8
    Jetzt hat es funktioniert, vielen dank euch ! Könntet ihr mir auch noch sagen wie der Code für die Artikeleigenschaftensboxen (Anzahl, Größe) usw. wäre, die Schrift ist ja auch grau. Und wie ich die Größe des Artikelnamens ändern kann ?

    Vielen Dank im Vorraus ! :)
     
  12. Kai Stejuhn

    Kai Stejuhn Beta-Held

    Registriert seit:
    26. September 2014
    Beiträge:
    1.403
    Danke erhalten:
    707
    Danke vergeben:
    92
    Für den Artikelnamen musst Du mal
    Code:
    .product-info-title-desktop.hidden-xs.hidden-sm {
        font-size: ??px;
    }
    probieren. Für die ?? setzt Du Deine gewünschte Größe ein, wenn das nicht klappt dann zwischen "px" und ";" wieder das " !important" eintragen. Natürlich alles ohne ".

    Artikeleigenschaftenbox habe ich gerade nicht zur Hand.
     
  13. Anonymous

    Anonymous Mitglied

    Registriert seit:
    21. April 2021
    Beiträge:
    18
    Danke erhalten:
    0
    Danke vergeben:
    8
    Vielen Dank !!!! Finde es wirklich toll, wie einem hier im Forum immer geholfen wird

    Bezüglich der Artikeleigenschaftsboxen werde ich sonst nochmal weiter suchen, oder es findet sich noch jemand ! :)
     
  14. Anonymous

    Anonymous Mitglied

    Registriert seit:
    21. April 2021
    Beiträge:
    18
    Danke erhalten:
    0
    Danke vergeben:
    8
    Fast vergessen, statt immer fragen zu müssen, wo bekommt man diese Codes her ?

    Ok gerade gesehen, Kai Stejuhn, Sie sind ja vom Fach :)
     
  15. Kai Stejuhn

    Kai Stejuhn Beta-Held

    Registriert seit:
    26. September 2014
    Beiträge:
    1.403
    Danke erhalten:
    707
    Danke vergeben:
    92
    Im Forum duzen wir uns alle, da sind wir nicht so förmlich.

    Wenn man mit der Maus über das gewählte Element (Artikelname) geht, dann die rechte Maustaste drückt und Untersuchen auswählt, dann wird ein Fenster geöffnet, wo die Codes stehen. Dort kann man dann auch ein wenig probieren und andere Codes eingeben, ohne dass das den Shop verändert. Hat man dann den passenden Code, dann kann man den einfach kopieren und ins CSS eintragen.
     
  16. Anonymous

    Anonymous Mitglied

    Registriert seit:
    21. April 2021
    Beiträge:
    18
    Danke erhalten:
    0
    Danke vergeben:
    8
    Achso, ok, ich bin Sebastian :)

    Das werde ich mal versuchen, vielleicht bekomme ich die Artikeleigenschaftsboxen ja abgeändert,
    habe nämlich leider noch nichts darüber gefunden wie es funktioniert.
     
  17. Kai Stejuhn

    Kai Stejuhn Beta-Held

    Registriert seit:
    26. September 2014
    Beiträge:
    1.403
    Danke erhalten:
    707
    Danke vergeben:
    92
    Hast Du denn einen Artikel mit Eigenschaften, dann gib mal die URL.
     
  18. Anonymous

    Anonymous Mitglied

    Registriert seit:
    21. April 2021
    Beiträge:
    18
    Danke erhalten:
    0
    Danke vergeben:
    8
    Oh ja gerne, vielen dank. Als Beispiel : (Link nur für registrierte Nutzer sichtbar.)
     
  19. Anonymous

    Anonymous Mitglied

    Registriert seit:
    21. April 2021
    Beiträge:
    18
    Danke erhalten:
    0
    Danke vergeben:
    8
    Ich habe das jetzt mal mit Firebug aufgerufen... Die Schriftfarbe wird in einem Abschnitt erwähnt, sowie die Größe.

    .form-control, .input-text usw. Nur wie mache ich daraus dann die Codezeile zum Ändern der Schriftfarbe ?

    Interessant ist das ja alles, aber für mich als Anfänger wirklich nicht einfach zu verstehen, sorry wenn ich nerve... :(
     
  20. Kai Stejuhn

    Kai Stejuhn Beta-Held

    Registriert seit:
    26. September 2014
    Beiträge:
    1.403
    Danke erhalten:
    707
    Danke vergeben:
    92
    Eigentlich nimmt man nur den Bezeichner (z. B. .form-control) und gibt dann den entsprechenden Code für die Schriftfarbe (z. B. color:red).

    HTML-Elemente (Input, Select, H1) werden einfach so geschrieben wie sie dort stehen. Klassen (z. B. form-control) werden mit einen Punkt vorweg geschrieben, IDs werden mit # vorweg bezeichnet. Die Eigenschaften (z. B. font-size, color) werden in geschweiften Klammern durch Semikolon getrennt eingetragen. Wobei die Bezeichnung (color) und der Wert (red) durch einen Doppelpunkt getrennt werden.

    Daraus ergibt sich dann z. B. für die Schriftfarbe der Klasse "form-control" folgender Code:
    Code:
    .form-control{color:red;}
    Aber immer darauf achten, wenn man einen Eigenschaft einer Klasse oder eines Elements ändert, dann gilt das immer im ganzen Shop. Also wenn man die Schriftgröße für die Überschrift H1 ändert, dann werden alle H1-Überschriften mit der anderen Schriftgröße angezeigt.