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 874 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.
    • Alex2020A Offline
      Alex2020
      last edited by

      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 Reply Quote 0
      • S Offline
        sdetweil @Alex2020
        last edited by

        @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
        • Alex2020A Offline
          Alex2020
          last edited by

          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 Reply Quote 0
          • S Offline
            sdetweil @Alex2020
            last edited by

            @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
            • Alex2020A Offline
              Alex2020
              last edited by

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

              S 1 Reply Last reply Reply Quote 0
              • S Offline
                sdetweil @Alex2020
                last edited by sdetweil

                @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
                • First post
                  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