• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.

Change current CSS with a module?

Scheduled Pinned Locked Moved Solved Development
11 Posts 2 Posters 2.2k Views 2 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.
  • M Offline
    MacG @MacG
    last edited by MacG Nov 1, 2021, 4:17 PM Nov 1, 2021, 4:15 PM

    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;
    	},
    
    })
    
    
    1 Reply Last reply Reply Quote 0
    • 1
    • 2
    • 2 / 2
    2 / 2
    • First post
      11/11
      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