Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Gelöst: "Aktives" jqui-Navi-Icon -> Hintergrundfarbe ändern

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

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

    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      smartnoob last edited by 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 1 Reply Last reply Reply Quote 0
      • OliverIO
        OliverIO @smartnoob last edited by

        @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.

        S 1 Reply Last reply Reply Quote 0
        • S
          smartnoob @OliverIO last edited by

          @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 2 Replies Last reply Reply Quote 0
          • OliverIO
            OliverIO @smartnoob last edited by

            @smartnoob

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

            1 Reply Last reply Reply Quote 0
            • OliverIO
              OliverIO @smartnoob last edited by 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;
              }
              
              
              S 1 Reply Last reply Reply Quote 0
              • S
                smartnoob @OliverIO last edited by 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 1 Reply Last reply Reply Quote 0
                • OliverIO
                  OliverIO @smartnoob last edited by

                  @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

                  S 1 Reply Last reply Reply Quote 0
                  • S
                    smartnoob @OliverIO last edited by 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 1 Reply Last reply Reply Quote 0
                    • OliverIO
                      OliverIO @smartnoob last edited by 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

                      S 1 Reply Last reply Reply Quote 0
                      • S
                        smartnoob @OliverIO last edited by 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 1 Reply Last reply Reply Quote 0
                        • OliverIO
                          OliverIO @smartnoob last edited by

                          @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

                          1. 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;
                          }
                          
                          S 1 Reply Last reply Reply Quote 0
                          • S
                            smartnoob @OliverIO last edited by 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:

                            Screen_Recording_20240804-210619.gif

                            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 2 Replies Last reply Reply Quote 0
                            • OliverIO
                              OliverIO @smartnoob last edited by

                              @smartnoob

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

                              1 Reply Last reply Reply Quote 0
                              • OliverIO
                                OliverIO @smartnoob last edited by

                                @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.

                                S 1 Reply Last reply Reply Quote 0
                                • S
                                  smartnoob @OliverIO last edited by

                                  @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 1 Reply Last reply Reply Quote 0
                                  • OliverIO
                                    OliverIO @smartnoob last edited by 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.

                                    S 1 Reply Last reply Reply Quote 0
                                    • S
                                      smartnoob @OliverIO last edited by

                                      @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!

                                      1 Reply Last reply Reply Quote 0
                                      • First post
                                        Last post

                                      Support us

                                      ioBroker
                                      Community Adapters
                                      Donate

                                      895
                                      Online

                                      31.9k
                                      Users

                                      80.1k
                                      Topics

                                      1.3m
                                      Posts

                                      2
                                      17
                                      749
                                      Loading More Posts
                                      • Oldest to Newest
                                      • Newest to Oldest
                                      • Most Votes
                                      Reply
                                      • Reply as topic
                                      Log in to reply
                                      Community
                                      Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                      The ioBroker Community 2014-2023
                                      logo