Button Design und Farbanpassung

druckdiscount

Aktives Mitglied
22. Februar 2010
51
0
Hallo,

ich kenn mich mich Template usw. nicht so sehr aus aber kann mir vieleicht jemand sagen
wie ich meine buttons also Z.b. "In den Warenkorb" oder "Zur Kasse" bearbeiten kann?
Hierbei geht es einfach nur rein um Schrift und Hintergrundfarbe des Buttons.

Wo finde ich den die Buttons?
Wie kann ich Sie bearbeiten?
Ich nehm an das die Button nicht als Bild hinterlegt sind.

Würde mich um eine kurze und einfache Schritt für Schritt Antwort
sehr freuen 🙂

Gruß
Stefan
 

martinwolf

Offizieller Service Partner
SPBanner
6. September 2012
3.716
355
AW: Button Design und Farbanpassung

Hallo,

ich kenn mich mich Template usw. nicht so sehr aus aber kann mir vieleicht jemand sagen
wie ich meine buttons also Z.b. "In den Warenkorb" oder "Zur Kasse" bearbeiten kann?
Hierbei geht es einfach nur rein um Schrift und Hintergrundfarbe des Buttons.

Wo finde ich den die Buttons?
Wie kann ich Sie bearbeiten?
Ich nehm an das die Button nicht als Bild hinterlegt sind.

Würde mich um eine kurze und einfache Schritt für Schritt Antwort
sehr freuen 🙂

Gruß
Stefan

Sämtliche optische Anpassungen machst du über die theme.css die du innerhalb des verwendetetn Theme Verzeichnisses findest.

Dort dann eine Regel wie etwa einbinden:

Code:
input[type="submit"], button {
  background: #ff00ff;
  color: #ff0000;
}
 

reddwarf

Sehr aktives Mitglied
1. Oktober 2009
1.561
6
AW: Button Design und Farbanpassung

Genau, so macht man das.
Weiss noch jemand, wie man die Buttons in der Artikelliste und im Miniwarenkorb anpasst?
 

martinwolf

Offizieller Service Partner
SPBanner
6. September 2012
3.716
355
AW: Button Design und Farbanpassung

Genau, so macht man das.
Weiss noch jemand, wie man die Buttons in der Artikelliste und im Miniwarenkorb anpasst?

Für den in der Artikeldetailseite:

Code:
.submit, input.submit[type="submit"], button.submit[type="submit"], button.submit[type="button"] {

}

Warenkorbmini:
Code:
input[type="submit"], button[type="submit"], button[type="button"] {

}
 

reddwarf

Sehr aktives Mitglied
1. Oktober 2009
1.561
6
AW: Button Design und Farbanpassung

Warenkorbmini und Artikelliste klappen schon mit dem ersten code, danke!
Nur :hover klappt noch nicht.

