Jump to content

Anpassung Schrift Grösse bei Varianten


Recommended Posts

Hallo Zusammen

 

Wie kann ich NUR die Schriftgrösse und Farbe der Variante anpassen?

class="control-label"

 

Bin noch nicht so stark in CSS habe aber ein Child Thema eingerichtet ... dort kann ich was eintragen aber was nur ...? 😉

Danke Hilfe

 

 

Anmerkung 2020-01-22 171041.png

Link to comment
Share on other sites

Meinst du, so wie du schreibst, die "Variante" oder den gelb markierten Text?

Auf jeden Fall findest du mit der in den meisten Browsern enthaltenen "Untersuchen"-Funktion heraus (Rechtsklick auf Element), wo du die entsprechenden CSS-Anweisungen findest und kannst Änderungen testen.

Link to comment
Share on other sites

Also ich kann nur den Text ändern indem ich in der theme.css

.product-actions .control-label {

    width: 100%;
    margin-bottom: .375rem;
    display: block;
    width: 100%;
    font-size: 22px;

}

die font-size hinzufüge. 22 ist natürlich viel zu groß aber ändert bei mir nur das.

Link to comment
Share on other sites

Du meinst deinen Browser und nicht Google oder? 🙂

Also wenn du nur das Wort "Variante" anders haben willst, geht das über:

.product-variants div:nth-child(1) .control-label {

    font-size: 22px;

}

Ist dann immer die erste Variante. Also in ausnahmslos jedem Produkt wird dann die erste Variante (egal welche das ist) groß geschrieben.

Link to comment
Share on other sites

Und wenn du nicht nur die erste Variante, sondern alle eventuellen Varianten (die Menge ist keine Variante) ansprechen willst, läßt du das div:nth-child(1) weg.

So etwas kann man gut in der "Untersuchen"-Funktion sehen und austesten, man muß sich freilich ein wenig mit der Thematik beschäftigen. Denn wir können dir hier zwar Hilfe zur Selbsthilfe geben, aber nicht für alles die individuellen Lösungen.

Link to comment
Share on other sites

gebt mir eine change ich begreifs irgendwann (war mehr im Netzwerk und Server zu Hause)

Sollte das so aus schauen ? (im Chrome (sorry oben Google geschrieben))

Mach noch was falsch ... (begreifs es ganz langsam langsam) 🙂

 

image.png.2307835ae55e9ffb0e21d2c36a74c3ac.png

Link to comment
Share on other sites

vor 8 Stunden schrieb see_k:

Sollte das so aus schauen ? (im Chrome (sorry oben Google geschrieben))

Auf deinem Schlüsselloch-Screenshot sieht man natürlich viel zu wenig, wichtig ist auch der Quelltext links sowie die Tag-Hierachie, die darunter angezeigt wird. Du mußt halt immer schauen, worauf sich eine Anweisung bezieht, die id product_actions ist zu umfassend während die id product_variants sich nur auf die (wenn nicht wie von Shad86 vorgeschlagen eingeschränkt auf alle) Varianten beschränkt.

Daß du die div-Beschränkung in der Untersuchen-Funktion dort einträgst, kann natürlich nicht funktionieren, das ist ja keine CSS-Regel. Wenn du an dieser Stelle aber font-size: 22px; einträgst siehst du direkt die Auswirkung (nämlich nicht nur auf die Varianten-Labels, sondern auch auf das Menge-Label).

Link to comment
Share on other sites

Wenn man etwas hier isoliert verändern will, dann kann das leicht gelöst werden.

Ich suche mit den gängigen Mitteln des jeweiligen Browsers die Class des zu ändernden Elements und erhalte dann die Angabe, wie diese benannt ist. Dann gehe ich als erste in das stylesheet (....css) und suche dort diese Class. Diese kopiere ich und füge diese dann (idealerweise direkt darunter) ein und verändere den Namen der Class, so dass sie eindeutig ist, also besser nicht mit irgendeinem oft verwendeten Namenszusatz, sondern etwas, das exklusiv von mir ist, um nicht versehentlich an anderer Stelle einen "Crash" zu produzieren.

Jetzt ändere ich die Class des zu ändernden Elements auf den Namen der neu entstandenen Class im Sytlesheet ab. Das wars dann eigentlich schon, jetzt ist sie isoliert und ich muss nicht bei jeder kleinen Änderung am Element suchen, ob dies an anderer Stelle auch noch was bewirkt hat.

Will ich einzelne Teile eines Elements ändern, muss eben dieser eine Teil im Template mit einer eigenen Class versehen werden.

Es ist nicht schwer, wenn man sich einmal damit befasst hat, allerdings empfehle ich gerade bei Designänderungen vorab ein Backup und die Suche nach den Classes im Template und Stylesheet an einer lokalen Shopkopie vorzunehmen, sich die Stellen zu notieren und erst dann im Liveshop die Änderungen vorzunehmen. Und geade hier ist Step By Step sehr ratsam.

Link to comment
Share on other sites

@see_k

Du solltest wirklich ausführen was genau du vor hast.

Ich habe auch einen 1.7er Shop und wenn ich den von mir geposteten Code einfüge wird nur die Bezeichnung der  ersten Variante größer.

Du kannst natürlich div:nth-child(1) aus meinen Code entfernen, dann werden alle Bezeichnungen der Varianten groß. Das hatten wir weiter oben, wolltest du aber nicht.

Wenn nur das groß wird, was du möchtest, kannst du danach anfangen anstatt der font-size, die Befehle ein zu tragen die du möchtest. Was genau das ist kannst du ergooglen oder wie gesagt, mehr Infos geben.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...