Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. CSS Border Einstellungen

    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

    CSS Border Einstellungen

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

      Hallo,

      im DashUi hatte ich teilweise einen Rahmen mit runden ecken genutzt. Hierzu habe ich die CSS Border Einstellungen verwendet:
      317_css_border_einstellungen_dashui.jpg
      317_rahmen_dashui.jpg

      Wenn ich die gleichen Einstellungen im iobroker vornehmen bleiben die Ecken Spitz.
      317_css_border_einstellungen_iobroker.jpg
      317_rahmen_iobroker.jpg

      Hat einer hierzu die Lösung?

      Grüße

      Dirk

      1 Reply Last reply Reply Quote 0
      • B
        bku last edited by

        Also ich hab alle Ecken rund ….

        Hast Du ein spezielles Widget wo es nicht geht?
        304_rund.png

        1 Reply Last reply Reply Quote 0
        • D
          dirkeb last edited by

          Ich würde fast sagen das es bei allen Widgets bei mir nicht geht. (Zumindest habe ich schon mehrere Widgets Auspobiert).

          z.b. basic, static Border, oder aber auch ValueList-HTML Style. Von diesen Widgets habe ich einige in nutzung.

          Grüße

          Dirk

          1 Reply Last reply Reply Quote 0
          • B
            bku last edited by

            Aktuelle vis-Version? Ich kann mich dunkel erinnern, dass anfänglich "px" bei einigen Werten angegeben werden mußte.

            1 Reply Last reply Reply Quote 0
            • D
              dirkeb last edited by

              Die vis Version ist die Aktuellste (von gestern). Geht jetzt aber, es lag an den fehlenden "px".

              Vielen Dank

              Dirk

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

                @dirkeb:

                Die vis Version ist die Aktuellste (von gestern). Geht jetzt aber, es lag an den fehlenden "px".

                Vielen Dank

                Dirk `
                Habe dann trotzdem vis geändert, so dass "px" automatisch dazugefügt werden. Danke.

                1 Reply Last reply Reply Quote 0
                • X
                  Xanon last edited by

                  Hallo,
                  gibt es auch eine Möglichkeit über die CSS Border Einstellungen die Ecken oben rund (links und rechts) zu machen und die Ecken unten eckig (rechts und links)?
                  Oder muss ich mir da ein Image mit PhotoShop erstellen?

                  Homoran foxriver76 sigi234 3 Replies Last reply Reply Quote 0
                  • Homoran
                    Homoran Global Moderator Administrators @Xanon last edited by

                    @Xanon sagte in CSS Border Einstellungen:

                    gibt es auch eine Möglichkeit

                    nein!
                    zumindest nicht in der GUI - ob es über eigene CSS-Klassen geht weiß ich nicht

                    X 1 Reply Last reply Reply Quote 0
                    • X
                      Xanon @Homoran last edited by

                      @Homoran
                      Ok, danke für die schnelle Antwort👍

                      1 Reply Last reply Reply Quote 0
                      • foxriver76
                        foxriver76 Developer @Xanon last edited by

                        @Xanon Du kannst eine CSS-Klasse schreiben und sie dem Widget zuweisen. Photoshop klingt sehr umständlich.

                        X 1 Reply Last reply Reply Quote 0
                        • X
                          Xanon @foxriver76 last edited by

                          @foxriver76 sagte in CSS Border Einstellungen:

                          @Xanon Du kannst eine CSS-Klasse schreiben und sie dem Widget zuweisen <--- 🤣. Photoshop klingt sehr umständlich.

                          Vielen Dank für die Antwort👍🏻
                          Aber neee kann ich nicht 😞

                          foxriver76 1 Reply Last reply Reply Quote 0
                          • foxriver76
                            foxriver76 Developer @Xanon last edited by

                            @Xanon Wieso?

                            Neue CSS-Klasse erstellen, z. B.:

                            .top-radius {
                                border-style: double;
                                border-width: 3px;
                                border-color: white;
                                border-top-left-radius: 20px;
                                border-top-right-radius: 20px;
                            }
                            

                            Werte musst du anpassen. Wichtig ist, dass du den Haken bei "CSS Ränder" im Widget selbst weg machst.

                            Einfügen in vis:
                            Bildschirmfoto von 2019-08-10 16-19-48.png

                            Dann CSS-Klasse im Widget hinzufügen über Generell.
                            Bildschirmfoto von 2019-08-10 16-22-49.png

                            beste Grüße

                            fox

                            1 Reply Last reply Reply Quote 1
                            • sigi234
                              sigi234 Forum Testing Most Active @Xanon last edited by sigi234

                              @Xanon

                              [{"tpl":"tplFrame","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","title":"","title_color":"black","title_top":"-10","title_left":"15","header_height":"0","header_color":"black","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},"style":{"left":"853px","top":"149px","width":"144px","height":"125px","z-index":"0","border-width":"2px","border-style":"solid","border-radius":"5px"},"widgetSet":"basic"},{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"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","refreshInterval":"0","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},"style":{"left":"849px","top":"273px","width":"152px","height":"10px","z-index":"1","background-color":"#000000"},"widgetSet":"basic"},{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"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","refreshInterval":"0","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},"style":{"left":"854px","top":"272px","width":"146px","height":"1px","background-color":"#c0c0bf","z-index":"2"},"widgetSet":"basic"}]
                              

                              Screenshot (3857).png

                              1 Reply Last reply Reply Quote 0
                              • X
                                Xanon last edited by

                                Danke an Euch beiden für die 2 aufgezeigten Varianten.

                                Habe beide ausprobiert und muss sagen, die Variante von foxriver gefällt mir besser (ist schneller und variabler)
                                Danke foxriver auch für die "Super Erklärung"

                                Danke aber auch an sigi234 für die Alternative Darstellung.

                                Mit iobroker / VIS ist echt so viel möglich, wenn man weiß wie 😉

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

                                Support us

                                ioBroker
                                Community Adapters
                                Donate

                                998
                                Online

                                31.8k
                                Users

                                80.0k
                                Topics

                                1.3m
                                Posts

                                7
                                14
                                3173
                                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