LCARS - Version 1

[biscuitbigfoot]

Inspired by @jasvanek LCARS mirror, I’ve created my own. It’s not perfect by a long shot, but it works for me!

I made a crude background on PowerPoint:

backround2.jpeg

Then after years and years (probably an hour) I put together this custom CSS:

:root {
    background-image: url("backround2.jpeg");
    --color-text: #999;
    --color-text-dimmed: rgb(102, 102, 102);
    --color-text-bright: rgb(255, 255, 255);

    --font-primary: "Antonio Bold";
    --font-secondary: "Antonio Light";
    
    --font-size: 25px;
    --font-size-small: 0.75rem;
  
    --gap-body-top: 150px;
    --gap-body-right: 61px;
    --gap-body-bottom: 160px;
    --gap-body-left: 200px;
    
    --gap-modules: 30px;
  }

.clock {
    --color-text: #CC807D;
} 
.weather {
    --color-text: #CC807D;
}

.region.top.right {
  width: 30%
}

.mmmtraffic-firstline {
  font-size: 25px;
  color: #CC807D;
}

.mmmtraffic-secondline {
  font-size: 0.75rem;
  color: rgb(102, 102, 102);
}

If this is total rubbish, please let me know how to improve in excruciating detail!

[lparco]

I think you did a great job! Very Startrek like. I’m very new to this but I would like to use your background but I’m not sure where to type the commands and enter the detail. If you could provide more details it would be appreciated.
Thanks

[biscuitbigfoot]

@lparco What do you have done so far?

[lparco]

@biscuitbigfoot
I have successfully installed magic mirror and have a few extra modules installed also. I’m having some trouble with actually getting them displayed properly but slowly it’s coming together. I have no programming background but I’m pleased with how it’s coming together. I’m a Star Trek fan so that’s what made me contact you when I saw how beautiful your screen turned out

[draxiom]

Neat @biscuitbigfoot!
@lparco I know this is an old thread, but I got this working as well. Copy the backround2.jpeg to the css directory and add the css provided to the bottom of the main.css file. “Cascading style sheets” mean that whatever is at the bottom will override anything above, so you don’t need to remove duplicates.

After I got the background working, I had to tweak some of the sizes to make it look right on my monitor through trial and error.

[sdetweil]

@draxiom please put any private css in custom.css, don’t edit our files. it breaks updates

main.css is loaded first
any module provided css are loaded next ( in config.js order)
custom.css is loaded last, so it can override anything specified before

[draxiom]

@sdetweil Good call! I didn’t see that there 🫣 I moved my custom css to custom.css and it all works the same. Thanks!