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.

    Resizing font size of modules

    Scheduled Pinned Locked Moved Solved Troubleshooting
    26 Posts 3 Posters 12.9k Views 3 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.
    • R Offline
      Rags @sdetweil
      last edited by

      @sdetweil i am sorry but i am unable to follow correctly what u are advising. However, the HTML code does not seem to contain the newsfeed title descrp. nf32023-04-26_20-53-20.png
      i think i selected the module content to expand, and i also changed the custom.css entry as suggested. The style display window is not showing the newsfeed entry. I am again not sure if i am doing the right thing. Anyways i am learning as we go.
      On second thoughts the process of changing the font size is so tedious (as it seems to me now), I wonder if there is an alternate way.

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

        @Rags but you didn’t select the actual content (note that it is replaced every updateInterval time cycle… )

        forum image.png

        if u aren’t looking at the actual element, then you won’t see its classes and styles…

        sometimes this is tedious work.

        here is an updated image with the areas selected in white,
        highlighted content (left screen)
        expanded document w selected content (middle)
        class tree (right)

        and I used the mouse pointer (pink) to allow highlight and click on the newsfeed title

        and you can test type the styles in the top box, (green) , to make sure they are right, before you copy/paste that section to the custom.css

        Screenshot at 2023-04-26 10-49-19.png

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        R 1 Reply Last reply Reply Quote 0
        • R Offline
          Rags @sdetweil
          last edited by

          @sdetweil nf4.png
          After struggling, this is what i managed to take a screenshot of. It does not show the styles of the selected content in the dev screen.

          M S 3 Replies Last reply Reply Quote 0
          • M Offline
            MMRIZE @Rags
            last edited by

            @Rags
            It means your CSS(probably custom.css) is not applied.

            The reasons might be;

            • Fail to load custom.css (invalid file name or location)
            • Syntax error in your custom.css

            I can see the red circled X mark in your console. You can check it in Console tab(right of Elements tab) or click that mark directly.

            1 Reply Last reply Reply Quote 0
            • M Offline
              MMRIZE @Rags
              last edited by MMRIZE

              @Rags

              To make things simple;

              1. All other modules except newsfeed, remove or disable them. (It seems you have more than 28 modules currently)
              {
                disabled: true, // <-- toggle the module disabled/enabled
                module: "weather",
                position: "top_right",
                ...
              
              1. Return to custom.css to the original, or remove all its contents.

              2. Now, I’ll assume you have a clean CSS.

              3. Then just add this into your custom.css and save it.

              .newsfeed .newsfeed-title {
                font-size: 60px;
              }
              
              .newsfeed .newsfeed-source {
                font-size: 40px;
              }
              
              1. Let’s see what happens when MM runs.
              1 Reply Last reply Reply Quote 0
              • S Offline
                sdetweil @Rags
                last edited by sdetweil

                @Rags using your image, marked up for color

                forum2.png

                the styles tree pane (right side, orange) shows info for only ONE element at a time

                look at the bottom row of the element tree pane(left side, blue), right edge, says u have the module-content element selected (purple), not the newsfeed-title element(green)

                because the module replaces it’s content every updateInterval cycle, the developers window will reselect the first element not replaced if your selected element disappears

                that’s why I said set the interval to 60 seconds to give u time to look and change

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                R 1 Reply Last reply Reply Quote 0
                • R Offline
                  Rags @sdetweil
                  last edited by Rags

                  @MMRIZE Finally ! Finally…
                  I disabled all modules, except newsfeed, then cleared out the custom.css configs and added a fresh config for newsfeed as suggested above and finally it worked.
                  So was the issue just because of the corrupt custom.css?
                  Anyways, this issue has enabled me to learn working with the developer console. I am glad.
                  Thank you @MMRIZE and thank you @sdetweil . Ever obliged.

                  nfs2.png

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

                    @Rags glad u got it working

                    one thing to note, if there is a syntax error in the custom.css, everything ABOVE the error will work, everything AFTER will not

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    R 1 Reply Last reply Reply Quote 0
                    • R Offline
                      Rags @sdetweil
                      last edited by

                      @sdetweil Sure noted. Thanks

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 3 / 3
                      • 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