NEWS
Border in 3D Optik
-
Hallo zusammen. Gibt es eine Möglichkeit, den Border so auszuwählen, das 2 Seiten z.B. grau und 2 Seiten weiß sind?
So dass ein 3D Effekt bei einem Button entsteht? -
@Glasfaser auch schön, aber ich meine wie folgende...

-
@Glasfaser auch schön, aber ich meine wie folgende...

-
Bitte kein Externen Link´s .
Nutze den Upload über die Wolke im Editor
EDIT .... habe leider auch keine Lupe ;)
@Glasfaser muss mich erst mal zurechtfinden ;-)
-
@Glasfaser muss mich erst mal zurechtfinden ;-)
-
@Glasfaser dankeschön.
-
@Glasfaser dankeschön.
-
@Glasfaser
Ich bekomme das irgendwie nicht hin... Im Reiter CSS 2 Buttons angelegt, normalen und aktiven, aber verfärben tut sich in der vis gar nichts... unter CSS Klasse habe ich "button_test" eingegeben. :confounded: :thinking_face:.button_test { height:50px; width:100px; line-height:20px; text-align:center; vertical-align:middle; border:silver solid 3px; border-radius: 5px; font-size:22px; background: silver; color:white; } .button_test :active { height:50px; width:100px; line-height:20px; text-align:center; vertical-align:middle; border:#47aaff solid 3px; border-radius: 5px; font-size:22px; background: silver; color:white; } -
@Glasfaser
Ich bekomme das irgendwie nicht hin... Im Reiter CSS 2 Buttons angelegt, normalen und aktiven, aber verfärben tut sich in der vis gar nichts... unter CSS Klasse habe ich "button_test" eingegeben. :confounded: :thinking_face:.button_test { height:50px; width:100px; line-height:20px; text-align:center; vertical-align:middle; border:silver solid 3px; border-radius: 5px; font-size:22px; background: silver; color:white; } .button_test :active { height:50px; width:100px; line-height:20px; text-align:center; vertical-align:middle; border:#47aaff solid 3px; border-radius: 5px; font-size:22px; background: silver; color:white; } -
keine Ahnung was du machen willst ..
aber setze mal dahinter
!important;.button_test { height:50px !important; width:100px !important;@Glasfaser
möchte das der Rahmen bei Betätigung des Buttons die Farbe ändert -
@Glasfaser
möchte das der Rahmen bei Betätigung des Buttons die Farbe ändert -


hier eintragen (Datenpunkt anpassen ) :

{wert:0_userdata.0.Test123; wert=="true" ? "green" : "silver" }@Almixx Denke bitte daran, das Bindings ("{}") nicht im Edit-Modus von VIS funktionieren. Also zum Testen immer die Runtime-Version laden (Playknopf oben rechts).
@Glasfaser hat dir zwei Möglichkeiten der Formatierung angeboten. Du kannst das Aussehen des Buttons über die CSS Ränder Einstellungen des Widgets einstellen. Mit Hilfe eines Bindings kann das abhängig vom Zustand des Datenpunkts "0_userdata.0.Test123" gemacht werden. Ist der Datenpunkt true, wird's grün, sonst silber.
Für die erste Lösung von @Glasfaser musst du den CSS-Code in den Reiter CSS packen und per Klasse aufrufen. Wenn das Element (hier das Widget mit dem Rand) die Klasse "UiStyle" hat, wird es - wie im CSS-Code hinterlegt - formatiert. Damit es diese Klasse bekommt, hat @Glasfaser wieder ein Binding genutzt. Wenn der Datenpunkt wahr ist, heißt die Klasse "UiStyle" und das Widget wird entsprechend formatiert. Ist er falsch, wird keine Klasse gesetzt, es passiert nix.Das ist aber keine Reaktion auf den Klick/Touch, sonder auf den Zustand des Datenpunkts. Für Klick/touch kannst du "active" nehmen. Dann sollte eine extra CSS-Klasse (im Reiter "Generell") dauerhaft gesetzt werden. ZB. "aktiv_bei_touch". Im CSS-Reiter formatierst du dann so
.aktiv_bei_touch:active { border: 5px dotted red; } .aktiv_bei_touch { border: 5px solid green; }Wenn das Widget dann aktiv ist (geklickt oder touched), sollte es kurz die Erscheinung ändern. Das geht mit jedem Widget.
Gruß
Pix -
@Almixx Denke bitte daran, das Bindings ("{}") nicht im Edit-Modus von VIS funktionieren. Also zum Testen immer die Runtime-Version laden (Playknopf oben rechts).
@Glasfaser hat dir zwei Möglichkeiten der Formatierung angeboten. Du kannst das Aussehen des Buttons über die CSS Ränder Einstellungen des Widgets einstellen. Mit Hilfe eines Bindings kann das abhängig vom Zustand des Datenpunkts "0_userdata.0.Test123" gemacht werden. Ist der Datenpunkt true, wird's grün, sonst silber.
Für die erste Lösung von @Glasfaser musst du den CSS-Code in den Reiter CSS packen und per Klasse aufrufen. Wenn das Element (hier das Widget mit dem Rand) die Klasse "UiStyle" hat, wird es - wie im CSS-Code hinterlegt - formatiert. Damit es diese Klasse bekommt, hat @Glasfaser wieder ein Binding genutzt. Wenn der Datenpunkt wahr ist, heißt die Klasse "UiStyle" und das Widget wird entsprechend formatiert. Ist er falsch, wird keine Klasse gesetzt, es passiert nix.Das ist aber keine Reaktion auf den Klick/Touch, sonder auf den Zustand des Datenpunkts. Für Klick/touch kannst du "active" nehmen. Dann sollte eine extra CSS-Klasse (im Reiter "Generell") dauerhaft gesetzt werden. ZB. "aktiv_bei_touch". Im CSS-Reiter formatierst du dann so
.aktiv_bei_touch:active { border: 5px dotted red; } .aktiv_bei_touch { border: 5px solid green; }Wenn das Widget dann aktiv ist (geklickt oder touched), sollte es kurz die Erscheinung ändern. Das geht mit jedem Widget.
Gruß
Pix@pix @Glasfaser , vielen Dank an euch, hat jetzt endlich funktioniert, obwohl ich das gestern schonmal so probiert hatte..
Mir ist aber aufgefallen, daß sich beim jqui-ctrl-Icon die Backgroundfarbe ändern lässt, beim state Button hingegen nicht. Auch nicht mit !important möglich. Ist das so? oder muß ich noch was beachten.
Nicht verwirren lassen, experementiere mit verschiedenen Designs für Buttons :see_no_evil: :relaxed: -
@pix @Glasfaser , vielen Dank an euch, hat jetzt endlich funktioniert, obwohl ich das gestern schonmal so probiert hatte..
Mir ist aber aufgefallen, daß sich beim jqui-ctrl-Icon die Backgroundfarbe ändern lässt, beim state Button hingegen nicht. Auch nicht mit !important möglich. Ist das so? oder muß ich noch was beachten.
Nicht verwirren lassen, experementiere mit verschiedenen Designs für Buttons :see_no_evil: :relaxed: -
@Almixx sagte in Border in 3D Optik:
die Backgroundfarbe ändern lässt , beim state Button hingegen nicht
funktioniert doch ..

@Glasfaser
Ich muß noch mal nerven :see_no_evil:
Die State Buttons funktionieren nicht, nur an den Ecken sieht man ganz leicht die Farbe durchschimmern. Nimmt auch Schriftgröße etc. so nicht an...
.button_rollo { height:40px !important; width:100px !important; line-height: 22px !important; text-align:center !important; border-radius: 5px; border-style: outset; vertical-align:middle !important; border-radius: 5px !important; font-size: 20px !important; background: linear-gradient(0deg, red, yellow) !important; color:white; }Farbe hab ich übrigens mal bewusst so gesetzt :blush:
-
@Glasfaser
Ich muß noch mal nerven :see_no_evil:
Die State Buttons funktionieren nicht, nur an den Ecken sieht man ganz leicht die Farbe durchschimmern. Nimmt auch Schriftgröße etc. so nicht an...
.button_rollo { height:40px !important; width:100px !important; line-height: 22px !important; text-align:center !important; border-radius: 5px; border-style: outset; vertical-align:middle !important; border-radius: 5px !important; font-size: 20px !important; background: linear-gradient(0deg, red, yellow) !important; color:white; }Farbe hab ich übrigens mal bewusst so gesetzt :blush:
Stelle mir mal die gesamte Widget wie du es oben eingestellt hast mal zur Verfügung , damit ich es überprüfen kann .
Ich denke mal das ist ein Dialog View und du hast diese Rollo Büro in einem extra View.... oder das View , wäre natürlich auch besser .
setze es dann auch in ein Spoiler ( ist das Augensymbol )
-
@Glasfaser
Ich muß noch mal nerven :see_no_evil:
Die State Buttons funktionieren nicht, nur an den Ecken sieht man ganz leicht die Farbe durchschimmern. Nimmt auch Schriftgröße etc. so nicht an...
.button_rollo { height:40px !important; width:100px !important; line-height: 22px !important; text-align:center !important; border-radius: 5px; border-style: outset; vertical-align:middle !important; border-radius: 5px !important; font-size: 20px !important; background: linear-gradient(0deg, red, yellow) !important; color:white; }Farbe hab ich übrigens mal bewusst so gesetzt :blush:
@Almixx sagte in Border in 3D Optik:
nimm mal das :
.button_rollo .ui-button { height:40px !important; width:100px !important; line-height: 22px !important; text-align:center !important; border-radius: 5px; border-style: outset; vertical-align:middle !important; border-radius: 5px !important; font-size: 20px !important; background: linear-gradient(0deg, red, yellow) !important; color:white; } -
@Almixx sagte in Border in 3D Optik:
nimm mal das :
.button_rollo .ui-button { height:40px !important; width:100px !important; line-height: 22px !important; text-align:center !important; border-radius: 5px; border-style: outset; vertical-align:middle !important; border-radius: 5px !important; font-size: 20px !important; background: linear-gradient(0deg, red, yellow) !important; color:white; }@Glasfaser probier ich später mal, bin noch auf schicht... danke
-
Stelle mir mal die gesamte Widget wie du es oben eingestellt hast mal zur Verfügung , damit ich es überprüfen kann .
Ich denke mal das ist ein Dialog View und du hast diese Rollo Büro in einem extra View.... oder das View , wäre natürlich auch besser .
setze es dann auch in ein Spoiler ( ist das Augensymbol )
@Glasfaser, hat zum Teil funktioniert. Die Hintergrundfarbe passte jetzt, dafür wurde der Button etwas kleiner. Die toggle Buttons änderten sich total in den Abmessungen. Was bewirkt dieses .ui-button?





