Seite 1 von 1
CSS Button
Verfasst: Mo 3. Sep 2012, 07:45
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.
Auch hier habe ich durch Änderung einiger Optionen keine Lösung gefunden.
Re: CSS Button
Verfasst: Di 4. Sep 2012, 08:37
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.
Re: CSS Button
Verfasst: Di 4. Sep 2012, 09:51
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
Re: CSS Button
Verfasst: Di 4. Sep 2012, 11:36
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":
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;
}
Re: CSS Button
Verfasst: Di 4. Sep 2012, 11:44
von rieste
perfekt!
Danke funktioniert und das ist genau die gesuchte antwort!
Re: CSS Button
Verfasst: Sa 2. Feb 2013, 15:54
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?
Re: CSS Button
Verfasst: Mi 6. Feb 2013, 17:25
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:
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