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 9.4k 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
      last edited by

      I wanted to play around with font size and colors so I modified custom.css with the following code below my body statements:

      .newsfeed .medium {
      font-size: 60px;
      font-color: #99F;
      line-height: 60px;
      }
      This worked nicely and my newsfeed now has a larger blue font.
      … but when I apply the same idea to the compliments module as below:

      .compliments .medium {
      font-size: 60px;
      font-color: #99F;
      line-height: 60px;
      }

      I don’t get any change for the compliments module… what gives?

      Thanks

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

        @valid8r the compliments module is not using the medium class

        .compliments .xlarge {
            font-size: 60px;
            font-color: #99F;
            line-height: 60px;
        }
        

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

        V 2 Replies Last reply Reply Quote 0
        • V Offline
          valid8r @strawberry 3.141
          last edited by

          @strawberry-3.141 Thank you very much. This has helped me learn a bit more about css. This now points me in the direction of trying to find out where the compliments module definition is for the .xlarge class. Very helpful again.

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