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.

    costum.css modified but font color still the same

    Scheduled Pinned Locked Moved Troubleshooting
    5 Posts 4 Posters 3.2k Views 3 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.
    • W Offline
      Wurzelxquadrat
      last edited by

      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 ?

      brobergB 1 Reply Last reply Reply Quote 0
      • brobergB Offline
        broberg Project Sponsor @Wurzelxquadrat
        last edited by

        @Wurzelxquadrat

        .compliments .bright {
        color : #ff0000;
        }
        
        1 Reply Last reply Reply Quote 2
        • W Offline
          Wurzelxquadrat
          last edited by

          ha…it works

          thanks

          1 Reply Last reply Reply Quote 0
          • H Offline
            Hellonoonan
            last edited by lavolp3

            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;
            }
            
            lavolp3L 1 Reply Last reply Reply Quote 0
            • lavolp3L Offline
              lavolp3 Module Developer @Hellonoonan
              last edited by

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

              .brightb {
              color: #fff;
              }

              Maybe this?

              .bright {
              color: #fff;
              }
              

              without the b?

              How to troubleshoot modules
              MMM-soccer v2, MMM-AVStock

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