Change current CSS with a module?

MacG

@sdetweil Thanks a lot! Then I will look into creating modules.

sdetweil

@macg u can use my sample module, as a starter
https://github.com/sdetweil/SampleModule

and my MMM-SleepWake module does the loop thru the modules

MacG

This seems to be more difficult, than expected. I’ll take a look at it. So far, I have only programmed with the script language AutoIt.

Why would the loop through the modules be necessary? To find the ID of the background module or to set the changes to the module?

sdetweil

@macg the module u want to modify sits somewhere in the page. you need to find it

mm gives each module a unique identifier and uses that as a class name (u might have more than one instance running and using just the module name would be insufficient).

open the developers window elements tab (ctrl-shift-i), and look around the dom structure
see this topic
https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1629461258321

MacG

@sdetweil The ID is well known because I have already changed or tried some things with the custom.css. It’s “module_1_MMM-BackgroundSlideshow”.

sdetweil

@macg be careful… if you change the order in config.js, then the identifier will change…

MacG

@sdetweil I know. Fortunately, from my logical point of view, the background is with one of the first modules.

After your post from Friday, I had the idea to create maybe two instances of the MMM-BackgroundSlideshow. One with and one without gradient. With the MMM-Remote-Control, I could then set active the instance which is needed. So that the dashboard is readable and the gallery mode is without gray haze. That would save me the module programming. Is everything new for me anyway.

MacG

@macg said in Change current CSS with a module?:

After your post from Friday, I had the idea to create maybe two instances of the MMM-BackgroundSlideshow. One with and one without gradient. …

This doesn’t work. Also not with the second instance as “fullscreen_above”. So back to plan A again.

MacG

I don’t have the knowledge for plan A. I tried it, but it doesn’t affect the display and it doesn’t show up on MMM-RemoteControl in the Edit View list. What is necessary though.

I can change or add a few lines of code, but I can’t rewrite a module. The gradient stays as it is.

/*

to disable the following class

.MMM-BackgroundSlideshow .gradient background-image: radial-gradient(at center top, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.45) 85%) !important;

 */


Module.register("MMM-BGSs-NoGradient", {
	// define variables used by module, but not in config data
	// some_variable:  true,
	// some_other_variable: "a string",

	// holder for config info from module_name.js
	config:null,

	init: function(){
		Log.log(this.name + " is in init!");
	},

	start: function(){
		Log.log(this.name + " is starting!");
	},

	loaded: function(callback) {
		Log.log(this.name + " is loaded!");
		callback();
	},


	// return list of stylesheet files to use if any
	getStyles: function() {
		return 	[
			// sample of list of files to specify here, if no files, do not use this routine, , or return empty list

			//'script.css', // will try to load it from the vendor folder, otherwise it will load is from the module folder.
			//'font-awesome.css', // this file is available in the vendor folder, so it doesn't need to be avialable in the module folder.
			//this.file('anotherfile.css'), // this file will be loaded straight from the module folder.
			//'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css',  // this file will be loaded from the bootstrapcdn servers.
		]
	},


	// messages received from other modules and the system (NOT from your node helper)
	// payload is a notification dependent data structure
	notificationReceived: function(notification, payload, sender) {
		// once everybody is loaded up
		if(notification==="ALL_MODULES_STARTED"){
			// send our config to our node_helper
			this.sendSocketNotification("CONFIG",this.config)
		}
		if (sender) {
			Log.log(this.name + " received a module notification: " + notification + " from sender: " + sender.name);
		} else {
			Log.log(this.name + " received a system notification: " + notification);
		}
	},

	// system notification your module is being hidden
	// typically you would stop doing UI updates (getDom/updateDom) if the module is hidden
	suspend: function(){

	},

	// system notification your module is being unhidden/shown
	// typically you would resume doing UI updates (getDom/updateDom) if the module is shown
	resume: function(){

	},

	// this is the major worker of the module, it provides the displayable content for this module
	getDom: function() {
		
		var wrapper = document.createElement("div");
		wrapper.className = 'bgss-nogradient_container';
		
		// if user supplied message text in its module config, use it
		if(this.config.hasOwnProperty("message")){
			// using text from module config block in config.js
			wrapper.innerHTML = this.config.message;
		}
		else{
		// use hard coded text
			wrapper.innerHTML = " ";
		}
		
		// change css 
		Object.assign(
			document.querySelector('.MMM-BackgroundSlideshow .gradient').style, 
			{
				display: none
			}
		)

		// pass the created content back to MM to add to DOM.
		return wrapper;
	},

})