costum.css modified but font color still the same



  • Hi everybody

    i have installed mi MagicMirror since a few weeks and i try to change the font color of the compliments module.
    As far i know i have to write it in the custom.css and i did , but the color is still the same.
    Not sure what is the problem and thought somebody can help me.

    My config.js:

    
    var config = {
    	address: "localhost", // Address to listen on, can be:
    	                      // - "localhost", "127.0.0.1", "::1" to listen on loopback interface
    	                      // - another specific IPv4/6 to listen on a specific interface
    	                      // - "", "0.0.0.0", "::" to listen on any interface
    	                      // Default, when address config is left out, is "localhost"
    	port: 8080,
    	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], // Set [] to allow all IP addresses
    	                                                       // or add a specific IPv4 of 192.168.1.5 :
    	                                                       // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
    	                                                       // or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
    	                                                       // ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],
    
    	language: "de",
    	timeFormat: 24,
    	units: "metric",
    
    	modules: [
    		{
    			module: "alert",
    		},
    		{
    			module: "updatenotification",
    			position: "top_bar"
    		},
    		{
    			module: "clock",
    			position: "top_left",
    			config: {
    			displaySeconds: false,
    			showWeek: true
    			}
    		},
    		{
    			module: "calendar",
    			header: "Private ",
    			position: "top_left",
    			config: {
    				calendars: [
    					{
    						symbol: "calendar-check-o ",
    						url: "xxx"
    					}
    				]
    			}
    		},
    		{
    			module: "calendar",
    			header: "Geburtstage",
    			position: "top_left",
    			config: {
    				calendars: [
    					{
    						symbol: "calendar-check-0 ",
    						url: "xxx"
    					}
    				]
    			}
    		},
                   	{
    			module: "currentweather",
    			position: "top_right",
    			config: {
    				location: "xxx",
    				locationID: xxxx
    			}
    		},
    		{
    			module: "weatherforecast",
    			position: "top_right",
    			header: "Wetter   ",
    			config: {
    				location: "xxx",
    				locationID: "xxx",  //ID from http://www.openweathermap.org/help/city_list.txt
    				appid: "xx"
    			}
    		},
    
    		 {
                            module: "compliments",
                            position: "lower_third"
    		},
    		{
    			module: "newsfeed",
    			position: "bottom_bar",
    			config: {
    				feeds: [
    					{
    						title: "xxx",
    						url: "xxxl"
    					}
    				],
    				showSourceTitle: true,
    				showPublishDate: true,
    				reloadInterval: "30000",
    				updateIntervall: "400000"
    			}
    		},
    	]
    
    };
    

    #################################################################################

    My main.css

    html {
      cursor: none;
      overflow: hidden;
      background: #000;
    }
    
    ::-webkit-scrollbar {
      display: none;
    }
    
    body {
      margin: 0px;
      position: absolute;
      height: calc(100% - 0px);
      width: calc(100% - 0px);
      background: #000;
      color: #aaa;
      font-family: "Roboto Condensed", sans-serif;
      font-weight: 400;
      font-size: 2em;
      line-height: 1.5em;
      -webkit-font-smoothing: antialiased;
    }
    
    /**
     * Default styles.
     */
    
    
    
    .dimmed {
      color: #fff;
    }
    
    .normal {
      color: #fff;
    }
    
    .bright {
      color: #fff;
    }
    
    .xsmall {
      font-size: 20px;
      line-height: 20px;
    }
    
    .small {
      font-size: 25px;
      line-height: 25px;
    }
    
    .medium {
      font-size: 35px;
      line-height: 35px;
    }
    
    .large {
      font-size: 65px;
      line-height: 65px;
    }
    
    .xlarge {
      font-size: 70px;
      line-height: 75px;
      letter-spacing: -3px;
    }
    
    .thin {
      font-family: Roboto, sans-serif;
      font-weight: 100;
    }
    
    .light {
      font-family: "Roboto Condensed", sans-serif;
      font-weight: 300;
    }
    
    .regular {
      font-family: "Roboto Condensed", sans-serif;
      font-weight: 400;
    }
    
    .bold {
      font-family: "Roboto Condensed", sans-serif;
      font-weight: 700;
    }
    
    .align-right {
      text-align: right;
    }
    
    .align-left {
      text-align: left;
    }
    
    header {
      text-transform: uppercase;
      font-size: 20px;
      font-family: "Roboto Condensed";
      font-weight: 400;
      border-bottom: 1px solid #666;
      line-height: 15px;
      padding-bottom: 5px;
      margin-bottom: 10px;
      color: #fff;
    }
    
    sup {
      font-size: 50%;
      line-height: 50%;
    }
    
    /**
     * Module styles.
     */
    
    .module {
      margin-bottom: 30px;
    }
    
    .region.bottom .module {
      margin-top: 35px;
      margin-bottom: 0;
    }
    
    .no-wrap {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    /**
     * Region Definitions.
     */
    
    .region {
      position: absolute;
    }
    
    .region.fullscreen {
      position: absolute;
      top: -0px;
      left: -0px;
      right: -0px;
      bottom: -0px;
      pointer-events: none;
    }
    
    .region.fullscreen * {
      pointer-events: auto;
    }
    
    .region.right {
      right: 0;
    }
    
    .region.top {
      top: 0;
    }
    
    .region.top .container {
      margin-bottom: 10px;
    }
    
    .region.top .container:empty {
      margin-bottom: 0;
    }
    
    .region.top.center,
    .region.bottom.center {
      left: 50%;
      -moz-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
    }
    
    .region.top.right,
    .region.top.left,
    .region.top.center {
      top: 100%;
    }
    
    .region.bottom {
      bottom: 0;
    }
    
    .region.bottom .container {
      background : #000;
      margin-top: 20px;
      margin-bottom: 0px;
    }
    
    .region.bottom .container:empty {
      margin-top: 0;
    }
    
    .region.bottom.right,
    .region.bottom.center,
    .region.bottom.left {
      bottom: 100%;
    }
    
    .region.bar {
      width: 100%;
      text-align: center;
    }
    
    .region.third,
    .region.middle.center {
       width: 100%;
      text-align: center;
      -moz-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }
    
    .region.upper.third {
      top: 33%;
    }
    
    .region.middle.center {
      top: 66%;
    }
    
    .region.lower.third {
      top: 85%;
    }
    
    .region.left {
      text-align: left;
    }
    
    .region.right {
      text-align: right;
    }
    
    .region table {
      width: 100%;
      border-spacing: 0;
      border-collapse: separate;
    }
    
    

    ####################################################################

    my custom.css

    /*****************************************************
     * Magic Mirror                                      *
     * Custom CSS                                        *
     *                                                   *
     * By Michael Teeuw http://michaelteeuw.nl           *
     * MIT Licensed.                                     *
     *                                                   *
     * Add any custom CSS below.                         *
     * Changes to this files will be ignored by GIT. *
     *****************************************************/
    
     body {
    }
    .compliments {
     color: #ff0000;
    } 	
    .newsfeed {
    color:#82bae5;
    } 
    

    ##########################################################################

    i have no clue what happens and why it is not working.

    Any idea ?


  • Module Developer

    @Wurzelxquadrat

    .compliments .bright {
    color : #ff0000;
    }
    


  • ha…it works

    thanks


Log in to reply
 

Looks like your connection to MagicMirror Forum was lost, please wait while we try to reconnect.