Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[mickyboys]

Moin,

Da ich noch recht neu bin kenn ich nicht alle Widgets, aber alle die ich getestet habe erlauben mir nicht das Design nach meinen Wuenschen zu aendern.

Im Anhang mal ein Screenshot von dem Design. Es ist sehr nahe dem Busch Jaeger Design - ich finde das einfach super, deshalb habe ich es mir nachgebaut.

Auf dem Bild zum Beispiel moechte ich das die Zeichen Plus/Minus animiert sind. Wie bei einigen anderen Widgets im STIL Aenderungseffekt.

Die Widgets mit dem STIL wiederum koennen kein Increment um per Druck schrittweise die Werte zu veraendern.

Und so zieht sich das durch die gesamte Palette.

Sliders sind sehr limitiert, kann nicht das Design aendern (ausser Farbe)

Danke fuer euren Support…

[arteck]

ahh na also…

es würde gehen .bis auf die slider meine ich.. du musst mit 2 ebenen arbeiten.. also musst dich trennen von einem widget .. sonder 2 widgets überlagern .. also ein image für das eigentliche Design und das was drüber liegt ist z.b.: das + wo du draufklickst.. fettisch

[mickyboys]

Klingt das nicht falsch nur weil es in den jetzigen Widgets nicht umgesetzt wurde?

Es muss doch moeglich sein ein Widget mit Increment Funktion ueber was auch immer (CSS, SCRIPT, etc.) das animieren beizubringen?

Oder noch besser aus einem Template einfach die Dinge die man braucht raussuchen und als Widget kompilieren lassen - bin ich wirklich soweit von der Realitaet enternt?

[Pman]

Also du müsstest schon konkreter werden, wie du dir die Animation vorstellst, damit dir geholfen werden kann. Grundsätzlich sind die Widgets ja auch nur so etwas wie vorgefertigte Knöpfe, die einem passen können oder eben nicht. Natürlich kann nicht jeder spezielle Wunsch als Widget umgesetzt werden, sonst gäbe wahrscheinlich allein 100 increment-Widgets. Genau deswegen gibt es ja auch den CSS und Script Tab, womit man dann jedes noch so kleine Detail ändern kann.

Schönes Design übrigens.

Nur mal so als Idee:

.ui-button:active {
  background-color: #ff0000;
  transition:all 0.1s ease;
}

.ui-button:not(:active) {
  background-color: transparent;
  transition:all 1s ease;
}

Farben und Animation kannst du natürlich beliebig anpassen. Man muss ja CSS nicht neu erfinden, wenn es schon eins gibt.

[htrecksler]

Ich häng mich mal ein, weil ich das mit dem Anpassen über CSS sehr interessant finde.

Allerdings fehlt mir der Einstieg um damit zu arbeiten.

Wo genau muss der Code dann geschrieben werden?

Wenn ich ihn bei markiertem Widget einfach in den Reiter CSS kopiere ändert sich dadurch garnichts. Muss im Kopf auf "Global" oder "Projekt" gestellt werden? Ich wäre für ein ganz einfach Beispiel dankbar.

Schönes Wochenende

[mickyboys]

Gibt es eine leicht zu verstehende Uebersicht der moeglichen Befehle im CSS Bereich?

Zum Beispiel, woher weisst du das ui.Button richtig waere, sprich woher kennst du den Namen? Und wo finde ich Namen der anderen Widgets sodass CSS auch nur auf den angesprochen wird?

Fragen ueber Fragen…

Danke,

[htrecksler]

https://www.w3schools.com/css/default.asp

Hier schau ich immer nach. Davon gibt es aber noch mehrere Seiten.

Aber das…
> woher weisst du das ui.Button richtig waere, sprich woher kennst du den Namen? Und wo finde ich Namen der anderen Widgets sodass CSS auch nur auf den angesprochen wird?
ist auch genau mein Problem :-)

[mickyboys]

Hi,

Ich habe zumindestens eine Moeglichkeit gefunden, keine Ahnung ob dies so der Standart ist.

Egal welches Widget du benutzt. Gebe ihm wenn du mit CSS etwas aendern willst einen Namen unter Widget Generell CSS Klasse. z.b. <u>Increment</u>

Gebe unter CSS ein Projekt an und schreib in das leere Feld den Namen den du vorher in der CSS Klasse vergeben hattest.

Nun sollten alle Aenderungen sich nur noch auf diese eine CSS Klasse beziehen. Natuerlich sollte dein Code mit <u>.Increment</u> anfangen.

.Increment {
    background: transparent;
}
.Increment {
    border: transparent;
}

[Pman]

Genau so machst du es, wenn du gezielt ein oder mehrere Widgets ändern willst.

Um ansonsten an die Klassen (in CSS mit "." davor) oder IDs (in CSS mit "#" davor) zu kommen, kann man die Debug-Tools der Browser verwenden.

In Chrome wäre das: Rechtsklick auf ein Element-><u>Untersuchen</u>

Das sieht dann in etwa so aus und man die Klassen / IDs usw. ablesen:

[Harry-IO-HM]

Ich will das Thema noch einmal aufwärmen.

Mir geht es genau so - es gibt sehr sehr viele Widgets - einige mit vielen Konfigurationsmöglichkeiten und andere mit wenig.

So z.B. hqwidgets On/Off - tolle Möglichkeit, unter der Kategorie "Stil" einen Änderungseffekt auszuwählen. Damit hat man bei einer Push-Button-Aktion ein schönes User-Feedback. Ich will ja wissen, ob ich mit meinem fetten Daumen die Taste getroffen habe oder nicht ;)

Wie kann man diesen Änderungseffekt - ohne ein zweites Widget drunterzulegen- zum Beispiel beim Increment-Widget umsetzen?