I just found MMM-WeatherOrNot after trying several others. I like it because you can set a background behind the module. My MagicMirror is not a mirror at all and uses random images behind all of my modules, so the contrast in needed.
Is there a simple way to increase the size of the fonts? They are a little hard to read for my 81-yr old mother in law.
Thank you.
Also, is it possible to add an OPACITY setting to the background?
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;
}