4. Newsfeed module behaves differently than Compliments with custom.css?
MagicMirror² v2.5.0 is available! For more information about this release, check out this topic.

Newsfeed module behaves differently than Compliments with custom.css?

  • V

    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

    0 1 Reply

  • @valid8r the compliments module is not using the medium class

    .compliments .xlarge {
    font-size: 60px;
    font-color: #99F;
    line-height: 60px;
}
    0
    V
     2 Replies
  • V

    @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.

    0
  • V

    @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;
    0
  • Moderator

    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

    1
    V
     1 Reply
  • V

    @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.

    0
  • Z

    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;
    }
    …

    0 1 Reply

  • @zkab did you try?

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

    Thanks - it works …

    0
  • Z

    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 ?

    0