I’d also welcome a solution that the first few posts are somewhat restricted. For example, if you have a post count below 10, allow the start of only one thread every hour. Should be enough in the beginning.

And then, would it be possible to implement a solution, that if a thread of someone in this restricted user group is flagged as spam (maybe by two or three people in the unrestricted user group in a short time), it will be unpublished immediately and marked for moderation? This forum is pretty civil and I’d think abuse of this function would be low to zero.

I’d suggest making it show x amount of weeks, set in the module’s config, x being 1 to 4 weeks.

Wow, that looks classy, nice job!

@reaper81 said in Slim, Frameless Bathroom Mirror with a 27" Display:

As I later discovered, neither the PIR sensor nor the radar sensor detects through a mirror. But since the radar sensor does not need a Fresnel cover to detect at wide angle, I kept using it. So that anything can be detected, I had to drill a hole in the mirror.

Too late now, but I’d have suggested using only two of the three power sockets and building a cover with the PIR sensor for the socket in the middle. You probably get your power for the mirror from a hidden cable in the wall from there anyway? Or under the counter?

Looking at https://github.com/MichMich/MagicMirror/blob/master/css/main.css, you can see that every .module has a margin-bottom: 30px;

Try:

.region.bottom.bar .container .module.newsfeed {
    height: ??px; 		///* height of the module with maximum lines possible */
   margin-bottom: 0px;
}

Have you started your mirror in developer mode and checked out the elements and the settings? If you start it with “npm start” try “npm start dev” instead. You’ll see “Elemente” where you can go through the whole structure (DOM) and see their CSS settings. Changes to those settings are not stored, so you can play around there.

Might not be the problem (as modern browser are pretty forgiving about this) but the last property of an object (or array) doesn’t get a trailing comma.

			}
		}
	}
]
};

Other than that I don’t see any obvious problems. A black screen is better than a config error because it might load the basic MM but just not the modules.

Now, what I can suggest and what a developer would do is:

• Reduce the config.js to the basics or the originally suggested example.
• Add one module after another, always checking if it works or not.
• If one doesn’t work or breaks something, note it down, remove it, try the next one. Or figure out directly why it doesn’t work.

But that way you can easily point to where it breaks. Everything else is guesswork.

@surger13 said in reduce bottom margin:

/* height of the module with maximum lines possible */

That line looks familiar. ;)
The CSS for the body looks right: 100% - (2 x margin).

So what you see is probably an issue with the height of the newsfeed module. Keep in mind that:

• a module will occupy as much space in the region as it needs (and stay at the bottom)
• if you set a height, it will occupy the specific space as set (and fill up that space from top, leaving space at the bottom, if it needs less than set)

It’s probably just that 100px is more than the module needs so there is some space at the bottom. But: In the thread where you got that line from, it was the desired effect that the top of the module and the text within it stay at the same place with space at the bottom to fill in case the text needs more lines.

So these two wishes contradict here. You have to look at your module filled to the max (maximum possible lines) and then figure out the height it needs (maybe less than 100px). Or you remove the height and accept that the module sometimes needs more and its top moves up a bit.

Hopefully I was able to make this somewhat comprehensible.

And please check the following link: https://forum.magicmirror.builders/topic/4247/how-to-post-code-on-the-forum-for-absolute-beginners/2

Right now, the config.js you posted is near-unreadable.

A backup of a running system is a good idea. Keep in mind how often we have trouble with new Raspbian versions. It still seems to run best on Jessi, so at least keep an image of that Raspbian version at hand that works for you (but then again, why not a complete backup image?).

My Mirror crashed with data loss and corrupted sd card and for weeks, evening after evening I couldn’t get WiFi to run on my RasPi with the new card and latest Raspbian. Finally found my old Jessi image and it worked immediately. If only I had made a backup, it would have been a 10 minute thing.

Or without a module in custom.css:

.region.middle.center:before { /* just an example, try with an empty region */
    content: url(../modules/test_png.png);
} 

Though quick, it’s not a very clean solution and could mess up modules in the same region. With some CSS knowledge you could make something like a logo appear fixed to a corner of the mirror or something like that.

Other regions with modules have different sizes and that makes a generell answer a bit complicated.

What’s the current position? Where do you want it to be? What other modules do you have and in what positions are they?

Maybe it’s as easy as changing the position. In config.js, try

    module: 'MMM-ImageSlideshow',
    position: 'upper_third',
/* or: */
    position: 'middle-center',

@Mykle1 said in Vanity Mirror, thy name is woman. (using laptop):

I really like this idea, but seeing as it was your idea, I’ll let you have first crack at it. ;^)

I have a NYE timer, let me see if I can update it and make the target time more easily exchangable. ;)

You’re welcome.
Btw. depending on how you control your Pi and Mirror, you don’t need to restart your whole Pi. In this case, just refreshing the browser should work, or restarting the Mirror process, if it doesn’t.

@Peter said in Regions:

. bottom_bar

That’s what I ment with exact code. Because this will do nothing, it should be

.bottom.bar

