@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.
. 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
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.
.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.