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.

    Setting a background for MMM-NOAA3

    Scheduled Pinned Locked Moved Custom CSS
    2 Posts 1 Posters 469 Views 1 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
      wheresmygravy
      last edited by wheresmygravy

      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;
          }
      
      
      1 Reply Last reply Reply Quote 0
      • W Offline
        wheresmygravy
        last edited by

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

        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