@j-e-f-f said in CSS 101 - Getting started with CSS and understanding how CSS works:
Now issue the following command to start MagicMirror in development mode.
npm start dev
This will start MagicMirror in a split screen layout. One side will be the Magic Mirror that you know and love, the other side will be the developer tools console.
Is this correct? I spent quite a bit of time trying to figure this out. Maybe it’s changed.
The developer tools console is surely just the browser console which is achieved by pressing F12.
When I tried the command:
npm start dev
What this did is direct debug messages into the shell where I typed the command, but didn’t change the display in the web browser. I just thought this might help other people following this guide, which is excellent!
Hello @sdetweil
I have a similar question: I want the compliments module to have the same appearance as the title of the newsfeed module.
found in newsfeed-code:
if (!this.config.showFullArticle) {
const title = document.createElement("div");
title.className = "newsfeed-title bright medium light" + (!this.config.wrapTitle ? " no-wrap" : "");
title.innerHTML = this.newsItems[this.activeItem].title;
wrapper.appendChild(title);
}
so i want the compliments style to be “bright medium light”
the compliments code shows
getDom: function () {
var wrapper = document.createElement("div");
wrapper.className = this.config.classes ? this.config.classes : "thin xlarge bright pre-line";
Im not sure how to modify the custom.css.
Something like:
.compliments .class {
bright medium light;
}
Can you help me?
@Bill-Door You can use custom.css with zoom property for body. Adjust 200% below to your taste.
body {
zoom: 200%;
}
PS: It will also survive the reboots
I have an iFrame to hold a weather radar image.
Default for iFrame is no border but I wanted one to act as border for radar image. Got border no problem and I defined color also but it behaved as if it had some sort of bevel type property that I don’t understand.
For example if I chose hex value for red, the bottom and right borders would be red, the top and left borders would be a darker red.
Anyone got any thoughts on what is going on there?
@JasonInOttawa May be float is doing this because you are not showing week text as header ? In my screenshot they are aligned on top. Any ways both are on user choice !
Hey there - the instructions above doesn’t worked for me. But I found a solution that works perfectly:
Open https://github.com/googlefonts/noto-emoji/tree/master/fonts
Download most recent NotoColorEmoji.ttf
Copy file in /home/pi/.fonts (if you cant see the .fonts folder please use CTRL+H to display it (Folders with names starting by “.” are hidden on Raspbian))
Done!
This refers to upper or lower case am/pm? I checked CSS case and it refers to text-transform.
I’ve seen this in multiple modules and want to make sure.
Hello,
is it possible to have custom symbol according to the content in title ?
for example :
appointment : checkbox
birthday : birthday cake
holidays : something else
thks
I’ve tried setting classes for the compliments module to:
classes: 'bold xlarge bright complimenttime',
Where the last is for MMM-ModuleScheduler
But when it shows up, I see this for the module:
class="thin xlarge bright pre-line"
Where on earth is ‘thin’ from, and where is the bold?
@Viperzee the initial custom.css is empty.
the touch command will update the date/time on a file, and create the file if it is not there.
if you had used the installation script, which I support, then it would have done the same thing
https://github.com/sdetweil/MagicMirror_scripts
@justjim1220 said in MMM-Astrology font color:
@cowboysdude
what is the content class in the css file?
Just curious, because that is how I figured out how to change the color of the description content…
gives me this…
and this…
gives me this…
sorry to revive an old thread,
#1 the css does work to change colors. thank you…
#2 how in the hell did you get your hscope to look that way i like it a lot.
@chassain-0 see this
https://support.awesome-table.com/hc/en-us/articles/115001399529-Use-CSS-to-change-the-style-of-each-row-depending-on-the-content
Display and style elements depending on their value
