Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS Styles deaktivieren

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    CSS Styles deaktivieren

    Hallo Wolfram,

    … Apropos Style... kann man die background-color in Zeile 411 (Active slider track) auch durch eigene Styles nachträglich wieder "deaktivieren" ohne die Original-Datei zu ändern? Mit dem blauen Background sieht man dann nämlich blaue Icons dort nicht mehr und ich habe die Zeile daher mangels besseren Wissens in der Original-Datei auskommentiert, da designs in dropins (noch) nicht vorgesehen sind.


    EDIT wvhn: Thema abgetrennt von hier.
    Zuletzt geändert von ares72; 01.03.2022, 12:44.

    #2
    Jede CSS-Definition kannst Du in der visu.css im Ordner Deiner eigenen Seiten überschreiben.

    Gruß
    Wolfram
    Zuletzt geändert von wvhn; 28.02.2022, 07:47.

    Kommentar


      #3
      Wie ich in meiner visu.css die background-color passend überschreibe habe ich nicht herausgefunden, da ich hier leider nach Versuch und Irrtum vorgehen muss.

      Manfred

      PS: Mir fällt gerade auf, dass ich mich mit meinen eigenen Icons in dropins für SW oder WS entscheiden muss. Oder kann ich das {{ icon0 }} irgendwie trotz Pfad integrieren?
      Zuletzt geändert von wvhn; 28.02.2022, 07:56.

      Kommentar


        #4
        Ich hab noch nicht ganz verstanden, warum Du die Hintergrundfarbe des Slider-Tracks loswerden willst. Eigentlich sollten da ja keine Icons dahinter sein.
        Wenn Du das durch Auskommentieren der Zeile 411 in der darkblue.css gelöst hast, müsstest Du das gleiche Ergebnis erzielen mit folgendem Code in der visu.css:
        Code:
        .ui-page-theme-a .ui-slider-track .ui-btn-active,
        html .ui-bar-a .ui-slider-track .ui-btn-active,
        html .ui-body-a .ui-slider-track .ui-btn-active,
        html body .ui-group-theme-a .ui-slider-track .ui-btn-active,
        html body div.ui-slider-track.ui-body-a .ui-btn-active {
            background-color: transparent;
        }
        Die visu.css wird als letzte css-Definition eingelesen und überschreibt ältere Definitionen für dieselben Selektoren.

        Die eigenen icons müsstest Du mit "dropins/{{ icon0 }}" adressieren können.

        Gruß
        Wolfram

        Kommentar


          #5
          Bilder sagen mehr als tausend Worte.
          Lass es mich am Beispiel "Example1.smarthome" zeigen.
          • Bild inactive.png: erster Klick auf "Flure / Nebenräume"
          • Bild active.png: zweiter Klick auf "Flure / Nebenräume" mit Original-Design und blauen Icons auf blauem Hintergrund
          • Bild auskommentiert.png: zweiter Klick auf "Flure / Nebenräume" mit Original-Design ohne Zeile 411 > background-color: #22aadd
          Das mit den Icons klappt aber und auf die Syntax wär ich nie gekommen - DANKE:
          Code:
          src="dropins/{{ icon0 }}/iconname.svg"/>
          Viele Grüße
          Manfred
          Angehängte Dateien

          Kommentar


            #6
            ares72 Ich hab das Thema mal abgetrennt, denn sonst wird es zu sehr off-topic.

            Das geschilderte Problem lässt sich bei mir schwer reproduzieren. Mit Firefox ist es mir nicht gelungen - mit Edge dann doch. Üblicherweise wird die Schaltfläche kurz aktiv (mit Hintergrundfarbe) und wechselt dann zurück in den inaktiven Zustand. Letzteres klappt manchmal nicht, wenn man die Schaltfläche anklickt, bevor die Seite fertig geladen ist. Das müsste man sicherlich programmatisch abfangen - oder man muss einfach mehr Geduld beim Bedienen der Visu aufbringen

            Wenn das zu häufig vorkommt, kann man das Verhalten in der visu.css gezielt für diesen Fall abstellen:
            Code:
            .ui-listview>li .ui-btn.ui-btn-active {
                background-color: transparent;
            }
            Gruß
            Wolfram

            Kommentar


              #7
              Hallo Wolfram,

              bei mir tritt das in Brave/Chrome auch mit wahrscheinlich immer noch zu wenige Geduld weiterhin häufig auf. Mit den Beispiel-Pages teste ich aber auch nicht so häufig und vielleicht liegt es ja auch an nur meiner Page, dass das bei mir reproduzierbar auftritt. Auf Wunsch kann ich gerne versuchen ein Minimal-Beispiel zu erstellen, aber nur falls Dir ansonsten langweilig wird.
              Dein Vorschlag zur Änderung in der visu.css meiner Seite hat (bei mir) irgendwie nicht funktionieren wollen, ich hatte das anstatt transparent auch absichtlich mit rot getestet, allerdings weiterhin das blau erhalten. Bisher war daher das Auskommentieren leider das einzige das bei mir dauerhaft geholfen hat.

              Falls das bei Dir nicht wirklich nachvollziehbar ist, dann bin ich vielleicht ein Einzelfall, habe aber einen funktionierenden Workaround.

              Danke
              Manfred

              Kommentar


                #8
                Hmm.
                Den smartVISU-Cache und den Browser-Cache hast Du gelöscht? Die visu.css muss im Verzeichnis derjenigen Seiten liegen, die Du gerade testest. Und die root.html, in der die css-Definitionen importiert werden, sollte unverändert sein.

                Hab nochmal ein bisschen selbst getestet. Die darkblue.css ist deutlich anders aufgebaut, als die übrigen Designs. Es fehlen auch einige Definitionen, z.B. weitere "swatches". Der oben gezeigte Code in der visu.css hilft bei mir zuverlässig in allen Browsern - allerdings NUR beim Design darkblue. Dafür hatte ich ihn ja auch erstellt.

                Das "Aktivieren" der Schaltflächen hat mit Ungeduld doch nichts zu tun. Die Schaltflächen werden aktiviert, wenn die im zugehörigen Link enthaltene Seite bereits angezeigt wird und man dann die Schaltfläche am oberen oder unteren Rand anklickt. Das sollte so nicht sein und das muss ich mir mal näher ansehen.

                Gruß
                Wolfram

                Kommentar


                  #9
                  Hallo Wolfram,

                  mein Workaround funktioniert nicht mehr im Zusammenspiel mit dem USZU-Plugin, daher brauch ich bitte nochmal Deine Hilfe.

                  Das von Dir festgestellte Verhalten tritt bei mir deutlich "zu häufig" aufund ich bekomme das mit Deinem Code nicht ans Laufen.
                  Ich habe Deinen Code ans Ende der visu.css meiner Seite gestellt und die restlichen stylesheets dort funktionieren auch.

                  Hast Du eine Idee, was ich falsch mache, da das bei mir nicht funktionieren will?

                  Viele Grüße
                  Manfred

                  Kommentar


                    #10
                    Hallo Manfred,

                    der Effekt tritt auf, wenn man auf einer bestimmten Seite ist und dann den Link / Menüpunkt für diese Seite noch einmal aufruft. jQuery mobile setzt für den Übergang zwischen zwei Seiten die Klasse .ui-btn-active und entfernt diese nach dem Übergang wieder. Wenn man aber auf der selben Seite bleibt, klappt das Entfernen der Klasse nicht mehr.

                    Ich habe jetzt eine CSS-Definition für die visu.css, die für alle Designs mit dunklem Hintergrund funktioniert. Sie setzt die Einstellungen für die Klasse ui-btn-active auf die CSS-Eigenschaften der inaktiven Schaltfläche.
                    Code:
                    .ui-listview>li .ui-btn.ui-btn-active {
                        background-image: linear-gradient( #444444 , #2d2d2d );
                        color: #fff;
                        text-shadow: 0 1px 1px #111;
                    }
                    Nachteil ist, dass die Schaltfläche beim Betätigen nicht mehr kurz aufleuchtet. Fürs erste sollte man aber damit leben können. Vielleicht finde ich ja noch einen Workaround für das Verhalten von jQuery mobile.

                    Das Auskommentieren in der darkblue.css musst Du dann natürlich rückgängig machen. Dann funzt auch das UZSU-Popup wieder richtig. Die visu.css muss im Verzeichnis der Seiten sein, die Du verwendest, also auch in den Verzeichnissen der Beispielseiten, wenn Du diese auch mit der Änderung ausstatten willst.

                    Gruß
                    Wolfram

                    Kommentar


                      #11
                      Hallo Wolfram,

                      erstmal vielen Dank, dass Du Dich noch so spät um meine Probleme kümmerst. Ich hoffe, Du kannst nur wegen der aktuellen Hitze nicht schlafen...
                      Auf das "kurz aufleuchten" kann ich gerne verzichten, ein blauer Button mit blauem Inhalt bleibt und fällt deutlich mehr auf.

                      Ich habe auf meiner Raum-Seite oben noch ein vertikales Menü zum Unterteilen der Heizung, das auf allen Heizungsseiten eingebunden wird.
                      Dort ist mir das Verhalten eigentlich aufgefallen, nicht im Menü links, wo ich das mit etwas Geduld und "unten klicken" aber reproduzieren konnte.
                      Code:
                      {% include 'rooms/Keller_Heizung_menu.html' %}
                      Code:
                      <style>
                      .nav-custom .ui-btn {
                      padding-top: 0px !important;
                      padding-bottom: 4px !important;
                      }
                      </style>
                      
                      <div data-role="navbar" class="nav-custom">
                      <ul>
                      <li><a href="index.php?page=rooms/Keller_Heizung">
                      <img class="icon {% if page == 'Keller_Heizung' %}icon1{% else %}icon0{% endif %}"
                      src="dropins/{{ icon0 }}/LWZ403SOL.svg"/>
                      <br>Info</a></li>
                      
                      <li><a href="index.php?page=rooms/Keller_Heizung_Lueftung">
                      <img class="icon {% if page == 'Keller_Heizung_Lueftung' %}icon1{% else %}icon0{% endif %}"
                      src="{{ icon0 }}vent_ventilation_level_automatic.svg"/>
                      <br>Lüftung</a></li>
                      
                      <li><a href="index.php?page=rooms/Keller_Heizung_24h">
                      <img class="icon {% if page == 'Keller_Heizung_24h' %}icon1{% else %}icon0{% endif %}"
                      src="{{ icon0 }}time_graph.svg"/>
                      <br>24h</a></li>
                      
                      <li><a href="index.php?page=rooms/Keller_Heizung_Leistungsaufnahme">
                      <img class="icon {% if page == 'Keller_Heizung_Leistungsaufnahme' %}icon1{% else %}icon0{% endif %}"
                      src="{{ icon0 }}measure_power_meter.svg"/>
                      <br>kWh</a></li>
                      </ul>
                      </div>
                      Mit Deinem Beispiel und viel Versuch&Irrtum, da ich mich mit CSS überhaupt nicht auskenne, habe ich noch einen zweiten Block eingefügt.
                      Code:
                      .ui-grid-c>li .ui-btn.ui-btn-active {
                      background-image: linear-gradient( , #2d2d2d );
                      color: #fff;
                      text-shadow: 0 1px 1px #111;
                      }
                      Wie das zum code oben passt verstehe ich nicht, aber es funktioniert nun mit der Original darkblue.css und der UZSU. DANKE!

                      Kann man ".ui-listview" und ".ui-grid-c" auch zusammenfassen bzw. universell alle ".ui-btn.ui-btn-active" so anpassen?

                      Viele Grüße
                      Manfred

                      Edit: Klappt das auch in der darkblue.css, damit andere Styles nicht ebenfalls beeinflusst werden?
                      Zuletzt geändert von ares72; 20.07.2022, 01:13.

                      Kommentar


                        #12
                        Guten Morgen Manfred,

                        prima, dass das geklappt hat.

                        Da die CSS-Klassen einen einheitlichen Stil sicher stellen und überall in jQuery mobile Widgets verwendet werden, kann es zu unerwünschten Ergebnissen kommen, wenn man alle Kombinationen mit .ui-btn-active global anpasst. Das hat das UZSU-Popup schon gezeigt. Deshalb bevorzuge ich selektive Änderungen dort, wo einem die Darstellung nicht gefällt.

                        Die Änderungen kannst Du natürlich auch in die darkblue.css schreiben. Dann musst Du halt bei jedem Update von smartVISU sicher stellen, dass sie nicht verloren gehen. Wenn Du häufig die Designs wechselst und auch die hellen Designs (z.B. Ice) nutzt, dann ist das sinnvoll.

                        Sind die beiden Threads damit für Dich gelöst? Dann editiere bitte jeweils den ersten Post und setze das „Präfix“ (oben links) auf „gelöst“.

                        Gruß
                        Wolfram

                        Kommentar


                          #13
                          Hallo Wolfram,

                          bei anderen Designs ist das Icon ja immerhin noch erkennbar, bei darkblue sieht man aber nur noch eine einfarbige Fläche.

                          Ich bevorzuge daher die Änderung direkt in darkblue.css auch wenn ich das dann bei Updates nachziehen muss.
                          Code:
                          .ui-grid-c>li .ui-btn.ui-btn-active,
                          .ui-listview>li .ui-btn.ui-btn-active {
                          background-image: linear-gradient( , #2d2d2d );
                          color: #fff;
                          text-shadow: 0 1px 1px #111;
                          }
                          Für andere Designs kann man das bei Bedarf mit angepassten Farben übernehmen.

                          Falls Du keinen passenden Workaround für für das Verhalten von jQuery mobile findest, dann ist eventuell eine Übernahme in den Standard sinnvoll, da die Änderung im Vergleich alten Lösung zumindest aus meiner Sicht besser aussieht.

                          Danke
                          Manfred
                          Zuletzt geändert von ares72; 20.07.2022, 10:02.

                          Kommentar

                          Lädt...
                          X