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

How add transparent background to modules

Scheduled Pinned Locked Moved Solved Custom CSS
18 Posts 7 Posters 11.9k Views 6 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.
  • ? Offline
    A Former User @johnny_swindle
    last edited by A Former User Dec 2, 2018, 8:43 PM Dec 2, 2018, 8:41 PM

    @johnny_swindle
    0_1543783267033_css.png
    (Sorry, my captured image was too huge to upload, so I resized, but image became somewhat blurred)

    add this into your ~/MagicMirror/css/custom.css

    .module.calendar {
      background-color:rgba(0,0,0,0.6);
      border-radius:8px;
      padding:8px;
    }
    

    If it work,
    Instead you can use this also.

    .module {
      background-color:rgba(0,0,0,0.6);
      border-radius:8px;
      padding:8px;
    }
    
    J J 2 Replies Last reply Dec 4, 2018, 2:14 AM Reply Quote 3
    • K Offline
      krishnatnl
      last edited by Dec 2, 2018, 9:51 PM

      This bg css is working great @Sean .

      I actually used this in the @shbatm mmm-carousel as a custom css class.

      1 Reply Last reply Reply Quote 0
      • J Offline
        johnny_swindle @Guest
        last edited by Dec 4, 2018, 2:14 AM

        @sean

        Thank you…that did the trick.

        1 Reply Last reply Reply Quote 0
        • M Offline
          MWel1977
          last edited by Dec 6, 2018, 2:08 PM

          I have the same problem.
          Was searching for this on the forum.
          Will try Sean’s solution tonight.

          1 Reply Last reply Reply Quote 0
          • J Offline
            JonoGee @Guest
            last edited by Jun 13, 2019, 4:58 PM

            @Sean said in How add transparent background to modules:

            .module.calendar {
            background-color:rgba(0,0,0,0.6);
            border-radius:8px;
            padding:8px;
            }

            I have tried this format …

            .module.calendar {
              background-color:rgba(0,0,0,0.6);
              border-radius:8px;
              padding:8px;
            }
            

            and it works perfect for most modules but simply will not work for currentweather, weatherforecast or compliments?
            Any ideas folks?

            B 1 Reply Last reply Jun 13, 2019, 5:08 PM Reply Quote 0
            • B Offline
              broberg Project Sponsor @JonoGee
              last edited by Jun 13, 2019, 5:08 PM

              Show us your css code that you are trying to use

              @JonoGee said in How add transparent background to modules:

              I have tried this format …

              .module.calendar {
                background-color:rgba(0,0,0,0.6);
                border-radius:8px;
                padding:8px;
              }
              

              and it works perfect for most modules but simply will not work for currentweather, weatherforecast or compliments?
              Any ideas folks?

              J 1 Reply Last reply Jun 13, 2019, 5:28 PM Reply Quote 0
              • J Offline
                JonoGee @broberg
                last edited by Jun 13, 2019, 5:28 PM

                @broberg Hi mate. Thanks for taking the time.
                I will copy it below… The PushBullet Notification one works fine but ones i mentioned don’t…

                 body {
                
                
                
                
                .module.currentweather {
                  background-color:rgba(0,0,0,0.6);
                  border-radius:8px;
                  padding:8px;
                }
                
                
                 }
                
                .module.MMM-PushBulletNotifications {
                  background-color:rgba(0,0,0,0.6);
                  border-radius:8px;
                  padding:8px;
                }
                
                
                
                 }
                
                .module.compliments {
                  background-color:rgba(0,0,0,0.6);
                  border-radius:8px;
                  padding:8px;
                }
                
                
                 }
                
                
                
                 }
                
                .module.weatherforecast {
                  background-color:rgba(0,0,0,0.6);
                  border-radius:8px;
                  padding:8px;
                }
                

                Regards

                B 1 Reply Last reply Jun 13, 2019, 8:10 PM Reply Quote 0
                • B Offline
                  broberg Project Sponsor @JonoGee
                  last edited by broberg Jun 13, 2019, 8:12 PM Jun 13, 2019, 8:10 PM

                  @JonoGee

                  Okey,
                  I see your problem.

                  You have put the .module.currentweather{} within the body{ }

                  Just remove the first line body { and the lonely } before .module.MMM-PushBulletNotifications {

                  Then it will work just fine.

                  And btw, You have a lot of stray }-brackets remove them aswell

                  J 1 Reply Last reply Jun 14, 2019, 8:41 AM Reply Quote 2
                  • J Offline
                    JonoGee @broberg
                    last edited by Jun 14, 2019, 8:41 AM

                    @broberg I have sorted it this morning. I really appreciate your taking the time to help me, Thankyou Broberg. So many on here seem unwilling to help. Youre a legend!

                    1 Reply Last reply Reply Quote 0
                    • S Offline
                      schwarem
                      last edited by Sep 17, 2020, 2:39 AM

                      I am not having any success with this either. Here is my CSS. Can someone help me out?

                      body {
                      	color: #aaa;
                      }
                      
                      .dimmed {
                        color: #666;
                      }
                      
                      .normal {
                        color: #999;
                      }
                      
                      .bright {
                        color: #fff;
                      }
                      
                      .module.clock {
                        background-color:rbga(255,255,255,0.4);
                        border-radius:8px;
                        padding:8px;
                      }
                      
                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 2 / 2
                      • First post
                        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