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.

    Newsfeed size

    Scheduled Pinned Locked Moved Custom CSS
    29 Posts 4 Posters 9.8k Views 4 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.
    • Mykle1M Offline
      Mykle1 Project Sponsor Module Developer @Kenta
      last edited by

      @Kenta

      Assuming we are talking about the default newsfeed module, I could only identify two classes.

      The title

      .newsfeed .bright.medium.light {
        font-size: 60px;
        line-height: 60px;
      }
      

      And the source

      .newsfeed .light.small.dimmed {
        font-size: 60px;
        line-height: 60px;
      }
      

      I’m not seeing another. As you can see from my picture both rules are working. Are you using BOTH of these?

      .newsfeed .bright.medium.light {
        font-size: 60px;
        line-height: 60px;
      }
      
      .newsfeed .light.small.dimmed {
        font-size: 60px;
        line-height: 60px;
      }
      

      Maybe I’m using an old version? Open the dev console when the mirror is running and identify the third class, if there is one.

      Create a working config
      How to add modules

      K 1 Reply Last reply Reply Quote 0
      • K Offline
        Kenta @Mykle1
        last edited by Kenta

        @Mykle1
        None of those help. The first gives a bigger headline, as I’ve showed in previous posts, the other one a bigger name of news channel/time of occurrence.
        In dev I see this alt text

        K 1 Reply Last reply Reply Quote 0
        • K Offline
          Kenta @Kenta
          last edited by

          This post is deleted!
          1 Reply Last reply Reply Quote 0
          • K Offline
            Kenta
            last edited by

            this

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

              @Kenta posting pictures does not work… u have to link to them uploaded somewhere else

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              K 1 Reply Last reply Reply Quote 0
              • K Offline
                Kenta @sdetweil
                last edited by

                @sdetweil
                As previously stated, I’m a complete n00b. It’s sad because I want to be a nerd 😂
                Yeah I’ve tried unsuccessfully to post images, but this last one was a link to a Dropbox image. Did it not work.?

                S 3 Replies Last reply Reply Quote 0
                • S Offline
                  sdetweil @Kenta
                  last edited by

                  @Kenta ok, didn’t see the last as a link.

                  For Dropbox, if u change the url, dl=0, to dl=1, then it will show here…

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

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

                    @Kenta said in Newsfeed size:

                    As previously stated, I’m a complete n00b

                    no problems, we all were…

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

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

                      @Kenta the code for the source title and date/time is

                      sourceAndTimestamp.className = “newsfeed-source light small dimmed”;

                      newsfeed-source doesn’t exist in main.css

                      light is

                      .light {
                        font-family: "Roboto Condensed", sans-serif;
                        font-weight: 300;
                      }
                      

                      small is

                      .small {
                        font-size: 20px;
                        line-height: 25px;
                      }
                      

                      and dimmed is

                      .dimmed { 
                        color: #666;
                      }
                      

                      so, to change the SIZE you need to change the value for class ‘small’

                      so, for example
                      in ~/MagicMirror/css/custom.css put

                      .newsfeed .small {
                        font-size: 40px;
                        line-height: 45px;
                      }
                      

                      for the title text the code is

                      title.className = “newsfeed-title bright medium light” +

                      newsfeed-title doesn't exist 
                      so 'medium' is the size 
                      

                      .medium {
                      font-size: 30px;
                      line-height: 35px;
                      }

                      so change that to, in custom.css
                      

                      .medium {
                      font-size: 50px;
                      line-height: 55px;
                      }

                      
                      so now, custom.css looks like this (sizes just for example)
                      

                      .newsfeed .small {
                      font-size: 40px;
                      line-height: 45px;
                      }
                      .newsfeed .medium {
                      font-size: 50px;
                      line-height: 55px;
                      }

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      K C 2 Replies Last reply Reply Quote 0
                      • K Offline
                        Kenta @sdetweil
                        last edited by

                        @sdetweil
                        Thank you! That worked perfectly!

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