Gelöst: "Aktives" jqui-Navi-Icon -> Hintergrundfarbe ändern

[smartnoob]

Moin Leutz,

ich habe mehrere jqui - Navi - Icons als Navigationsbuttons in meiner Visualisierung (Vis 1) eingefügt. Der jeweils ausgewählte Button hat dann eine Hintergrundfarbe. Standard ist (hell-)blau. Wie kann ich die "Ausgewählt" Farbe ändern oder gar auf "transparent" setzen. Danke schonmal im voraus! Grüße.

PS: Ich denke/weiß, das geht irgendwie mit CSS, ich habe aber in diesem konkreten Fall noch nicht herausgefunden, wie?!

[OliverIO]

@smartnoob

Hast du mit den Web Developer Tools schon mal geschaut, welcher Selektor da greift?
Wenn du den gefunden hast, kannst du genau den mit einer eigenen CSS Definition und höherer Spezifität überschneiden.

[smartnoob]

@oliverio Habe ich versucht. Ich denke auch, dass ich eigentlich den richtigen Abschnitt gefunden habe.

.mystyle {
border: 2px solid #26b3f7 !important;
background: #0972a5 url(images/ui-bg_highlight-hard_20_0972a5_1x100.png) 50% 50% repeat-x;
font-weight: normal;
color: #fff;
}

Zumindest werden die Änderungen am Button übernommen, wenn ich wie im Code versuche, "border" von 1px statt 2px zu verändern. Wenn ich allerdings bei "background" eine andere Farbe setze. z.b. #FFFFFF und hinter das "normal;" noch important setze (also "..... font-weight: normal !important;"), ändert das nichts an der Hintergrundfarbe. Sie ist und bleibt blau....Komisch.

Keine Ahnung, was ich falsch mache...

[OliverIO]

@smartnoob

Exportiere bitte mal dein Widget.
Dann kann ich das nachstellen.

[OliverIO]

@smartnoob

also wenn das das richtige widget ist
jqui - navigation - Icon

dann kannst du mal die folgende anweisung probieren.
ich habe die im css-reiter als projekt-regel stehen.

in der widget konfiguration musst du dann im abschnitt general (im englischen) im feld CSS Class noch "nobg" (ohne anführungsstriche und auch ohne punkt) ergänzen.

.nobg {
    background-image:inherit !important;
    background-color:inherit !important;
}

anstatt inherit kannst du eingeben was du willst. die anweisung inherit vererbt die eigenschaft vom übergeordneten element. kannst aber auch eigene fixe definitionen eintragen.

du hast wahrscheinlich auch die neutralisierung der color eigenschaft vergessen, die ebenfalls noch wirkt.

dadurch geht allerdings auch ein teil des hover effekts verloren, daher musst du evtl dafür auch noch eine weitere regel schreiben.
hier zur verdeutlichung mit einem krassen hintergrund

.nobg.ui-state-hover {
    background-image:inherit !important;
    background-color:red !important;
}

[smartnoob]

@oliverio Supi, das bringt mich schonmal weiter. Zumindest bekomme ich so das "blöde" Blau weg und der Button sieht nun schwarz bzw. transparent aus. Das ist schonmal super. Mit der grauen Rahmenfarbe sieht der "ausgewählt" Button dann ganz okay aus. Noch cooler wäre natürlich, den "Farbverlauf" den das Blau hatte, also dieses spiegelig-button-artige zum Beispiel auch mit anthrazit oder grau hinzubekommen. Aber dafür müsste ich bestimmt die verlinkte png-datei durch eine eigene ersetzen, die dann grau statt blau wäre. Oder sehe ich das falsch?

Supi trotzdem! Vielen Dank erstmal für die Mühe. Bringt mich definitiv weiter! Grüße.

PS: Der HoverEffekt ist für mich ohnehin nicht so wichtig, das es sich um eine Visualisierung handelt, welche auf einem Touchscreen läuft.

[OliverIO]

@smartnoob
Du kannst jede beliebige CSS Anweisung da drauf legen. Auch einen Farbverlauf ohne eine Grafik Datei.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients

[smartnoob]

@oliverio Verstehe. Vielen Dank für deine Mühe! Habe allerdings leider festgestellt, dass sich der CSS Code, nun auf alle Buttons anwendet, auch auf die zur Zeit nicht ausgewählten. Heißt, es verschwindet jetzt bei allen Buttons, ausgewählt oder nicht, die Hintergundfarbe, so dass man anhand der Buttons jetzt gar nicht mehr sehen kann, welcher ausgewählt ist... Naja, danke trotzdem. Ich bleibe dran...Werde nochmal einen ganz anderen Ansatz versuchen, den über die Bearbeitung die verlinkten png-Datei, ich denke fast, dass da der blaue Farbverlauf herkommt, mal sehen.

[OliverIO]

@smartnoob

exportiere 2 widgets bitte, eines mit und eines wo der gewünschte effekt auftreten soll
+
deine betreffenden css anweisungen im css tab

mein vorstellungsvermögen ist leider begrenzt was du da alles noch gemacht hast

[smartnoob]

@oliverio
Einmal das "ausgewählte" widget:

