• 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.5k 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.
  • 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
              • A Offline
                ATibbs @cowboysdude
                last edited by Apr 10, 2018, 4:26 PM

                This post is deleted!
                1 Reply Last reply Reply Quote 0
                • A Offline
                  ATibbs @cowboysdude
                  last edited by Apr 10, 2018, 4:28 PM

                  @cowboysdude said in Box/Frame around module:

                  -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;

                  So does this mean you are making constant calls out to the internet to reference this picture? Would it be a better option to store a copy of the image locally for reference? Sorry for the necro

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