1. Home
  2. Core System
  3. Feature Requests
  4. Come si cambia il Font nei vari moduli?
MagicMirror² v2.13.0 is available! For more information about this release, check out this topic.

Come si cambia il Font nei vari moduli?

  • Alex2020

    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.

    0 S 1 Reply
  • S

    @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) ..
    0
  • Alex2020

    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.

    0 S 1 Reply
  • S

    @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

    ====

    scusa, non so come farlo

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

    0
  • Alex2020

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

    0 S 1 Reply
  • S

    @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

    0
Log in to reply
 
Enjoying MagicMirror? Please consider a donation!