Ankündigung

Einklappen
Keine Ankündigung bisher.

Größe von "Dynamic Icons" ändern

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

    Größe von "Dynamic Icons" ändern

    Hallo

    ich verzweifle ein wenig.
    Ich möchte vom Icon icon.battery die Größe ändern.
    Wie stelle ich das an.

    Vielen Dank im Voraus für Eure Hilfe

    Gruß
    Daniel

    #2
    Hi!
    Die SVG-icons sind über CSS anpassbar, wie auch in der Doku beschrieben:

    ".svg-images only need a style-sheet, defined in the design"

    icon.PNG
    würde allerdings nicht empfehlen das in der "base.css" zu tun, sonst bekommst du beim nächsten Update von SmartVISU mitunter Stress wenn die Datei überschrieben wird.
    In deinem page-ordner sollte es eine "visu.css" geben. Ich würde mal versuchen deine Anpassungen dort zu hinterlegen um base.css so zu überschreiben...

    Grüße

    Kommentar


      #3
      Hallo thengsty

      Danke für Deine Antwort!

      Das dachte ich auch. Aber das gilt nur für "normale" icons nicht aber für die dynamischen wie icon.battery.

      Zumindest werden bei mir nach der Änderung von .icon alle Icons größer, nur nicht das dynamische...

      Gruß
      Daniel


      Kommentar


        #4
        Ich konnte das Problem lösen und möchte kurz meinen Ansatz erklären.
        Evtl. hilft es einem anderen Einsteiger weiter...

        Ich habe eine neue klasse dynamicicon in der visu.css angelegt
        Code:
        .dynamicicon .icon {
          width: 100px;
          height: 100px;
        }
        und dann das icon.battery in der neuen klasse aufgerufen
        Code:
        <div class="dynamicicon">
                        {{ icon.battery('icon4', '', 'KG.StromPv.SbAktuell.Ladezustand', '', '100', '#32CD32') }}
                    </div>
        damit funktioniert es.

        Kommentar


          #5
          Jo, genau.
          Das sollte aber auch über die ID des Icons funktionieren, dann kannst du dir das zusätzliche div sparen...

          HTML-Code:
          #index-icon4.icon.icon1{
          width: 200px;
          height: 200px;
          }
          "index" ist deine Smartvisu-Seite in der das icon eingebunden wurde.

          Kommentar


            #6
            Ok, das teste ich gleich noch.
            Vielen Dank!

            Gruß
            Daniel

            Kommentar

            Lädt...
            X