Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Error/Bug
    4. [Gelöst] Vis: Views Bar font-family-Änderung keine Funktion

    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] Vis: Views Bar font-family-Änderung keine Funktion

    This topic has been deleted. Only users with topic management privileges can see it.
    • R
      rogerkilo last edited by

      Hallo zusammen,

      ich möchte gern eine andere Schriftart für die views-bar haben und dafür den Font "Ubuntu-Regular" (Google-fonts) ausgewählt.

      Leider kann ich keine Änderung feststellen, die Schriftart in der views-bar bleibt unverändert.

      DIe Änderung eines anderen Widgets, z. B. des jqui-Nav-Buttons führt hingegen zum vollen Erfolg: die Schriftart ändert sich wie gewünscht.

      Gibt es hier einen speziellen "Trick" oder ist das für die views-bar noch nicht umgesetzt?

      Grüße

      Roger
      962_vis-views-bar.jpg

      1 Reply Last reply Reply Quote 0
      • F
        Fitti last edited by

        Geht bei mir auch nicht. Scheint nicht gewollt zu sein - oder ist einfach noch ein Fehler.

        <u>Habe aber ein Workaround für Dich:</u>

        Nehmen wir an, dieses Widget hat die Nummer w00001 (das sieht man ja am Auswahlfenster oder rechts, wenn Du das Widget ausgewählt hast ganz oben in der rechten Spalte), kannst du mittels CSS Befehl dieses anpassen. Nutze einfach in die CSS Spalte den Code:

        #jquerySideBar_w00001 {
            font-family: "Comic Sans MS", cursive, sans-serif ;
        }
        

        Das jquerySideBar_w00001 musst Du dann nur auf Deine Widgetnummer anpassen.

        Ich habe hier einfach Comic genommen, da das am einfachsten zu erkennen war. Du musst Dir dann nur Deinen Ubuntu Font einsetzen.

        Teste es aber vielleicht erst mal mit dem Standard Comic.

        578_2016-10-09_00_05_19-.png 578_2016-10-09_00_07_04-edit_vis.png

        Viel Glück,

        Fitti

        1 Reply Last reply Reply Quote 0
        • R
          rogerkilo last edited by

          Hallo Fitti,

          danke für deine Hilfe.

          Ich hab alles, so wie du es beschrieben hast, berücksichtigt und umgesetzt. Leider stellt sich kein Erfolgserlebnis ein 😞 .

          Wobei andere css-Befehle wie z. B.

          #w00001_input {
                  height: 71% !important;
          }
          

          bei einem jqui-Input-Widget einwandfrei funktionieren.

          Momentan wird ein Windows10-Rechner und der Chrome-Browser genutzt.

          Viele Grüße

          Roger

          1 Reply Last reply Reply Quote 0
          • F
            Fitti last edited by

            Hi Roger,

            hast Du die ID so angepasst, dass diese mit

            #jquerySideBar_

            beginnt und dann deine Widgetnummer, die dieses vis-bat hat, hinzugefügt?

            Also wenn das genutze vis-bar Widget z. B. den Namen w000028 hat, dann wäre in der CSS

            #jquerySideBar_w000028 { …

            einzutragen.

            Bei mir musste ich kein !important verwenden.

            1 Reply Last reply Reply Quote 0
            • R
              rogerkilo last edited by

              Jawoll, es ist alles so eingestellt, wie du es beschrieben hast.

              Mhh, vielleicht habe ich oben etwas missverständlich formuliert.

              Das jqui-Input-Widget w00001 (also ein <u>anderes</u>) kann per css (hier in der Höhe) manipuliert werden, in diesem Fall jedoch nur mit dem !important-Zusatz.

              Das vis-bar-Widget w00002 hingegen lässt sich in meiner Umgebung (wohl) nicht mit css ansteuern, in diesem Fall auch nicht mit !important.

              ioBroker und -adapter sind alle auf dem aktuellen Stand, hab's eben nochmal überprüft.

              Grüße

              Roger
              962_vis-views.jpg

              1 Reply Last reply Reply Quote 0
              • F
                Fitti last edited by

                Ahh, ich habe mein Widget an der Seite klemmen , du nicht.

                Da hat mir ein

                .vis-no-spaces {
                     font-family: "Comic Sans MS", cursive, sans-serif;
                }
                

                geholfen.

                ABER: das ist ziemlich allgemein im CSS - es ist mit Seiteneffekten zu rechnen.

                Sprich: Es kann sein, dass nun mehr Text als gewünscht sich diesen Font zieht.

                Ich habe es nicht geschafft, einen eindeutigen Selektor zu nehmen, der also mit 100%iger Sicherheit nur auf dieses eine Widget wirkt. So wie im ersten Beispiel. Warum das hier nicht geht, habe ich nicht herausgefunden. Selbst ein Wertüberschreiber (important) klappte nicht.

                Aber vielleicht hilft dir das ja dennoch.

                So long,

                Fitti

                1 Reply Last reply Reply Quote 0
                • R
                  rogerkilo last edited by

                  Endlich, dein letztgenannter Befehl führt nun auch bei mir zum gewünschten Erfolg!

                  Dann kann ich ja nun mal ein paar Testseiten erstellen und beobachten, ob sich die Anzeigen dann irgendwie merkwürdig verhalten.

                  Danke noch mal für deine Hilfe und Geduld!

                  Grüße

                  Roger

                  1 Reply Last reply Reply Quote 0
                  • Bluefox
                    Bluefox last edited by

                    Eigentlich es gehört nicht zu ioBroker und ich verstehe nicht warum kann man nicht bei CSS (Google) anschauen, aber ich helfe gerne.
                    48_2016-10-10_13_14_07-program_manager.png

                    Man kann unterschiedlich die Elemente adressieren. Das hängt davon ab ob man mehr oder weniger Elemente adressieren will.

                    Mit

                    #w00011 td {
                      font-weight: bold;  
                    }
                    
                    

                    Wird gezielt nur dieses Widget adressiert.

                    Mit

                    .sidebar-blue td {
                      color: red;  
                    }
                    

                    werden alle bars adressiert, die Theme sidebar-blue haben.

                    Usw.

                    1 Reply Last reply Reply Quote 0
                    • R
                      rogerkilo last edited by

                      Wow, der (Chrome)-Inspector ist natürlich die Top-Profi-Lösung 😉 . Besten Dank!

                      Grüße

                      Roger

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

                      Support us

                      ioBroker
                      Community Adapters
                      Donate

                      856
                      Online

                      31.8k
                      Users

                      80.0k
                      Topics

                      1.3m
                      Posts

                      3
                      9
                      1615
                      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