CSS für HQWidgets

Communicate

Hallo zusammen,

für die jqui-Widgets kann ich prima CSS nutzen:

#visview_VIEWNAME .ui-button {
     background: red;
}

Färbt zum Beispiel einen Button rot.

Nur wie kann ich genau das auch mit den hq-Widgets machen? Wenn ich bei den jqui-Widgets .ui eingebe, kommt eine Syntax-Hilfe, bei den hq-Widgets leider nicht. Kann mir einer die Syntax für die hq widgets verraten?

Vielen Dank schonmal.

Gruß

Dominic

Communicate

Hallo nochmal,

also ein aktuelles upgrade aller Adapter hat mir die Syntaxhilfe bei allen Widgets wieder zurück gebracht.

Nur mein eigentliches Problem konnte ich nicht lösen. Ich versuche das hier noch einmal genauer darzustellen.

Also ich möchte einen HQ-Button mit eigenen CSS versehen.

Konkret möchte ich einem HQ-Button folgende CSS Befehle zuweisen, was mit eine jqui Button auch super funktioniert. Leider

kann ich den jqui-Button nicht so an meine Größenvorstellungen anpassen, dass ich auf Bluefox Rat hin, lieber die HQ-Button nehme.

Also hier jetzt das CSS mit dem es bei jqui funktioniert, bei HQ-Widget aber nicht:

#visview_Main .ui-button {

     outline: 0;
	padding: 5px 12px;
	 display: block;
     color: #9fa8b0;
     font-weight: bold;
		text-shadow: 1px 1px #1f272b;
		border: 1px solid #1c252b;
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		background: #232B30; /* old browsers */
		background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
		box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
		-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
		-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
}

Kann das am ".ui-button" liegen? Der heisst doch bestimmt bei hq-widgets anders, oder?

Ich hoffe ich konnte mich verständlich ausdrücken und einer kann mir helfen…

Grüße

Dominic

Bluefox

~~@Communicate:~~

Hallo nochmal,

also ein aktuelles upgrade aller Adapter hat mir die Syntaxhilfe bei allen Widgets wieder zurück gebracht.

Nur mein eigentliches Problem konnte ich nicht lösen. Ich versuche das hier noch einmal genauer darzustellen.

Also ich möchte einen HQ-Button mit eigenen CSS versehen.

Konkret möchte ich einem HQ-Button folgende CSS Befehle zuweisen, was mit eine jqui Button auch super funktioniert. Leider

kann ich den jqui-Button nicht so an meine Größenvorstellungen anpassen, dass ich auf Bluefox Rat hin, lieber die HQ-Button nehme.

Also hier jetzt das CSS mit dem es bei jqui funktioniert, bei HQ-Widget aber nicht:
#visview_Main .ui-button {
     
     outline: 0;
	padding: 5px 12px;
	 display: block;
     color: #9fa8b0;
     font-weight: bold;
		text-shadow: 1px 1px #1f272b;
		border: 1px solid #1c252b;
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		background: #232B30; /* old browsers */
		background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
		box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
		-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
		-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
}
Kann das am ".ui-button" liegen? Der heisst doch bestimmt bei hq-widgets anders, oder?

Ich hoffe ich konnte mich verständlich ausdrücken und einer kann mir helfen…

Grüße

Dominic `
Ne ne.. So einfach ist das nicht, aber trotzdem einfach.

Du musst einen Style in hq Widgets wählen, z.b "Button green normal" und diesen überschreiben.

.hq-button-green-normal {
    background: red !important;
    box-shadow: inset 3px 2px 7px 0px #BB1111  !important;
    border: 1px solid #aa1111 !important;
}

Communicate

Hallo Bluefox,

vielen Dank, das klappt prima.

Sag mal, gilt das so auch für andere Widgets (z.B. die Basic)?

Gruß

Dominic

Bluefox

Jedes Widgetset ist anders. Also nein.

Basic kann man aber gut über "class" Feld steuern.

Einfach in CSS klasse erzeugen und dann diese zuweisen:
48_myred.gif

Communicate

Hallo Bluefox,

hast Du noch einen Tip für mich, wie ich das bei den Metro Widgets am besten mache?

Homoran

~~@Communicate:~~

Hallo Bluefox,

hast Du noch einen Tip für mich, wie ich das bei den Metro Widgets am besten mache? `

Hat er bestimmt, nur jetzt nicht :mrgreen:

~~@Bluefox:~~

Hallo,

danke an euch alle, dass Interesse an dem Projekt immer noch da ist.

Ich werde jetzt die Pause bis ende nächster Woche machen.

Auf der Forum-Seite werde ich vermutlich auch nicht zugreifen können.

Also löst bitte eure Probleme selbst. Das könnt ihr schon, habe ich gesehen. :lol:

Bis danach,