.submit:hover, input[type="submit"].submit:hover, button[type="submit"].submit:hover, button[type="button"].submit:hover, input[type="submit"].submit:hover, button[type="submit"].submit:hover, button[type="button"].submit:hover {
 

martinwolf

Offizieller Service Partner
SPBanner
6. September 2012
3.716
355
AW: Button Design und Farbanpassung

Warenkorbmini und Artikelliste klappen schon mit dem ersten code, danke!
Nur :hover klappt noch nicht.

.submit:hover, input[type="submit"].submit:hover, button[type="submit"].submit:hover, button[type="button"].submit:hover, input[type="submit"].submit:hover, button[type="submit"].submit:hover, button[type="button"].submit:hover {

Weil deine Selektoren nicht treffen.

.submit:hover, input[type="submit"].submit:hover, button[type="submit"].submit:hover, button[type="button"].submit:hover, input[type="submit"].submit:hover, button[type="submit"].submit:hover, button[type="button"].submit:hover {

}

Schmeiß das rote, fette raus, dann gehts. Zudem definierst du doppelt.
 

reddwarf

Sehr aktives Mitglied
1. Oktober 2009
1.561
6
AW: Button Design und Farbanpassung

Super!
Vielen Dank!
Funktioniert nun alles.
 

casim

Sehr aktives Mitglied
26. Juni 2012
5.934
10
AW: Button Design und Farbanpassung

Sämtliche optische Anpassungen machst du über die theme.css die du innerhalb des verwendetetn Theme Verzeichnisses findest.

Die Aussage ist schlichtweg falsch, auch wenn sie rein technisch zum Ergebnis führt. Ein SP sollte sich aber ... imho ... an die Vorgaben von JTL halten.

1. Das Tiny-Theme HAT gar keine theme.css und würde auch, selbst wenn man eine anlegt, diese nicht laden

2. Die übrigen Standard-Themes haben zwar eine theme.css, aber nach den JTL-Vorgaben sollte in dieser aufgrund der Update-Sicherheit KEINE Änderungen drin erfolgen

Der richtige Weg ist ausschließlich durch Nutzung eines benutzerdefinierten Theme
 

martinwolf

Offizieller Service Partner
SPBanner
6. September 2012
3.716
355
AW: Button Design und Farbanpassung

Die Aussage ist schlichtweg falsch, auch wenn sie rein technisch zum Ergebnis führt. Ein SP sollte sich aber ... imho ... an die Vorgaben von JTL halten.

1. Das Tiny-Theme HAT gar keine theme.css und würde auch, selbst wenn man eine anlegt, diese nicht laden

2. Die übrigen Standard-Themes haben zwar eine theme.css, aber nach den JTL-Vorgaben sollte in dieser aufgrund der Update-Sicherheit KEINE Änderungen drin erfolgen

Der richtige Weg ist ausschließlich durch Nutzung eines benutzerdefinierten Theme

Man, hab ich jetzt wieder den Erbsenzählmodus aktiviert ja? Das nächste Mal verweis ich einfach auf die Template Wiki von JTL dann kann sich jeder selbst seine Infos rauslesen. Verzeih mir wenn ich nicht jedesmal akribisch und zu 100% korrekt meine Sätze formuliere. Das nächste Mal werde ich nochmals darauf hinweisen, das man doch bitte ausschließlich mit custom Theme arbeiten soll. Danke für den Hinweis!
 

druckdiscount

Aktives Mitglied
22. Februar 2010
51
0
AW: Button Design und Farbanpassung

Hey hey, also herzlichen Dank für die Antworten, ich werd mal versuchen was ich selbst auf die Beine stellen kann 🙂

Noch eines:
Ich stell meine Fragen immer DETAIL genau und um später unnötiges geschreibsel sich zu ersparen wäre
es sehr hilfreich wenn EXAKT auf diese Fragen eingegangen wird.
Das man einige Farbanpassungen im Theme.css macht weiß ich z.B. selbst, ich habe aber speziel nach den "Buttons"
gefragt und wenn ich Buttons meine dann mein ich ALLE in JTL Shop betreffente buttons.
Ist eigentlich Logisch oder? 🙂
Wenn du nach einem Wetter in Nürnberg (Bayern) fragst dann möchtest du sicher nicht das Wetter für ganz Bayern
wissen oder?

Es ist nicht böse gemeint aber endweder man KANN exakt auf die Fragen antworten oder man antwortet garnicht.
Weil in einem öffentlichen Chat rumzudiskutieren ist nicht hilfreich!
 

druckdiscount

Aktives Mitglied
22. Februar 2010
51
0
AW: Button Design und Farbanpassung

Soweit funktioniert es auf der Artikelübersicht aber auf der Artikeldetailseite und den nderen weiteren Seiten wo der Kunde sich anmelden muss usw.
Funktioniert das nicht. Auch wenn ich den Code einfüge:


.submit, input.submit[type="submit"], button.submit[type="submit"], button.submit[type="button"] { }


input[type="submit"], button[type="submit"], button[type="button"] { }

Also kan mir vieleicht jemand sagen wie ich die übrigen Buttons Designmäßig anpasse? 🙂
Es geht immer noch nur rein um Schrift und Hintergrundfarbe.
 

druckdiscount

Aktives Mitglied
22. Februar 2010
51
0
AW: Button Design und Farbanpassung

Achja wenn ich jetzt die Buttonschrift weiß macht verschwindet beim Artikeldetailansicht die schrift von Z.b: "Frage zum Produkt" oder "Auf den Wunschzettel"
Also nix ist es.
 

martinwolf

Offizieller Service Partner
SPBanner
6. September 2012
3.716
355
AW: Button Design und Farbanpassung

ich habe aber speziel nach den "Buttons"
gefragt und wenn ich Buttons meine dann mein ich ALLE in JTL Shop betreffente buttons!

Und genau da liegt das Problem, dass das eben mal nicht so geht ohne die Buttons gezielt anzusteuern, weil: Sämtliche Buttons wie Compare oder Wishlist haben eigene Klassen, die die globalen Settings nochmals überschreiben. Zudem ist es ebenfalls so, dass auch ein button eine Klasse button oder submit haben kann, so wie etwa der Warenkorb Button in den Artikeldetails. Was schonmal Schwachsinn ist in meinen Augen, aber gut. Das erschwert das ganze unnötig. Das heißt, entweder du arbeitest auf den globalen Selektoren wie input[type="submit"], button etc. mit der Zusatzdeklaration !important, wovon ich aber abrate, oder du musst dir wirklich die Mühe machen und immer die genauen Selektoren ansprechen. Daher sei es mir sicherlich verziehen, wenn ich nicht auf Anhieb alle deine Buttons als Beispiel vorgegeben habe.
 

Ähnliche Themen