This is my first attempt at setting up a MagicMirror. I am using the MMM-Carousel module to loop through four different configurations. I am not doing any fancy. I am trying to learn the basics and will then go from there. Here is my setup…

Hardware: Raspberry Pi3 built using the CanaKit, displayed on a vertical 24’’ monitor
Stock Modules: Clock, Calendar, Weather, Compliments
3rd Party Modules: MMM-NFL, MMM-GooglePhotos, MMM-Carousel
Customizations: I made updates to the CSS to change the opacity of modules, and to add rounded corners.

alt text

alt text

alt text

alt text

love the colors! would be cool to add like a cool graphic or cyberpunk logo to reinforce more.

@earlman great work, this looks really good.minimalist and clean

@rdwilbrink I don’t know.

Hi there! thanks for the easy fix! Is there a way to reposition the modules on the mirror? when I rotate the screen 90 degrees the bottom module (the newsfeed) its completely cut out.

I imagine the Custom.CSS failure is related to the fact that its calling for an image. I would remove the two lines related to the Background and see if it works then. Other than some colors and of course the forcing of the column widths there is not really much in the custom.css

In the config.js I sent you via email - you will see I changed to using the module MMM-Profilepicture pointing back at localhost to host backgrounds there. It is much cleaner easier to use. I also switched from wunderlist to todoist for the todo list…

I have not done much other than change the background for many years now - Wife is asking for a refresh, and we picked up a Narrow hutch someone was throwing away that with a coat of paint some new handles and a new monitor will make for an excellent info board - so once that is refinished i will start anew again but this time the screen will be in portrait.

Good luck and happy learning

@sdetweil . I would like a copy of you code as weel
If possble the Config.js, Main.cssand Custom.css
my email is jbarkhuizen@gmail.com

Hello

I applied the css, great

Except that my screen is small, I have to put it in portrait mode when I do this:

https://forum.magicmirror.builders/topic/9707/save-performance-when-rotating-screen-e-g-on-raspberry-pi/12?page=2

the whole image goes into a spin

thanks for the help

Bonjour

J’ai appliqué le css , génial

Sauf que mon ecran et petit , je dois le mettre en mode portrait quans je fais ceci :
https://forum.magicmirror.builders/topic/9707/save-performance-when-rotating-screen-e-g-on-raspberry-pi/12?page=2

toute l’image part en vrille

Merci pour l’aide

@george @sdetweil thanks a lot guys both worked just right!!

@robertybob
You will need to adjust the size of the modules.

@Piranha1605 :thumbs_up_medium-light_skin_tone: thanks nice work

Should .brightb should be .bright ?

I also noticed there are some duplicates. Each one of the following have 2 entries.

.currentweather .wi-cloudy .currentweather .wi-night-showers .currentweather .wi-night-snow .currentweather .wi-showers .weatherforcast .wi-cloudy .weatherforcast .wi-night-showers .weatherforcast .wi-showers

I don’t believe they cause any problem though.

@j-e-f-f

Hi Jeff, amazing job on the css. Would you please share your files for me to learn? Thanks in advance.

Vincent

Hi!

Just thought I would share how I put the date below the time for the default Clock module using only CSS - no need to modify or create your own clock module!

0_1564610343042_Screenshot 2019-07-31 at 23.56.53.png

custom.css

/* CLOCK */ #module_2_clock > div > div { display: flex; flex-direction: column; } /* Date */ #module_2_clock > div > div > div.date { order: 2; } /* Time */ #module_2_clock > div > div > div.time { order: 1; font-family: Roboto, sans-serif; font-weight: 300; font-size: 80px; line-height: 75px; letter-spacing: -3px; color: #fff; }

Also, to show the week on a separate line and make it a little bit smaller, use HTML tags within brackets when setting the date format, like this:

config.js

{ module: "clock", position: "top_right", config: { displaySeconds: false, dateFormat: "dddd D MMMM[< br/ >< small >vecka] W[< /small >]", } },

NOTE: Since the forum is sanitising HTML, remove all the spaces from the tags above in < small >, < /small > and < br/ > to make it work.

Hope this can inspire and help someone! :)

@thejoaovitor hi thanks alot for this share amazing work.

may I ask, the videos that you have used, do they contain some sort of text describing the video? how did you manage to remove them?

thanks.

@ganget said in Animated rainbow color gradient for the default clock module:

{
module: “clock”,
position: “top_center”,
classes: “clock-time-only”, //this line
config: {
timeFormat: 24,
showPeriod: true,
displaySeconds: false
}

Ok but it’s not ok on mine :(.

{ module: "updatenotification", position: "top_bar" }, { module: "clock", position: "top_left", classes: "clock-time-only" },

I really like what you’ve done here, and am looking to do something similar.
I’ve got a touchscreen monitor so firstly wondering if I can have them on different pages and swipe between them.

I would also like this if I could have a slideshow playing and then when music played on my sonos speakers then that module would show instead of the slideshow, or over the top of?

Anyone have any ideas?

That is an early look at @Sean 's upcoming module MMM-calendarExtDays.

He is about to release an updated version under a new name - look on the forum here for MMM-calendarExtDays

-Earle