Because the element you want to address has both classes, there’s no space in between.
But I see where it went wrong: “bottom_bar” is how you assign a module to a region in the config.js. But that’s not how you address it in css.

Can you show us your problem with either a screenshot or a photo? If I understand right, you have

• Newsfeed in bottom_bar (css: .region.bottom.bar .container .module)
• a module in bottom_left (css: .region.bottom.bar .region.bottom.left)
• something in bottom_right (css: .region.bottom.bar .region.bottom.right)
  Important: “.region.bottom.bar .container” will address ALL of them because of the structure.

Usually, the bottom_bar should claim its place as needed and push the other two up as necessary. So that would be normal (and is what you described).

I’d try

.region.bottom.bar .container .module.newsfeed {
    height: ???px; /* height of the module with maximum lines possible */
}

Ah, debugging. Welcome to the live of a developer. Good luck.

@Peter said in Regions:

.regio bottom_bar.

Can you copy and paste your exact code? It’s important that you address it with “.region.bottom” (no space, and note the dots)

I posted about addressing elements in CSS before, see here.

@cruunnerr said in Changing the length of the line under the header:

Was just hoping there is an amazing trick to use the custom.css for exactly my problem XD

There are a lot of amazing tricks. You can do this in custom.css:

header {
    border-bottom: none; /* instead of 1px solid #666; to remove all lines from all the headers */
    width: 50%;          /* add this to change the width of all module headers */
}
.middle header {
    /* addressing the header like this will only influence headers within the middle region */
}
#module_3_calendar header {
    /* only addresses the calendar header (find out the modules id before) */
}
.shoppinglist header {
    /* or use the class, which should be the module's name */
}

The module’s css file is the last one to be called so its values override that of the custom.css. I should have mentioned that. You can try

body, html {
	background: none !important;
}

Changing settings of items not within the module is bad practice imho and shouldn’t be done (read: setting the main background when the module’s css should only do stuff within the module itself), but customizing within the module is also bad practice. And lastly, using !important is also not best practice, but in this case, I think we need to use it.

Edit: Disregard that. I just saw that it’s an iframe.
You have to change the module’s main.css. Usually, you cannot set css values in the content of the iframe (though I’m not 100% sure in this case, where it’s both within the same domain) without some jQuery and I guess you don’t want to build a module just to style another module. ;)

That module has a css file (public/css/main.css) that sets the background color to black:

body, html {
	background: #000;

#000 is shortened hexadecimal code for black. The line should read

	background: none;

But: don’t write this in the modules own css file. That’s not the clean solution and brings trouble when the module is updated in the future.

You probably already edited the custom.css file, right? Try adding:

body, html {
	background: none;

What I find odd is that you said it’s just that module but that code would apply to the whole screen.

I was interrupted when I wrote my answer and forgot to add what I was initially going to say. I decided to write a new reply instead of editing the above, not to confuse anyone and keep the two apart.

There is another way to update the content of an element (that has been created in getDom before):

Example 3, .innerHTML:

start: function() {
// stays the same as above
    setTimeout(function() {
        this.magicContent(self);  // this will call the function "magicContent"
    }, 10 * 1000);                // 10 seconds after the start, 5 seconds after "buildContent"
},
// we don't touch getDom or buildContent!
magicContent: function() {
    document.getElementById("my-content").innerHTML = "Changed <i><b>yet again!";
}

document.getElementById(“my-content”).innerHTML = “content”; will update the selected element (the div with the id “my-content”) with the selected content without having to call updateDom().

Keep in mind that this will only work on elements that were created before in getDom, so it will not work within start: function() …

Caution! This can also update elements of other modules, so be careful and use unique IDs.

In this context, yes.

“wrapper” is just a variable that holds the content of the (new) HTML element that you create there and “getDom” grabs the content that is to be put into the DOM (Document Object Model, the raw content/structure), => rendered.

Example 1, basic:

getDom: function() {
    var wrapper = document.createElement("div");
    wrapper.setAttribute"id", "my-content");
//  It's always a good idea to make an element addressable
    wrapper.innerHTML = "Hello World!";
    return wrapper;
}

getDom is called upon starting, grabbing the elements and putting them in place and if you want to change something later on, you need to call “this.updateDom()” to render it again with the new content.

Example 2, updating:

start: function() {
    var self = this;
    Log.info("Starting module: " + this.name);
    this.myContent = "nothing yet"; // global variable, available to all functions
    setTimeout(function() {
        this.buildContent(self);  // this will call the function "buildContent"
    }, 5 * 1000);                 // 5 seconds after the start (5 * 1000 ms)
},
getDom: function() {
    var wrapper = document.createElement("div");
    wrapper.setAttribute"id", "my-content");
    wrapper.innerHTML = this.myContent ; // will show "nothing yet" at the beginning
    return wrapper;
},
buildContent: function(self) { // see above, this will be started after 5 seconds
//  do your content building
    this.myContent = "New content!"; // changes the value of the global variable
    self.updateDom(); // call for the DOM to be updated, thus showing the new content
}

I hope that’s somewhat understandable.