CSS Button

[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.

Auch hier habe ich durch Änderung einiger Optionen keine Lösung gefunden.

[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]

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

[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]

perfekt!

Danke funktioniert und das ist genau die gesuchte antwort!

[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]

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