Schriftgrößen und Typen in Textboxen ändern

Thema wurde von patricialink, 15. Mai 2020 erstellt.

  1. patricialink

    patricialink Erfahrener Benutzer

    Registriert seit:
    17. Januar 2016
    Beiträge:
    49
    Danke erhalten:
    1
    Danke vergeben:
    15
    Hallo zusammen,

    keine Ahnung ob ich hier richtig bin oder aber z.B. besser in "StyleEdit"...
    Ich habe einen Cloud gehosteten Shop auf Basis von Malibu erstellt und frage mich jetzt, wie die Textfelder, die bereits in der Vorlage über Bilder gelegt wurden, formatiert werden können. In StyleEdit kann ich den Text ändern, ggf. auch über ein Auswahlfenster ein paar wenige Schriftgrößen auswählen oder einen Link hinterlegen, aber wie bekomme ich z.B. die große weisse Schrift auf schwarzem Hintergrund formatiert (1)? Oder die weissen Blöcke mit durchsichtiger Schrift (2)?
    Wenn ich im Contet den entsprechenden Inhalt unter Elemente -> StyleEdit-xyz123 ansehe kann ich zwar den Text ändern, aber ich finde dort auch keine Möglichkeit so zu formatieren. Die HTML Ansicht hilft auch nicht das Geheimnis zu lösen...
    Auch bei den "Shop Now -> " Links (3) frage ich mich, wie ich die Schrift größer/fetter bekommen kann und woher der Pfeil immer kommt, den man ansonsten weder im StyleEdit noch im Content nachvollziehen kann.

    Ich habe rudimentäre HTML Kentnisse, aber CSS war dann doch nach meiner Zeit, gabs im ARPANET noch nicht :D. Ach ja, der Shop ist im Moment offline, da er noch nicht gesellschaftsfähig (=rechtssicher und vollständig angepasst) ist.
     

    Anhänge:

  2. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Man ändert Schrift und Farbe eher weniger im HTML, sondern macht das über css.
    Dann macht man das nur einmal und nicht in jedem Link einzeln

    Der Pfeil ist dem Link angehängt.
    Wenn da kein Pfeil sein soll, dann dass ins eigne css eingeben:
    Code:
    .teaser-group-three-squares .widget-content > div a::before {
    display: none;
    }
    Wenn die Farbe des Links geändert werden soll, wäre der Code:
    Code:
    .teaser-group-three-squares .widget-content > div a {
        color: #DeinFabcode;
    }
    Die Größe und Schriftart geht über:
    Code:
    .teaser-group-three-squares .widget-content > div {
        font-size: DeineWunschpx;
        font-family: DeineWunschSchrift;
    }
    Der weiße Balken mit der transparenten Schrift ist im Bild, das wurde nicht nachträglich eingefügt.

    Zu Bild 1:
    da müsste ich genauer wissen, was Du eingetragen hast
    Wenn ich bei mir etwas eingebe, habe ihc immer einen transparenten Hintergrund.

    Css ist nicht so schwer :)
    Edge, Chrome und FF haben auch eine Funktion zum "Untersuchen", darüber findet man recht gut das css und kann gefahrlos testen, ob es sich da ändert wo man will.
    (Achtung: manchmal deckt ein Befehl mehrere Bereiche ab, da muss man etwas aufpassen.)

    Wenn es passt einfach nur die Änderung ins eigene css eintragen.
     
  3. patricialink

    patricialink Erfahrener Benutzer

    Registriert seit:
    17. Januar 2016
    Beiträge:
    49
    Danke erhalten:
    1
    Danke vergeben:
    15
    Hallo Barbara,

    vielen Dank, es fuktioniert!
    ES ging um (3). Ich habe den Code für Schriftgröße und Schriftart benutzt, dabei aber die Standardschrift (Fira Sans) genommen, da ich nicht wusste, ob ích den Teil des Codes einfach weglassen kann, und nur die Größe verändert. Da ich eine Schrift mit einem zweigeteilten Namen verwende musste ich die Schrift noch in Anführungszeichen setzen, dann hat es funktioniert.
    Zuerst war ich mir nicht sicher, ob ich auf der Seite irgendwie die entscheidende Stelle markieren muss, aber ich vermutete, dass ".teaser-group-three-squares" die richtige Stelle beschreibt und, wie Du angemerkt hast, bei mehrfachem Auftauchen zur Änderung an alle Stellen führt.

    Deinem Tipp folgend habe ich dann auf der Website mit "Element untersuchen" die geänderte Stelle untersucht und fand dann dort dies:
    <div id="textbox-0mvwmw2d0" class="gx-content-zone-row row teaser-group-three-squares">.
    Danach kam der Code mit zu den drei Spalten wie Ausrichtung etc. sowie die Texte mit den Links, die ich hinterlegt habe.
    Was ich im HMLT Text nicht gefunden habe ist, wo die neue Schriftgröße zu finden ist. Ich habe einfach mal nach font-size gesucht, aber im kompletten HTML Text wurde nichts gefunden. Wenn ich jetzt noch wüsste, wo sich das versteckt, wäre ich erstmal glücklich :)
    Das mit der durchsichtigen Schrift (2) ist einleuchtend, und die weisse Schrift auf schwarzem Grund (1) war so schon in der Vorlage, da habe ich nur den Text geändert, aber das ist kein echtes Problem...

    Falls sich jemand wundert, warum meine Postings manchmal nicht kurz und knapp sind ("Hat geklappt, prima, danke!") - ich ärgere mich jedesmal, wenn jemand einen Thread so oder mit "Habs gefunden", "Hab eine andere Lösung" oder ähnlich beendet und es eigentlich nicht so einfach war wie der Satz suggeriert, oder er die Lösung für sich behält. Manchmal hat derjenige dann doch weitere Probleme aus dem Weg geräumt, die der Leser auch wieder selbst lösen muss. Lieber ein, zwei Sätze zuviel als den entscheidenden wegzulassen :D
     
  4. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Du müsstest bei "Element Untersuchen" 2 Bereiche sehen:
    Einmal den html - Teil und einmal den css-Teil
    Ich habe das in Chrome unten und da sieht das so aus:
    Unbenannt.JPG

    links html -> rechts css
    wenn ich jetzt mit der Maus im html-Teil Zeilen nach oben oder unten gehe, ändert sich der markierte Bereich im Shop und das css-links.


    Ja, kannst Du.
    Man nimmt nur die Code-Zielen, die man ändert.

    Da bist du viel zu hoch.
    Klicke mit der rechten Maustaste auf das "Shop Now" und dann auf "Element Untersuchen", dann müsstest Du fast den passenden Bereich haben.
     
  5. patricialink

    patricialink Erfahrener Benutzer

    Registriert seit:
    17. Januar 2016
    Beiträge:
    49
    Danke erhalten:
    1
    Danke vergeben:
    15
    Danke, hat mir echt weiter geholfen!
    Ich hatte damit gemeint, dass das die Stelle ist, an der Dein Code ansetzt (.teaser-group-three-squares), damit an den drei Textelementen mit den Links (ehemals "shop now") Schriftart und Größe geändert werden. Zuerst die entsprechende Stelle untersuchen, und dann die übegeordnete Stelle suchen, die für das Format zuständig ist. Hab ich mich wahrscheinlich etwas unklar ausgedrückt...