Bluefox 8-) `

Communicate

Hmm, dann müssen wir da wohl selber ran.

Konkret habe ich folgendes Problem mit den Metro View Wechsel Kacheln:

Wenn ich bei Background eine Farbe eingebe dann sehe ich diese nur leicht durchschimmern, das eigentliche Widget ist aber nur grau. Grau kann ich ändern indem ich eine Art Stil wie z.b. Bg-amber auswähle. Nur will ich kein amber sondern eine eigene Farbe. Hat jemand eine Idee, wie das geht?

Homoran

ok, hab es gerade getestet, was du meinst.

Unter CSS Background - color kannst du eine eigene Farbe auswählen - Von diesem Background sieht man aber nur den Rand.

Unter allgemein kannst du als Background diverse Farben mit bg- (=background) red usw. auswählen.

Auch ein bg "keins" existiert.

Bei diesem ist die Transparenz aber nicht hoch genug, so dass die unter CSS Background - color gewählte Farbe nur schwach durchschimmert.

Da sollten wir auf Bluefox warten.

Und falls er das liest: MACH URLAUB!!!

Gruß

Rainer

pix

Hallo zusammen,

~~@Homoran:~~

Unter CSS Background - color kannst du eine eigene Farbe auswählen - Von diesem Background sieht man aber nur den Rand. `
Ja, sieht dann so aus: Bei Metro Widgets kann man auf diese Weise zum Beispiel einen Alarm zusätzlich darstellen. Dazu muss man aber der Umweg über ein Skript gehen, das eine Variable zB von "rgba(250,0,0,0)" auf "rgba(250,0,0,1)" oder von "transparent" auf "red" auf von "0" auf "1" setzt. Dann kann man mit der binding-Funktion von VIS die Farbe über die gesetzte Variable (zB javascript.0.alarm_wassermelder wurde auf 1 gesetzt) definieren:

Farbe: rgba(250,0,0,{javascript.0.alarm_wassermelder}) ergibt rot bei 1 und nix bei 0 für das dritte Beispiel

~~@Homoran:~~

Unter allgemein kannst du als Background diverse Farben mit bg- (=background) red usw. auswählen.

Auch ein bg "keins" existiert. `
So sieht das aus:

~~@Homoran:~~

Bei diesem ist die Transparenz aber nicht hoch genug, so dass die unter CSS Background - color gewählte Farbe nur schwach durchschimmert. `
Deswegen gibt es die Farbe "transparenz". Ist etwas versteckt, weiter unten in der Liste. Hab ich sehr viel im Gebrauch.

Gruß

Pix

Homoran

DANKE!

Muss mich da mal weiter reinknien und dann die vis doku weitermachen.

Habe demnächst Urlaub - vielleicht schaffe ich dann ja was :)

Gruß

Rainer

Communicate

` > von Homoran » 28.08.2015, 20:15

Communicate hat geschrieben:

Hallo Bluefox,

hast Du noch einen Tip für mich, wie ich das bei den Metro Widgets am besten mache?

Hat er bestimmt, nur jetzt nicht :mrgreen: `

Hallo Bluefox, jetzt wo Du aus Deinem wohlverdienten Urlaub wieder da bist - hast Du noch einen Tipp für mich,

wie ich die Standardhintergründe (also z.B. BG Magenta) mit eigenen CSS Farben "missbrauchen" kann?

Danke und Gruß

Dominic

Bluefox

#visview_DemoView .bg-magenta{
    background-color: red !important;
}

Bitte merken dass #visview_DemoView muss mit deinem View-Namen ersetzt werden.
48_2015-09-17_10_48_31-iobroker.vis.png

Du kannst sogar so was machen:
48_2015-09-17_11_01_31-iobroker.vis.png

Hier ist ein Beispiel:

http://lea.verou.me/demos/css3-patterns.html

Communicate

Danke das hilft mir! !!

Gibt es irgendwo eine Übersicht, bei welcher Widget Art man wie die css befehle nutzen kann? Oder kann man das zumindest Irgendwo aus ableiten? Dann muss ich Dich nicht ständig fragen

von unterwegs gesendet
144_feiertage.png

Bluefox

Mit Shift+RechteMaus, kannst du durch ContextMenü "Element Quelltext anzeigen" aufmachen. Dann
48_2015-09-17_11_17_11-iobroker.vis.png

mikiline

Hallo,

wäre es nicht möglich noch im Bereich "CSS Allgemein" einen /div/ Bereich angeben, wo man das ganze Widget in einen Container seiner Wahl packen kann?

Das macht den ganzen Aufbau noch flexibler finde ich, da man dann den ganzen Container (nach Box Prinzip) in seiner Form darstellen kann und jedem Widget darauf einen eindeutigen Namen der nur einmal vorkommt

Momentan geht das nicht, glaube ich. Man kommt "nur" an die Klasse im jeweiligen Container.

Oder gibt es irgendwo eine Übersicht wie ich meine Widgets (und nicht den Inhalt) mit einem flow:left so positionieren kann, das diese auch mit dem Inhalt "mitwachsen bzw. verschoben werden"….

Ich hoffe ich drücke mich nicht zu kompliziert aus

Hat mir jemand eine Info wie er es bewerkstelligt.....z,B bei 2 ical Kalender (2 HTML Widgets) untereinander sollen immer im gleichen Abstand angezeigt werden, egal wieviel Inhalt ein Widget hat. Das Untere also z.B mit nach unten rutscht wenn "oben" mehr drinne steht

Habe es gefunden..... Danke !

pix

~~@mikiline:~~

Hat mir jemand eine Info wie er es bewerkstelligt…..z,B bei 2 ical Kalender (2 HTML Widgets) untereinander sollen immer im gleichen Abstand angezeigt werden, egal wieviel Inhalt ein Widget hat. Das Untere also z.B mit nach unten rutscht wenn "oben" mehr drinne steht `

Du kannst ein HTML widget Nutzen und die Datenpunkte als Bindings einfügen

{ical.0.data.html}
{ical.1.data.html}

Abstände, Float, alles machbar.

Gruß

Pix

mikiline

super, DANKE!

Man sieht den Wald vor lauter Bäumen nicht :-)

Community Forum

NEWS

CSS für HQWidgets

Support us

572

32.7k

82.4k

1.3m