MagicMirror² v2.13.0 is available! For more information about this release, check out this topic.

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 ?


  • Project Sponsor

    @Wurzelxquadrat

    .compliments .bright {
    color : #ff0000;
    }
    


  • ha…it works

    thanks



  • What is the solution to this? I am having the same issue so I didnt want to create a new topic.

    Here is my custom.css. Office hours remain Blue and Id like to change the color as Ive changed the background image and they are now drowned out.

    /*****************************************************
     * 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 {#
    }
    
    .region.fullscreen.below {
      background-image: url('image.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      margin: 5px;
      position: absolute;
      height: calc (50% - 0px);
      width: calc (50% - 0px);
      font-family: "Roboto Condensed", sans-serif;
      font-weight: 400;
      font-size: 2em;
      line-height: 1.5em;
      -webkit-font-smoothing: antialiased
    }
    
    .brightb {
    color: #fff;
    }
    .currentweather .wi-sunrise {
    color: #ffd700;
    }
    .currentweather .wi-sunset {
    color: #ffa500;
    }
    .currentweather .wi-day-sunny {
    color: #ffff00;
    }
    .currentweather .wi-night-showers {
    color: #55acee;
    }
    .currentweather .wi-degrees {
    color: #fff;
    }
    .currentweather .wi-rain {
    color: #55acee;
    }
    .currentweather .wi-showers {
    color: #55acee;
    }
    .currentweather .wi-night-showers {
    color: #55acee;
    }
    .currentweather .wi-night-alt-cloudy-windy {
    color: #aaa;
    }
    .currentweather .wi-night-cloudy {
    color: #aaa;
    }
    .currentweather .wi-cloudy {
    color: #aaa;
    }
    .currentweather .wi-day-cloudy {
    color: #aaa;
    }
    .currentweather .wi-cloudy {
    color: #aaa;
    }
    .currentweather .wi-cloudy-windy {
    color: #aaa;
    }
    .currentweather .wi-showers {
    color: #55acee;
    }
    .currentweather .wi-thunderstorm {
    color: #ff00ff;
    }
    .currentweather .wi-snow {
    color: #fff;
    }
    .currentweather .wi-fog {
    color: #999;
    }
    .currentweather .wi-night-clear {
    color: #fff;
    }
    .currentweather .wi-night-rain {
    color: #55acee;
    }
    .currentweather .wi-night-thunderstorm {
    color: #ff00ff;
    }
    .currentweather .wi-night-snow {
    color: #fff;
    }
    
    .weatherforecast .wi-sunrise {
    color: #ffd700;
    }
    .weatherforecast .wi-sunset {
    color: #ffa500;
    }
    .weatherforecast .wi-day-sunny {
    color: #ffff00;
    }
    .weatherforecast .wi-night-showers {
    color: #55acee;
    }
    .weatherforecast .wi-degrees {
    color: #fff;
    }
    .weatherforecast .wi-rain {
    color: #55acee;
    }
    .weatherforecast .wi-showers {
    color: #55acee;
    }
    .weatherforecast .wi-night-showers {
    color: #55acee;
    }
    .weatherforecast .wi-night-alt-cloudy-windy {
    color: #aaa;
    }
    .weatherforecast .wi-night-cloudy {
    color: #aaa;
    }
    .weatherforecast .wi-cloudy {
    color: #aaa;
    }
    .weatherforecast .wi-day-cloudy {
    color: #aaa;
    }
    .weatherforecast .wi-cloudy {
    color: #aaa;
    }
    .weatherforecast .wi-cloudy-windy {
    color: #aaa;
    }
    .weatherforecast .wi-showers {
    color: #55acee;
    }
    .weatherforecast .wi-thunderstorm {
    color: #ff00ff;
    }
    .weatherforecast .wi-snow {
    color: #fff;
    }
    .weatherforecast .wi-fog {
    color: #999;
    }
    .weatherforecast .wi-night-clear {
    color: #fff;
    }
    .weatherforecast .wi-night-rain {
    color: #55acee;
    }
    .weatherforecast .wi-night-thunderstorm {
    color: #ff00ff;
    }
    .currentweather .wi-night-snow {
    color: #fff;
    }
    .compliments .bright {
    color : #fff;
    font-size: 30px;
    }
    .calendar_monthly #yearDigits {
    	color: #fff;
    	font-weight: normal;
    }
    .calendar_monthly #monthName {
    	font-weight: normal;
    }
    .calendar_monthly #monthName:after {
    	content: " •";
    	color: #fff;
    	font-weight: bold;
    }
    .calendar_monthly .monthPrev {
    	color: #fff;
    }
    .calendar_monthly .monthNext {
    	color: #fff;
    }
    .calendar_monthly .square-box {
    	position: relative;
    	width: 85%;
    	overflow: hidden;
    	margin: 0px auto;
    }
    .calendar_monthly .square-box:before {
    	content: "";
    	display: custom;
    	padding-top: 20%;
    }
    .calendar_monthly .square-content {
    	top: 0;
    	left: 0;
    	bottom: 0;
    	right: 0;
    }
    .calendar_monthly .square-content .today {
    	border: 3px solid #80ff00;
    	font-weight: light;
    	color: #7dcfff;
    }
    .calendar_monthly .square-content div {
    	display: table;
    	width: 100%;
    	height: 100%;
    }
    .calendar_monthly {
        color: #fff;
    }
    .calendar_monthly2 #yearDigits {
    color: #fff;
    font-weight: normal;
    }
    .calendar_monthly2 #monthName {
    font-weight: normal;
    }
    .calendar_monthly2 #monthName:after {
    content: " •";
    color: #80ff00;
    font-weight: bold;
    }
    .calendar_monthly2 .monthPrev {
    color: #333333;
    }
    .calendar_monthly2 .monthNext {
    color: #333333;
    }
    .calendar_monthly2 .square-box {
    position: relative;
    width: 50%;
    overflow: hidden;
    margin: 0px auto;
    }
    .calendar_monthly2 .square-box:before {
    content: “”;
    display: block;
    padding-top: 20%;
    }
    .calendar_monthly2 .square-content {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    }
    .calendar_monthly2 .square-content .today {
    border: 1px solid #80ff00;
    font-weight: normal;
    color: #80ff00;
    }
    .calendar_monthly2 .square-content div {
    display: table;
    width: 100%;
    height: 100%;
    }
    .calendar_monthly2 .square-content span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    }
    .clock .date {
        color: #fff;
    }
    .normal {
      color: #999;
    }
    
    .bright {
      color: #fff;
    }
    
    
    .square-content span {
    	display: table-cell;
    	text-align: center;
    	vertical-align: middle;
    }
    .OfficeHours .bright {
    text-align: left;
    color: #fff;
    font-size: 40px;
    }
    
    header {
        text-transform: none;
        font-size: 35px;
        font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
        font-weight: 600;
        border-bottom: 2px solid #0084ff;
        line-height: 55px;
        padding-bottom: 5px;
        margin-bottom: 10px;
        color: #fff;
    }
    
    .clock .bright {
    font-size: 100px;
    color: #7dcfff
    }
    
    /* wind speed selector */
    .currentweather > .module-content > div > div.normal.medium > *:nth-child(2),
    /* wind direction selector */
    .currentweather > .module-content > div > div.normal.medium > *:nth-child(3),
    /* sunset/sunrise time selector */
    .currentweather > .module-content > div > div.normal.medium > *:nth-child(6){
        color: white;
    }
    
    #module_4_currentweather header {
    color: #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    }
    
    #module_4_currentweather .wi-sunrise {
    color: #fff;
    }
    

  • Module Developer

    @Hellonoonan said in costum.css modified but font color still the same:

    .brightb {
    color: #fff;
    }

    Maybe this?

    .bright {
    color: #fff;
    }
    

    without the b?


Log in to reply