• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Come si cambia il Font nei vari moduli?

Scheduled Pinned Locked Moved Unsolved Feature Requests
6 Posts 2 Posters 938 Views 2 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • A Offline
    Alex2020
    last edited by Jan 18, 2020, 4:46 PM

    Salve,mi chiamo Alessandro sono di iscrizione recente sto combattendo da giorni e cercare di capire di quale sia il metodo più semplice per cambiare il Font ad un determinato modulo esempio modulo "Compliments"ho provato a scaricare da un sito internet un Font qualsaisi sia con estensione ttf, sia con estensione woff e woff2,ma dopo non so proprio come fare so che bisogna usare @font-face però non so come si fa e su quale directory agire,potreste aiutarmi con una guida passo passo?Grazie.

    S 1 Reply Last reply Jan 18, 2020, 6:56 PM Reply Quote 0
    • S Offline
      sdetweil @Alex2020
      last edited by Jan 18, 2020, 6:56 PM

      @Alex2020 said in Come si cambia il Font nei vari moduli?:

      each module uses is own selection of fonts and names for portions of its output.

      to change some output of a module, you must select the individual element of its output, by use the css class name assigned by the developer…

      many times these are not listed, or are not set at all.

      u can look thru the module README.md file to see if the author documented the classes used, (and how) and what u might be able to change via the configuration entry in config.js

      for example, the default calendar, documents 4 class elements

      tableClass	Name of the classes issued from main.css.
      Possible values: xsmall, small, medium, large, xlarge.
      Default value: small.
      symbolClass	Add a class to the cell of symbol.
      titleClass	Add a class to the title's cell.
      timeClass	Add a class to the time's cell.
      
      

      you can specify in config.js the actual class name to use for these calendar element
      (each line has 3 elements, symbol, title and time)
      the whole table can also have a class assigned

      then if the css class does not exist, our u want to change it,
      you edit the

      ~/MagicMirror/css/custom.css
      

      file
      and insert the class/style info

      start with a dot and the module name

      .calendar
      

      and then the class name

      .calendar .classname {
      ...
      ...
      ...
      }
      

      if the module name is MMM-ImagesPhotos
      then the css entry would be

      .MMM-ImagesPhotos .???class name {
      ...
      ...
      ...
      }
      

      many times one must read the code to determine what/how classes were used by the author

      I use Notepad++ on my windows machine, edit the file with the same name as the module (we call that moduleName.js for short) use the search function, and search for ‘className’, all occurance in THIS file

      then will see where the developer used that info (or not)…

      I used a translator for this, so any mistakes are from auto generation

      =====

      ogni modulo utilizza la propria selezione di caratteri e nomi per porzioni del suo output.

      per modificare alcuni output di un modulo, è necessario selezionare il singolo elemento del suo output, utilizzando il nome della classe css assegnato dallo sviluppatore.

      molte volte questi non sono elencati o non sono impostati affatto.

      puoi consultare il file README.md del modulo per vedere se l’autore ha documentato le classi utilizzate, (e come) e cosa potresti essere in grado di cambiare tramite la voce di configurazione in config.js

      ad esempio, il calendario predefinito, documenta 4 elementi di classe

      tableClass Nome delle classi emesse da main.css.
      Valori possibili: xsmall, small, medium, large, xlarge.
      Valore predefinito: piccolo.
      symbolClass Aggiunge una classe alla cella del simbolo.
      titleClass Aggiunge una classe alla cella del titolo.
      timeClass Aggiunge una classe alla cella del tempo.
      
      

      puoi specificare in config.js il nome della classe effettiva da utilizzare per questi elementi del calendario
      (ogni riga ha 3 elementi, simbolo, titolo e ora)
      all’intera tabella può anche essere assegnata una classe

      quindi se la classe css non esiste, vogliamo cambiarla,
      si modifica il

      ~ / MagicMirror / css / custom.css
      

      file
      e inserisci le informazioni di classe / stile

      inizia con un punto e il nome del modulo
      `` `
      .calendario

      e quindi il nome della classe
      

      .calendar .classname {
      …
      …
      …
      }

      se il nome del modulo è MMM-ImagesPhotos
      allora la voce css sarebbe
      

      .MMM-ImagesPhotos. ??? nome classe {
      …
      …
      …
      }

      
      molte volte è necessario leggere il codice per determinare quali / come classi sono state utilizzate dall'autore
      
      Uso Notepad++ sul mio computer Windows, modifico il file con lo stesso nome del modulo (in breve chiamiamo moduleName.js) uso la funzione di ricerca e cerco "className", tutto presente in questo file
      
      quindi vedrà dove lo sviluppatore ha utilizzato tali informazioni (o meno) ..

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 0
      • A Offline
        Alex2020
        last edited by Jan 18, 2020, 7:08 PM

        Grazie per avermi risposto, dato che il Font del Magic Mirorr per default ho capito che è Roboto avendo visto che all’interno della cartella Fonts è Roboto.css ed è configurato con @font face pensavo che scaricandomi un Font esempio Verdana e sostituendolo a Roboto mi desse la soluzione invece non è cosi?Appena ti sarà possibile puoi farmi un esempio pratico o se sai un sito dove spiega passo passo la procedura da fare ?Grazie.

        S 1 Reply Last reply Jan 18, 2020, 7:15 PM Reply Quote 0
        • S Offline
          sdetweil @Alex2020
          last edited by Jan 18, 2020, 7:15 PM

          @Alex2020

          sorry, I don’t know how to do that

          the fonts are in MagicMirror/fonts
          and are referenced in the main
          index.html file

          <link rel="stylesheet" type="text/css" href="fonts/roboto.css">
          

          ====

          scusa, non so come farlo

          i caratteri sono in MagicMirror / fonts
          e sono referenziati nel principale
          file index.html

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • A Offline
            Alex2020
            last edited by Jan 18, 2020, 7:17 PM

            Tu sei riuscito a cambiare il tipo di Font su un modulo qualsiasi?Grazie.

            S 1 Reply Last reply Jan 18, 2020, 7:19 PM Reply Quote 0
            • S Offline
              sdetweil @Alex2020
              last edited by sdetweil Jan 19, 2020, 4:30 AM Jan 18, 2020, 7:19 PM

              @Alex2020 I have never tried this. as I said, I do not know

              ====

              Non l’ho mai provato. come ho detto i, non lo so

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • 1 / 1
              1 / 1
              • First post
                5/6
                Last post
              Enjoying MagicMirror? Please consider a donation!
              MagicMirror created by Michael Teeuw.
              Forum managed by Sam, technical setup by Karsten.
              This forum is using NodeBB as its core | Contributors
              Contact | Privacy Policy