Box/Frame around module

Da-ne-ezy

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

yawns

@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}

cowboysdude

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

Before frame:

After adding frame to css:

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

Da-ne-ezy

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

justjim1220

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

mediathreat

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

broberg

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

mediathreat

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

ATibbs

This post is deleted!

ATibbs

@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