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.

    Change size and / or font from different modules ?

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    2 Posts 2 Posters 283 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
      aldisachen
      last edited by sdetweil

      Hello together,
      is´s possible to chaneg the size from diff. modules (for example : clock, weather, complinets) ?
      What is neccessary to change that ?
      I want add modules, but i don´t have enough space at the MM.

      Thanks in advance,

      S 1 Reply Last reply Reply Quote 0
      • S Do not disturb
        sdetweil @aldisachen
        last edited by sdetweil

        @aldisachen yes, using styles, css, you can change all the content. BUT it is module by module

        some (the default modules for sure) use the generic styles we provide. see css/main.css

        each module should document in a css file in their folder how they use those styles

        the css architecture allows one to override styles later, in MagicMirror by adding info into custom.css.

        a css entry is

        selector_clause  {
           styles applied to the elements selected
        }
        

        the selector clause can be simple or complex
        first char as a dot means class (class= on an html tag)
        as a pound sign means id (id= on an html tag)
        none means an html tag (img, table…)

        a class holds a collection of styles
        font-size, color, font, etc

        css allows you to override styles later one or more styles at a time

        each module name is used in a class on the surrounding html div of the content the module creates
        that way you can target just one modules content in their selector with

        .module_name
        

        if a module doesn’t give a good way to alter its styles you can still select the html elements
        see the second link in my signature below for an example of how to use the browser developer window elements tab to examine and test style changes to determine what should go in custom.css

        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