CSS Button
CSS Button
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.
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.
-
- Administrator
- Beiträge: 292
- Registriert: Do 6. Mai 2010, 14:16
- Shop Version: die aktuelle
- Wohnort: Köln
- Kontaktdaten:
Re: CSS Button
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.
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
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
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
-
- Administrator
- Beiträge: 292
- Registriert: Do 6. Mai 2010, 14:16
- Shop Version: die aktuelle
- Wohnort: Köln
- Kontaktdaten:
Re: CSS Button
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
ändere es in
suche ändere es in
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}
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;
}
Code: Alles auswählen
div.button, input.button {
background: url(../buttons/img/bg.gif) transparent left top no-repeat;
padding: 0;
float: left;
}
Code: Alles auswählen
.button_in_cart input.button {
background-position: 0px -24px;
padding-left: 32px;
}
Code: Alles auswählen
.button_in_cart input.button {
background-position: 0px -24px;
padding-left: 32px;
height: 24px;
}
Re: CSS Button
perfekt!
Danke funktioniert und das ist genau die gesuchte antwort!
Danke funktioniert und das ist genau die gesuchte antwort!
-
- Beiträge: 390
- Registriert: Fr 19. Okt 2012, 12:15
Re: CSS Button
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:
Müsste damit nicht ein CSS Button erscheinen?
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:
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.wenn man also den Modifier "|botton" nicht angibt so wird der Button immer als Image-Button angezeigt.
Müsste damit nicht ein CSS Button erscheinen?
-
- Administrator
- Beiträge: 292
- Registriert: Do 6. Mai 2010, 14:16
- Shop Version: die aktuelle
- Wohnort: Köln
- Kontaktdaten:
Re: CSS Button
ja, aber nur wenn Du auch die CSS-Buttons über templates/DeinTemplate/source/template_detaults.php aktiviert hast - per DEFAULT steht da:Kopernikus hat geschrieben:Müsste damit nicht ein CSS Button erscheinen?
Code: Alles auswählen
define('USE_HTML_BUTTONS', false);
Code: Alles auswählen
define('USE_CSS_BUTTONS', false); # needs css/button.css
define('USE_HTML_BUTTONS', false); # needs css/buttons.css