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

Box/Frame around module

Scheduled Pinned Locked Moved Development
12 Posts 8 Posters 8.6k Views 7 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.
  • D Offline
    Da-ne-ezy
    last edited by Jul 25, 2017, 6:49 AM

    Hi,
    can anyone explain how to make a thin box around a module?
    Like in this picture below. I don’t want it on every module just on one or two. The Frame should be same size as the module itself. Thanks for your help!

    0_1500965213092_Future-625x352.jpg

    FREE IT-Projects and Raspberry Pi Tutorials on my Website: www.danykilian.com

    S 1 Reply Last reply Jul 25, 2017, 7:11 AM Reply Quote 0
    • S Offline
      strawberry 3.141 Project Sponsor Module Developer @Da-ne-ezy
      last edited by Jul 25, 2017, 7:11 AM

      @Da-ne-ezy custom.css

      .MODULENAME {
        border: 2px solid white;
      }
      

      Please create a github issue if you need help, so I can keep track

      D M 2 Replies Last reply Jul 25, 2017, 7:48 AM Reply Quote 1
      • D Offline
        Da-ne-ezy @strawberry 3.141
        last edited by Jul 25, 2017, 7:48 AM

        @strawberry-3.141 Thank you very much.

        What if I want a special frame like this? How would you do it?

        0_1500968932358_14284711641_ba88f4c074_o.jpg

        FREE IT-Projects and Raspberry Pi Tutorials on my Website: www.danykilian.com

        Y 1 Reply Last reply Jul 25, 2017, 8:37 AM Reply Quote 0
        • Y Offline
          yawns Moderator @Da-ne-ezy
          last edited by Jul 25, 2017, 8:37 AM

          @Da-ne-ezy
          Maybe like this:

          http://border-image.com/#{"src"%3A"https%3A%2F%2Fforum.magicmirror.builders%2Fassets%2Fuploads%2Ffiles%2F1500968912312-14284711641_ba88f4c074_o.jpg"%2C"linkBorder"%3Atrue%2C"borderWidth"%3A[0%2C0%2C0%2C0]%2C"imageOffset"%3A[24%2C0%2C27%2C11]%2C"fill"%3Atrue%2C"setRepat"%3Afalse%2C"repeat"%3A["stretch"%2C"repeat"]%2C"scaleFactor"%3A0.7052709725315516%2C"setRepeat"%3Atrue}

          1 Reply Last reply Reply Quote 2
          • C Offline
            cowboysdude Module Developer
            last edited by Jul 25, 2017, 12:11 PM

            Here’s a general idea of what @strawberry-3-141 and @yawns are talking about:

            Before frame:

            0_1500984573924_mm2.png

            After adding frame to css:

            0_1500984602375_frame.png

            I did this by adding this to my own css file:

              border-style: solid;
            border-width: 6px 5px 7px 4px;
            -moz-border-image: url(https://forum.magicmirror.builders/assets/uploads/files/1500968912312-14284711641_ba88f4c074_o.jpg) 6 5 7 4 stretch;
            -webkit-border-image: url(https://forum.magicmirror.builders/assets/uploads/files/1500968912312-14284711641_ba88f4c074_o.jpg) 6 5 7 4 stretch;
            -o-border-image: url(https://forum.magicmirror.builders/assets/uploads/files/1500968912312-14284711641_ba88f4c074_o.jpg) 6 5 7 4 stretch;
            border-image: url(https://forum.magicmirror.builders/assets/uploads/files/1500968912312-14284711641_ba88f4c074_o.jpg) 6 5 7 4 fill stretch;
            padding-top: 50px;   
            padding-bottom: 50px;    
            }
            
            A 2 Replies Last reply Apr 10, 2018, 4:26 PM Reply Quote 3
            • D Offline
              Da-ne-ezy
              last edited by Jul 25, 2017, 1:50 PM

              Thank you @cowboysdude and @yawns. I will try this by myself later.

              FREE IT-Projects and Raspberry Pi Tutorials on my Website: www.danykilian.com

              1 Reply Last reply Reply Quote 1
              • J Offline
                justjim1220 Module Developer
                last edited by Mar 26, 2018, 9:56 PM

                This is really cool.
                Now, I would like to see how to do something like this for each module…

                "Life's Too Short To Dance With Ugly People"
                Jim Hallock - 1995

                1 Reply Last reply Reply Quote 0
                • M Offline
                  mediathreat @strawberry 3.141
                  last edited by Mar 30, 2018, 6:26 PM

                  @strawberry-3.141 where would that custom.css go? which directory? in the module directory?

                  B 1 Reply Last reply Mar 30, 2018, 6:37 PM Reply Quote 0
                  • B Offline
                    broberg Project Sponsor @mediathreat
                    last edited by broberg Mar 30, 2018, 6:38 PM Mar 30, 2018, 6:37 PM

                    @mediathreat the custom.css -file already exists and is located in the folder aptly named css

                    M 1 Reply Last reply Mar 30, 2018, 6:52 PM Reply Quote 1
                    • M Offline
                      mediathreat @broberg
                      last edited by Mar 30, 2018, 6:52 PM

                      @broberg whoa you just opened a whole new world of customization for me thanks dude!

                      1 Reply Last reply Reply Quote 1
                      • 1
                      • 2
                      • 1 / 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