CSS Button

Diskussionen rund um die Templates (incl. Smarty)
Antworten
rieste
Beiträge: 134
Registriert: Fr 18. Mär 2011, 07:54
Shop Version: ECB 1.08 leider

CSS Button

Beitrag von rieste »

Hallo,

ich habe bei Webs Template seit einigen Tagen das Button Layout rein über die CSS probiert.
Leider gibt es zwei "baustellen" wo ich nicht genau weiß was die beste Lösung ist.

1.: bei der Deklaration der Klassen ist in der Vorlage der Button.css immer die Gruppe hinterlegt.
z.b.: .button_buy_now {
background-position: 0px -24px;
padding-left: 16px;
}


damit die CSS funktioniert gehört es aber geändert
.button.button_buy_now {
background-position: 0px -24px;
padding-left: 16px;
}

Hier scheint in der Button HTML Deklaration was schief gelaufen zu sein.

2. Die Formatierung einzelner Buttons gelingt nicht da immer wieder ein Image (vermutung) hinterlegt ist.
siehe Bild.
Bild
Auch hier habe ich durch Änderung einiger Optionen keine Lösung gefunden.
Mein Seite: https://www.rieste.com
Mein Lichtshop https://licht365.com
yogi
Administrator
Beiträge: 292
Registriert: Do 6. Mai 2010, 14:16
Shop Version: die aktuelle
Wohnort: Köln
Kontaktdaten:

Re: CSS Button

Beitrag von yogi »

Moin,

das Image das hinterlegt wird ist /templates/webs/buttons/img/bg.gif

Die Option USE_HTML_BUTTONS in der templates_default.php erzeugt keinen reinen CSS-Button, sondern einen mit CSS Formatierten HTML-Button welcher jedoch mit einem BG-Image erzeugt wird.
rieste
Beiträge: 134
Registriert: Fr 18. Mär 2011, 07:54
Shop Version: ECB 1.08 leider

Re: CSS Button

Beitrag von rieste »

hallo,

das mit dem Layout vom Background ist mir klar. Auch das mit der Background position das man hier varieren kann.

es scheint aber so das alle BUTTONS die in einer BOX (Anmeldung links, Suchen oben,...) eine Hinterlegung haben bzw. vermute ich das hier der klassische HTML Button dargestellt wird der "drüber" liegt.
ich finde jedoch die Deklarierung niergends.
Das ist auch das "graue" auf dem Bild was ich eingefügt habe.

- wie defeniere ich Buttons die weiterhin als Bild dargestellt werden. Es kommen z.b. bei der login.php keine CSS Buttons....

lg
peter
Mein Seite: https://www.rieste.com
Mein Lichtshop https://licht365.com
yogi
Administrator
Beiträge: 292
Registriert: Do 6. Mai 2010, 14:16
Shop Version: die aktuelle
Wohnort: Köln
Kontaktdaten:

Re: CSS Button

Beitrag von yogi »

Hi,

die Buttons werden durch einen modifier im Template auf "css" umgestellt. Es ist eine Technik die nur im WEBs Template funktioniert und keine Änderungen im Core hatten (nicht verifiziert).
Der Smart-Modifier ist in der Datei "templates/webs/smarty/modifier.button.php"

Jeder Button der als CSS-Button dargestellt werden soll bekommt den Modifier "button":

Code: Alles auswählen

     {$BUTTON|button}
wenn man also den Modifier "|botton" nicht angibt so wird der Button immer als Image-Button angezeigt. Der Modifier "fehlt" z.B. in der 'templates/webs/module/logoff.html' - wird aber jetzt hinzugefügt.

Beim "input button" einer Form fehlt das BG-Image, das fixt man über folgende Anpassung an der Datei "templates/webs/v1.0/css/buttons.css":
suche

Code: Alles auswählen

div.button {
    background: url(../buttons/img/bg.gif) transparent left top no-repeat;
    padding: 0;
    float: left;
}
ändere es in

Code: Alles auswählen

div.button, input.button {
    background: url(../buttons/img/bg.gif) transparent left top no-repeat;
    padding: 0;
    float: left;
}
suche

Code: Alles auswählen

.button_in_cart input.button {
    background-position: 0px -24px;
    padding-left: 32px;
}
ändere es in

Code: Alles auswählen

.button_in_cart input.button {
    background-position: 0px -24px;
    padding-left: 32px;
    height: 24px;
}
rieste
Beiträge: 134
Registriert: Fr 18. Mär 2011, 07:54
Shop Version: ECB 1.08 leider

Re: CSS Button

Beitrag von rieste »

perfekt!

Danke funktioniert und das ist genau die gesuchte antwort!
Mein Seite: https://www.rieste.com
Mein Lichtshop https://licht365.com
Kopernikus
Beiträge: 390
Registriert: Fr 19. Okt 2012, 12:15

Re: CSS Button

Beitrag von Kopernikus »

Hi yogi

Ich habe gerade Deine Erklärung zum CSS Button hier gelesen.

Nun wollte ich gerade den Warenkorb Button farblich etwas anpassen und stellte fest, dass es sich hierbei um eine Grafik und nicht um einen css button handelt.

Nun schreibst Du hier aber:
wenn man also den Modifier "|botton" nicht angibt so wird der Button immer als Image-Button angezeigt.
In der / templates / webs / module / product_info / product_info_1.html wird der button zwar mit {$ADD_CART_BUTTON|button} aufgerufen, trotzdem handelt es sich aber um ein image welches unter /templates/webs/buttons/german/button_in_cart.gif abgelegt ist.

Müsste damit nicht ein CSS Button erscheinen?
yogi
Administrator
Beiträge: 292
Registriert: Do 6. Mai 2010, 14:16
Shop Version: die aktuelle
Wohnort: Köln
Kontaktdaten:

Re: CSS Button

Beitrag von yogi »

Kopernikus hat geschrieben:Müsste damit nicht ein CSS Button erscheinen?
ja, aber nur wenn Du auch die CSS-Buttons über templates/DeinTemplate/source/template_detaults.php aktiviert hast - per DEFAULT steht da:

Code: Alles auswählen

define('USE_HTML_BUTTONS', false);
ab der V1.0.15 wird es übrigens "echte" CSS-Buttons - also ganz ohne Grafik. In der source/template_defaults.php findet man dann dort folgendes:

Code: Alles auswählen

define('USE_CSS_BUTTONS', false); # needs css/button.css
define('USE_HTML_BUTTONS', false); # needs css/buttons.css
Antworten