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 module behaves differently than Compliments with custom.css?

    Scheduled Pinned Locked Moved Development
    12 Posts 4 Posters 10.0k Views 5 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.
    • V Offline
      valid8r @strawberry 3.141
      last edited by

      @strawberry-3.141
      can you please confirm (for my css education), if the "wrapper.className = “thin xlarge bright” statement is where the font definitions are being set for the Compliments module as shown below? and if so, could I replace those strings with any of the css settings available?

      getDom: function() {
      var complimentText = this.randomCompliment();

      	var compliment = document.createTextNode(complimentText);
      	var wrapper = document.createElement("div");
      	wrapper.className = "thin xlarge bright";
      	wrapper.appendChild(compliment);
      
      	return wrapper;
      
      1 Reply Last reply Reply Quote 0
      • yawnsY Offline
        yawns Moderator
        last edited by

        Yes and yes.
        You could of course modify the classname line and apply other classes. But I would recommend defining own css styles to override existing styles instead.
        If you modify the JavaScript file you could lose your changes if the module receives an update via github

        V 1 Reply Last reply Reply Quote 1
        • V Offline
          valid8r @yawns
          last edited by

          @yawns To do so would be to update custom.css right? Would you be able to show an example of how that would work for a module such as compliments.

          1 Reply Last reply Reply Quote 0
          • Z Offline
            zkab
            last edited by

            I get the bigger fonts in newsfeed but still white color … hmmm
            My custom.css looks like this

            body {
            }
            .newsfeed .medium {
            font-size: 60px;
            font-color: #e6e600;
            line-height: 60px;
            }
            .brightb {
            color: #a2d2f6;
            }
            .wi-sunrise {
            color: #ff0;
            }
            …

            strawberry 3.141S 1 Reply Last reply Reply Quote 0
            • strawberry 3.141S Offline
              strawberry 3.141 Project Sponsor Module Developer @zkab
              last edited by

              @zkab did you try?

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

              Please create a github issue if you need help, so I can keep track

              1 Reply Last reply Reply Quote 0
              • Z Offline
                zkab
                last edited by

                Thanks - it works …

                1 Reply Last reply Reply Quote 0
                • Z Offline
                  zkab
                  last edited by

                  Still struggling with fonts & colors …
                  When I insert following in custom.css I don’t get the color for calendar …

                  .calendar .small {
                  color: #a2d2f6;
                  }

                  The message Loading … is in right color but when the calendar shows it it still in white … same thing with

                  .calendar .dimmed {
                  color: #a2d2f6;
                  }

                  Where have I missed ?

                  1 Reply Last reply Reply Quote 0
                  • yawnsY Offline
                    yawns Moderator
                    last edited by

                    If you look into the calendar.js file you see the wrapper showing actual calendar entries is using

                    timeWrapper.className = "time light";
                    So I would try .calendar .time instead.

                    1 Reply Last reply Reply Quote 0
                    • Z Offline
                      zkab
                      last edited by

                      It works great - I am learning more and more thanks to this forum …
                      But if I want to change color for the calendar entries (Christmas Day, Boxing Day …)
                      Didn’t find it calendar.js …

                      .calendar .??? {
                      color: #a2d2f6;
                      }

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