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.
    • S Do not disturb
      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 Do not disturb
          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 Do not disturb
            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 Do not disturb
              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
                • C Offline
                  cyberphox @sdetweil
                  last edited by

                  @sdetweil said in Newsfeed size:

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

                  Why the heck isn’t this working for me!
                  I’ve moved compliments module to lower_third region but i can’t seem to change the size of it

                  Full time Dad, DJ and entertainer and lover of technology.

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

                    @cyberphox show me the css class setup you did… note that each module gets to choose there own class usage… so ‘small’ might not work for compliments… read the readme,

                    or look at the
                    main.css or
                    compliments.css or
                    last resort the compliments.js. file for class usage (search for className in the js file)

                    sometimes the class usages is documented, and sometimes(most times) not

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    C 1 Reply Last reply Reply Quote 0
                    • C Offline
                      cyberphox @sdetweil
                      last edited by

                      @sdetweil sorry i’ve been fighting with CSS all day and typed that in wrong…
                      What I mean to say was I moved the newsfeed module to lower_third

                      In custom.css I’ve tried:

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

                      Full time Dad, DJ and entertainer and lover of technology.

                      1 Reply Last reply Reply Quote 0
                      • C Offline
                        cyberphox
                        last edited by cyberphox

                        I even tried this - thinking maybe the indent made a difference but nope!

                        .newsfeed .small {
                          font-size: 80px;
                          line-height: 65px;
                          }
                        .newsfeed .medium {
                          font-size: 70px;
                          line-height: 75px;
                          }
                        

                        Full time Dad, DJ and entertainer and lover of technology.

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