Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

[Help Style Sheet] with API markdown.js

1606568944
Michael I.
Pro
Sheet Author
I am trying to edit @ keithcurtis &nbsp;Style Sheet as written by Keith (on the GM Notes) bg { &nbsp; &nbsp; &nbsp; background-image: url('<a href="https://i.imgur.com/vjL1blE.jpg" rel="nofollow">https://i.imgur.com/vjL1blE.jpg</a>'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding: 30px; &nbsp; &nbsp; &nbsp;&nbsp;padding-top: 1px; &nbsp; &nbsp; &nbsp;&nbsp;margin: -30px; } what I am trying to setup is a Border image: Example have not got it to display yet so have not had a chance to work with the numbers yet Has anyone tried Border image vs Background images yet? any help will be appreciated. div { border: 28px; border-image: url(' <a href="https://image.shutterstock.com/z/stock-vector-red-border-frame-deco-plaque-vector-art-simple-line-corner-361977956.jpg" rel="nofollow">https://image.shutterstock.com/z/stock-vector-red-border-frame-deco-plaque-vector-art-simple-line-corner-361977956.jpg</a> '); border-image-slice: 27; border-image-repeat: stretch; border-image-width: 20px; border-image-outset: 0px; width: 300px; height: 200px; }
1606683591
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
I have never messed with that bit of css. (I wasn't even aware that border-image-slice was a css property—cool). Unfortunately, I can't put aside time for research today. Perhaps someone with more bonafide css chops can answer?
1606700129
Michael I.
Pro
Sheet Author
If you get more time and a chance to research and find out anything, please let me know. I will continue to Search.
1606706600

Edited 1606706728
Oosh
Sheet Author
API Scripter
I haven't really played with borders before, just gave it a quick crack with Stylus on a 5e NPC sheet though: Code: .ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable .dialog.characterdialog.ui-dialog-content.ui-widget-content { border-image: url('<a href="https://image.shutterstock.com/z/stock-vector-red-border-frame-deco-plaque-vector-art-simple-line-corner-361977956.jpg" rel="nofollow">https://image.shutterstock.com/z/stock-vector-red-border-frame-deco-plaque-vector-art-simple-line-corner-361977956.jpg</a>'); border-image-slice: 33%; border-image-width: 10%; } Is that anything like what you're trying to do? I'm not going to pretend I fully understand the slice property yet, but I just messed with the w3schools example until I kinda got the concept.
1606749364

Edited 1606754563
Michael I.
Pro
Sheet Author
Yes @Oosh That is what I was looking for Thank you so much Though I am trying to get it into a handout thus why I am using Markdown.js