Newsfeed module behaves differently than Compliments with custom.css?



  • 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



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

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


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



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

  • 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



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



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



  • @zkab did you try?

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


  • Thanks - it works …



  • 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 ?


 

292
Online

6.0k
Users

4.5k
Topics

37.1k
Posts