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 8.3k 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.
    • K Offline
      Kenta
      last edited by

      I want a bigger newsfeed, so I made a custom.css file and added this

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

      This only increased the size of the header, not the body of the newsfeed

      Any tips?

      Mykle1M 1 Reply Last reply Reply Quote 0
      • Mykle1M Offline
        Mykle1 Project Sponsor Module Developer @Kenta
        last edited by

        @Kenta said in Newsfeed size:

        line-height: 60px;

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

        Create a working config
        How to add modules

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

          @Mykle1
          Nope. Still just the headlines. Does the css need to contain more than just the code you suggested?

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

            @Kenta i would look at the code for className=

            if(showingDescription)
               description.className = "newsfeed-desc small light" 
            

            so, change newsfeed-desc
            .newsfeed .newsfeed-desc {
            ???
            }

            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 thank you for trying, but I don’t know where to look… Total n00b…
              This is from my config.js
              {
              module: “newsfeed”,
              position: “bottom_bar”,
              config: {
              feeds: [
              {
              title: “NRK Nyheter”,
              url: “https://www.nrk.no/nyheter/siste.rss”
              }
              ],

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

                @Kenta understand… each module gets to do its own thing… hardly any are documented well…

                all modules code are in the ~/MagicMirror/modules folder

                all the built in ones are in the modules/default folder…

                each module has a file with the name matching the module name… so in this case

                ~/MagicMirror/modules/default/newsfeed/newsfeed.js

                setting the UI component css ‘class’ is done y setting the ‘className’ variable of the element

                so, you edit the file and search for className , and there may be multiple… (as there are in this case)…

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • Mykle1M Offline
                  Mykle1 Project Sponsor Module Developer @Kenta
                  last edited by Mykle1

                  @Kenta said in Newsfeed size:

                  Nope. Still just the headlines. Does the css need to contain more than just the code you suggested?

                  So, I second guessed myself and checked again. The code above does what you want for the headlines. Are you saying you want the New York Times, 2 hours ago: portion as well? In that case, add this as well.

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

                  Screenshot

                  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 not exactly. I want my entire newsfeed bigger. Not just the headlines. This is the original (https://www.dropbox.com/s/nzb2o5kecn6gfdy/Screenshot_20200317_065226_com.realvnc.view![alt

                    Then by the changes made in the before mentioned css I get this https://www.dropbox.com/s/pxnuosggy7g24q7/Screenshot_20200317_065703_com.realvnc.viewer.android.jpg?dl=0
                    But the actual news is still same size…

                    Mykle1M 1 Reply Last reply Reply Quote 0
                    • 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
                        • 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