Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Image position ueber CSS aendern

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.4k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.0k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    15
    1
    2.5k

Image position ueber CSS aendern

Geplant Angeheftet Gesperrt Verschoben Visualisierung
8 Beiträge 2 Kommentatoren 1.5k Aufrufe
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • M Offline
    M Offline
    mickyboys
    schrieb am zuletzt editiert von
    #1

    Moin,

    Habe dazu keine Antwort gefunden.

    Bei vielen Widgets kann man ein Image/ Bild einfuegen. Nun sind die Images aber oft fix - Wie kann ich die Position schieben, sprich das geladene Image innerhalb des Buttons damit es zentriert oder meinen Beduerfnissen gerecht wird, am besten ueber CSS, oder?

    In meinem Fall verwende ich das ctrl-icon-widget.

    Danke,

    Axel

    1 Antwort Letzte Antwort
    0
    • HomoranH Nicht stören
      HomoranH Nicht stören
      Homoran
      Global Moderator Administrators
      schrieb am zuletzt editiert von
      #2

      Ist es das was du suchst?
      144_padding.jpg

      Gruß

      Rainer

      kein Support per PN! - Fragen im Forum stellen - es gibt fast nichts, was nicht auch für andere interessant ist.

      Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

      der Installationsfixer: curl -fsL https://iobroker.net/fix.sh | bash -

      1 Antwort Letzte Antwort
      0
      • M Offline
        M Offline
        mickyboys
        schrieb am zuletzt editiert von
        #3

        Moin,

        Ja genau, denke das waere genau das was ich brauche… im CSS Allgemein ist es nicht enthalten, also wohl ueber CSS, aber wie?

        Danke,

        Axel

        1 Antwort Letzte Antwort
        0
        • M Offline
          M Offline
          mickyboys
          schrieb am zuletzt editiert von
          #4

          @Homoran:

          Ist es das was du suchst?

          padding.jpg

          Gruß

          Rainer `

          Funktioniert nicht.

          Also, ich habe ueber CSS den Button als Design erstellt. Bei den Widget einstellungen habe ich dann ein Bild eingefuegt, in meinem Fall ein Sender Logo. Dieses wiederum ist falsch positioniert, viel zu weit oben. Wenn ich jetzt das padding in den Einstellungen benutze aendere ich den ganzen Button und nicht nur Logo/ Icon…

          Warum muss alles so schwierig sein :o

          1 Antwort Letzte Antwort
          0
          • HomoranH Nicht stören
            HomoranH Nicht stören
            Homoran
            Global Moderator Administrators
            schrieb am zuletzt editiert von
            #5

            Ich weiß nicht wo du die Probleme hast.

            Mach doch bitte mal einen Screenshot.

            Ich habe ein stinknormales Bild eingefügt.

            Mangels installierter Icon-Sets in dieser Installation habe ich das flot Logo genommen.

            Unter Allgemein kannst du die Bildgröße (Icon-Größe) ändern.
            144_padding02.jpg

            Mit dem Padding kannst du die Abstände verschieben.

            Üblicherweise ist das Icon aber zentriert, wenn die Größe zum Button passt.

            Vorübergehend wird bei "unsinnigen" Werten beim Padding auch der Button vergrößert, den kann man aber wieder verkleinern.

            und dann die Bildgröße anpassen.

            Bitte mach einen Screenshot vor dem anpassen des paddings und eines danach, damit ich nachvollziehen kann, was du machst.

            Gruß

            Rainer

            kein Support per PN! - Fragen im Forum stellen - es gibt fast nichts, was nicht auch für andere interessant ist.

            Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

            der Installationsfixer: curl -fsL https://iobroker.net/fix.sh | bash -

            1 Antwort Letzte Antwort
            0
            • M Offline
              M Offline
              mickyboys
              schrieb am zuletzt editiert von
              #6

              what??? Das Kontingent für Dateianhänge ist bereits vollständig ausgenutzt.

              Ich kann nichts mehr hochladen…

              Das padding veraendert auch meinen Button, nicht nur das Icon.

              1 Antwort Letzte Antwort
              0
              • HomoranH Nicht stören
                HomoranH Nicht stören
                Homoran
                Global Moderator Administrators
                schrieb am zuletzt editiert von
                #7

                @mickyboys:

                what??? Das Kontingent für Dateianhänge ist bereits vollständig ausgenutzt.

                Ich kann nichts mehr hochladen… `
                Da muss @Bluefox mal nachsehen :(

                @mickyboys:

                Das padding veraendert auch meinen Button, nicht nur das Icon. `
                …und anschließend wieder mit der MAus auf die gewünschte Größe ziehen und das Icon anpassen!

                BTW ist das icon nativ vielleicht zu groß?

                oder hat es irgendwelche (unsichtbare) Ränder.

                Ich habe da keine Probleme.

                Gruß

                Rainer

                kein Support per PN! - Fragen im Forum stellen - es gibt fast nichts, was nicht auch für andere interessant ist.

                Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                der Installationsfixer: curl -fsL https://iobroker.net/fix.sh | bash -

                1 Antwort Letzte Antwort
                0
                • M Offline
                  M Offline
                  mickyboys
                  schrieb am zuletzt editiert von
                  #8

                  Mhm, das ergibt nur ungenaue Ergebnisse. Ich frage mich wie man ueber CSS bei dem ctrl-icon widget die groesse des Icons separat zum Widget aendern kann. Ich kenne den Namen nicht ueber dem ich in CSS das padding ansteuern koennte.

                  Ueber Quelle wird es hinzugefuegt.

                  1 Antwort Letzte Antwort
                  0
                  Antworten
                  • In einem neuen Thema antworten
                  Anmelden zum Antworten
                  • Älteste zuerst
                  • Neuste zuerst
                  • Meiste Stimmen


                  Support us

                  ioBroker
                  Community Adapters
                  Donate

                  356

                  Online

                  32.4k

                  Benutzer

                  81.4k

                  Themen

                  1.3m

                  Beiträge
                  Community
                  Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                  ioBroker Community 2014-2025
                  logo
                  • Anmelden

                  • Du hast noch kein Konto? Registrieren

                  • Anmelden oder registrieren, um zu suchen
                  • Erster Beitrag
                    Letzter Beitrag
                  0
                  • Home
                  • Aktuell
                  • Tags
                  • Ungelesen 0
                  • Kategorien
                  • Unreplied
                  • Beliebt
                  • GitHub
                  • Docu
                  • Hilfe