[{"tpl":"tplJquiIconNav","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"text":"View1","nav_view":"vis1view1_new","class":""},"style":{"left":"2px","top":"743px","width":"76px","height":"32px"},"widgetSet":"jqui"}]

Und hier ein nicht ausgewähltes:

[{"tpl":"tplJquiIconNav","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"text":"View2","nav_view":"vis1view2","class":""},"style":{"left":"85px","top":"743px","width":"76px","height":"32px"},"widgetSet":"jqui"}]

Hier der CSS Code, bei dem ich dachte, ich könnte das blau irgendwie transparent machen oder in grau oder schwarz verwandeln:

.mystyle {
    border: 1px solid #26b3f7;
    background: #0972a5 url(images/ui-bg_highlight-hard_20_0972a5_1x100.png) 50% 50% repeat-x;
    font-weight: normal;
    color: #fff;
}

Hier der CSS Code von dir, der zwar funktioniert, aber ja auf allen Buttons angewendet werden soll, aber wenn ich das mache, sehe ich wie oben beschrieben gar nicht mehr, ob/welcher Button ausgewählt ist.

.nobg {
    background-image:inherit !important;
    background-color:inherit !important;
}

Danke.

PS: Bei den Widgets wird der CSS-Code mystyle gerade nicht geladen, da ich es rausgenommen hatte, Nur zur Info, falls du drüber stolperst.

[OliverIO]

@smartnoob sagte in "Aktives" jqui-Navi-Icon -> Hintergrundfarbe ändern:

mystyle

also

alle knöpfe kann das nicht betreffen, da man entweder nobg oder mystyle im widget bei css class name eintragen muss, das es überhaupt wirken kann

dein mystyle kann nicht richtig funktionieren, weil bei manchen properties das !important fehlt.
durch das theme sind ja bereits einige einstellungen vorgegeben. die kann man nur überschreiben mit höherer spezifität bzw !important. sonst wirken die einfach nicht.
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Kaskade#Spezifit.C3.A4t

3. was meinst du man sieht nicht welcher ausgewählt ist?
   das sind doch knöpfe und wenn ich drücke lande ich auf einem anderen view.
   wenn du den hover effekt meinst (also wenn die maus drüber schwebt, da hatte ich oben was geschrieben)

das funktioniert. jquery verwendet grafiken, ich habe direkt die gradient anweisung gewählt,
erstellt habe ich das mit https://cssgradient.io/

.mystyle {
    border: 1px solid #26b3f7;
    background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(75,75,75,1) 23%, rgba(103,103,103,1) 31%, rgba(75,75,75,1) 48%, rgba(22,22,22,1) 100%) !important;
    font-weight: normal;
    color: #fff !important;
}

[smartnoob]

@oliverio Vielen Dank für die Mühe. Aber ich glaube, wir reden etwas aneinander vorbei. Zu 1): Natürlich habe ich bei allen Knöpfen den neuen CSS Style um es auszuprobieren und falls du mein PS gelesen hast, müsste doch auch klar sein, das beim export die CSS Klasse nicht mehr in den Widgets angegeben war. zu 2): Ich habe es mit und ohne important! ausprobiert, es hat nichts geändert. Zu 3) Nachdem ich in allen widgets deinen CSS Code eingefügt hatte, wurden alle widgets immer gleich angezeigt, es gab also kein "ausgewählt" mehr.

Eigentlich ist das, was ich will im Prinzip ganz einfach. Schau dir das Video an:

Ich möchte doch nur, das unten der jeweils ausgewählte Button nicht Blau sondern zum Beispiel grau oder schwarz ist. Sorry, wenn ich mich so unklar ausgedrückt habe.

Edit: Gibt es eine evtl. eine Möglichkeit, die themes zu bearbeiten (dies hier ist "dark hive") oder selbst eines zu erstellen?

[OliverIO]

@smartnoob

exportier mir doch mal bitte das ganze projekt.
bevor ich das nachstelle dauert das zu lange

[OliverIO]

@smartnoob sagte in "Aktives" jqui-Navi-Icon -> Hintergrundfarbe ändern:

Edit: Gibt es eine evtl. eine Möglichkeit, die themes zu bearbeiten (dies hier ist "dark hive") oder selbst eines zu erstellen?

das theme zu editieren ist keine gute idee. das würde bei der nächsten aktualisierung wieder überschrieben werden.

[smartnoob]

@oliverio Hi. Hier mal ein export der vereinfachten Version meiner vis. Wie gesagt, das einzige was ich möchte ist, dass der "ausgewählte" Button nicht blau, sondern eine andere Farbe hat, zb. grau. Der nicht ausgewählte Button soll so bleiben, wie erst ist. Sorry fürs späte Melden, aber wir hatten einen Heizungseinbau.

2024-08-08-export.zip

[OliverIO]

@smartnoob

funktioniert doch alles wie es soll
du trägst die mystyle anweisung im css reiter ein
und trägst dann die mystyle klasse jeweils im widget attribut ein.
halt immer nur bei den knöpfen, die im jeweiligen view leuchten sollen und nicht bei jedem

2024-08-08-spifoiauefjklds.zip

für einen eigenen farbverlauf nimmst du das tool das ich oben verlinkt habe und das !important nicht vergessen.

[smartnoob]

@oliverio Ja, perfekt. Jetzt habe ich es hinbekommen. Ich hatte wohl einen Denkfehler.

halt immer nur bei den knöpfen, die im jeweiligen view leuchten sollen und nicht bei jedem

Natürlich. Das war wohl mein Problem. Sonst hätte es sicherlich schneller geklappt! Weiß auch nicht, wie ich plötzlich denken konnte, den CSS Style für jeden Button in jedem view anweisen zu müssen. Hattest mich ja sogar zwischendurch schonmal drauf hingewiesen und ich habe es nicht gemerkt, sorry.

Vielen Dank nochmal, jetzt passt es supi!