CSS Buttons

[christianwagner]

Hallo!

Wir haben das tpl_responsive template.

Ich fummel schon die ganze Zeit mit dem Inspektor und "Element untersuchen" an dem "in den warenkorb" button rum und komme nicht weiter

hätte gerne weißer hintergrund und dotted border

also ungefähr so:
---------------------
In den Warenkorb
---------------------

kann mir jemand sagen wo ich ansetzen muss?

Gruss
Chris

Linkback: https://www.modified-shop.org/forum/index.php?topic=38261.0

[Nooblike]

Das ist eigentlich nur eine Bild datei... müsstest im /templates/DEIN_TEMLATE/img/ finden

[christianwagner]

Hallo!

Da ist nur das einkaufswagen icon drin aber die button bestehen doch aus css

[Timm]

Im tpl_modiefied_responsive template ist da gar nichts mehr mit klassischen images in dem Button, wie es beim tpl_modified ist. Der Einkaufswagen wird aus der fontawesome bibliothek geladen.

Kann dir leider aber auch nicht wirklich helfen. Hast du mal versucht die Prozentzahlen bei den Farben auf 0 zu stellen, oder was mit Transparenz (opacity) ?

Gruß Timm

[awids]

Hier ist die Stelle, du du suchen solltest:

Code: CSS  [Auswählen]

/* Magenta Buttons */
.cssButtonColor2 {
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    border:1px solid #420e2e; /* hier dotted statt solid */
    text-decoration:none;
    /* nachfolgende Anweisungen, inkl. background-color:#742b58; */
    background:-moz-linear-gradient( center top, #742b58 15%, #53183c 90% );
    background:-ms-linear-gradient( top, #742b58 15%, #53183c 90% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#742b58', endColorstr='#53183c');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(15%, #742b58), color-stop(90%, #53183c) );
    background-color:#742b58;
    color:#ffffff;
    display:inline-block;
    text-shadow:-1px -1px 0px #000000;
     -webkit-box-shadow:inset 0px 1px 0px 0px #8f5477;
     -moz-box-shadow:inset 0px 1px 0px 0px #8f5477;
     box-shadow:inset 0px 1px 0px 0px #8f5477;
}
.cssButtonColor2:hover {
    background:-moz-linear-gradient( center top, #53183c 15%, #742b58 90% );
    background:-ms-linear-gradient( top, #53183c 15%, #742b58 90% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#53183c', endColorstr='#742b58');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(15%, #53183c), color-stop(90%, #742b58) );
    background-color:#53183c;
  color:#eee;
  text-decoration:none !important;
}

[christianwagner]

@awids

Danke. Jetzt hab ich es.

Wenn man das ganze Schritt für Schritt deaktiviert dann erklärt sich das einem besser

[Timm]

Könntest du die genaue Lösung hier posten, falls es irgendwann mal jemand gebrauchen könnte?

[christianwagner]

Naja ich weiß jetzt nicht ob mein Noob-Nichtwissen als Lösung durchgeht

Habe

.cssButtonColor2 und  .cssButtonColor2:hover {

in der stylesheet

alles entfernt und dann schaut der Button so aus und ich finde das passt besser zum Template als ein lila Button:

[ Für Gäste sind keine Dateianhänge sichtbar ]

Problem ist nur damit es im Shop ein einheitliches Button-Bild gibt sollte man die anderen auch alle ändern und ich habe gerade andere Prioritäten deswegen bin ich wieder zurück zum lila Button.