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

Setting a background for MMM-NOAA3



  • Very new to CSS and I am wanting to add a translucent background to a module.

    My MagicMirror is not actually a mirror at all and will be mounted in the kitchen. I am using MMM-BackgroundSlideshow to display images to the screen under the modules. The only problem is seeing the modules on top of random images is sometimes difficult. So I would like to place a translucent charcoal behind the modules so I can see them better.

    For my calendar I am using MMM-CalendarExt and it does that automatically. I want the same kind of thing behind the MMM-NOAA3 module. I am sure it will be in the custom CSS for MMM-NOAA3, just not sure of the exact location.

    Thanks for your help in advance.

    Here is the contents of MMM-NOAA1.css file:

    @import url('https://fonts.googleapis.com/css?family=Muli');
    .MMM-NOAA3 {
         width: 195px;
    }
     .MMM-NOAA3 .table th, tr, td{
         text-align:center;
         table-layout:fixed;
    }
     .MMM-NOAA3 tr {
         height: 29px;
    }
     .MMM-NOAA3 th {
         line-height: 20%;
         padding-top: 9px;
    }
    .MMM-NOAA3 .awarn {display: block; line-height: 1.3;}
    .MMM-NOAA3 .blink_tr {
      animation: blinker 2s linear infinite;
    }
    @keyframes blinker {  
      60% { opacity: 0; }
    }
    .MMM-NOAA3 .img { width: 23px; height: 23px; align-content: center; padding-bottom:25%;}
    .MMM-NOAA3 .moon { width: 23px; height: 23px; align-content: center;}
    .MMM-NOAA3 .uv { -webkit-filter: invert(100%); width: 40px; height: 40px; padding-left: 10px;}
    .MMM-NOAA3 .icon {width: 30px; height: 30px;}
    .MMM-NOAA3 .aqi {font-size: .6em; color: white; text-shadow: 1px 1px 2px blue, 0 0 25px white, 0 0 5px yellow;}
    .MMM-NOAA3 .windy {width: 25px; height:25px; align-content: center;}
    .MMM-NOAA3 .wheading {
         background-color: #b97e11;
         text-align:center;
         color: rgba(0,0,0,0.6);
         text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
         padding: 2px;
         font-size: 14px;
         line-height: 120%;
         border-radius: 5px;
    }
     .MMM-NOAA3 .Forecasttable {
         float: left;
         clear: left;
         display: inline;
         margin-left: auto;
         margin-right:auto;
         text-align: center;
    }
     .MMM-NOAA3 .rheading {
         background-color:  #cc7a00;
         text-align:center;
         color: white;
         text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
         padding: 2px;
         font-size: 14px;
         line-height: 110%; 
    	 border: 1px solid #ffe0b3;
        padding: 3px;
    } 
     .MMM-NOAA3 .font {
         font-size: 23px;
    }
    .MMM-NOAA3 .fontac {
         color:#e4ab5f 
    }
    .MMM-NOAA3 .fontss{
         color: #e0e29a;
    }
    .MMM-NOAA3 .fontauw{
         color:#51c7ca 
    }
    .MMM-NOAA3 .fontfor {
         color: #000;
    }
    .MMM-NOAA3 .IMG {
    	width: 25px;
    	height: 24px;
    }
    .MMM-NOAA3 .image {width: 250%;
    height: 250%;}
     .MMM-NOAA3 .xxsmall {
         font-size: 10px;
         color:orange;
         margin: 10px;
    	 font-family: 'Muli', sans-serif;
    }
    .MMM-NOAA3 .tempf {
    	color: white;
    	text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
        z-index: 1;
    }
    .MMM-NOAA3 .floatl {float: left;}
    .MMM-NOAA3 .forec {
    	position: relative;
        z-index: 1;
    }
    .MMM-NOAA3 .collapsible {
        background-color: #777;
        color: white;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
    }
    .MMM-NOAA3 .active, .collapsible:hover {
        background-color: #555;
    }
    .MMM-NOAA3 .content {
        padding: 0 18px;
        display: none;
        overflow: hidden;
        background-color: #f1f1f1;
    }
    .MMM-NOAA3 .index{
      position:relative;
      z-index: 1;
    }
    .MMM-NOAA3 .dates {font-size: 12px;}
    .MMM-NOAA3  .tooltip {
        position: relative;
        display: inline-block;
    	float: left;
    }
    .MMM-NOAA3 .tooltip .tooltiptext {
        visibility: hidden;
    	width: 200px;
    	font-size: 17px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 4px;
    	border-style:solid;
        border-width:1px;
        border-color:white;
        transform: translate(-50%, -50%);
    	box-shadow: 0px 0px 0px 2px #888888;
    	​padding-top: 3px;
        padding-right: 5px;
        padding-bottom: 3px;
        padding-left: 5px;
    	line-height: 20px;
    
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
    }
    .MMM-NOAA3 .tooltip:hover .tooltiptext {
        visibility: visible;
    }
    
    .MMM-NOAA3 .CellWithComment{
      position:relative;
      z-index: 1;
    }
    .MMM-NOAA3 .CellComment{
      width: 80px;
      line-height: 14px;
      display:none;
      float: center;
      box-shadow: 0px 0px 0px 2px #888888;
      height: auto;
      z-index:100;
      background-color:#080808;
      border-style:solid;
      border-width:1px;
      border-color:white;
      padding: 10px 5px 10px 5px;
      font-size: 12px;
      color:white; 
      position: absolute; right: 0; bottom: 0; 
      bottom: 15px;
      text-align: center;
      border-radius: 5px;
    }
    .MMM-NOAA3 .CellComment2{
      width: 100%
      line-height: 14px;
      display:none;
      float: center;
      box-shadow: 0px 0px 0px 2px #888888;
      height: auto;
      z-index:100;
      background-color:#080808;
      border-style:solid;
      border-width:1px;
      border-color:white;
      padding: 10px 5px 10px 5px;
      font-size: 12px;
      color:white; 
      position: absolute; right: 0; bottom: 0; 
      bottom: 15px;
      text-align: center;
      border-radius: 5px;
    }
    .MMM-NOAA3 .CellWithComment:hover span.CellComment{
      display:block;
    }
    
    
     
    .MMM-NOAA3 .divTableParent{
            max-height: 20px;
            overflow: auto;
            overflow-x: hidden;
        }
     .MMM-NOAA3    .divTable { 
            display: table;
    		line-height: 8px;
            width: 100%;
            font-size: 14px;
    		text-align: center;
    		color: white;
        }
     .MMM-NOAA3    .divTableBody {
            display: table-row-group;
        }
    .MMM-NOAA3     .divTableRow {
            display: table-row;
            position: relative;
    		line-height: 20px;
        }
    .MMM-NOAA3     .divTableHead {
            line-height: 5px;
            color: #ffe0b3;
            border-right: 1px solid rgb(0, 0, 0);
    		line-height: 2px;
            font-weight: 700;
        }
     .MMM-NOAA3    .divTableCell, .divTableHead {
            border: 1px solid rgba(44, 46, 46, 0.15);
            display: table-cell;
            padding: 8px;
    		height: 3px;
    		width: 33%;
        }
    .MMM-NOAA3 	.divTableCell2 {
            display: table-cell;
            padding-bottom: 30px;
    		float: left;
    		font-size: 72px;
        }
     .MMM-NOAA3    .divTableCell, .divTableHead {
            border-bottom: 0px;
            border-right: 0px;
        }
    
    


  • Also, is it possible to add an OPACITY setting to the background?


Log in to reply