Adding CSS border properties to placeholders

  • 1
  • Question
  • Updated 3 years ago
  • Answered
  • (Edited)
Forgive me if this is a stupid question. I haven't been able to dig it up via a search.

I am currently running another digital signage software that I am unhappy with. I just stumbled across Rise while working on my own basic replacement. I really like it so far but I have one question.

Let's say I have a Text Placeholder in a presentation. It has a white 80% opaque background with black text. I want the background to have rounded corners with border-radius as well as a box-shadow.

I've tried using the HTML editor to add these style attributes to the ph0 div but that isn't working.

Right now in my current signage software I have to code absolutely everything by hand because the interface and editors are so horrible. I don't mind editing CSS for fine tuning of styles but I'm trying to get away from the part where I have to do absolutely everything from scratch with HTML and CSS.

What's the best way to accomplish a basic text box with a background that has rounded corners and a box shadow?

Thanks.
Photo of Chris - Fantastitech

Posted 3 years ago

  • 1
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Chris,
I am looking into this now. Do you have the link to the presentation itself?
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Hi Chris,
I came across this handy tool that can generate CSS rounded corners and a drop shadow: http://cssround.com/
It stops you from writing something from scratch, but still involves code.
Instead of the Text Widget tool, you can use the HTML Widget tool and then input the text in place. You can try below as an example:

<div style="width:400px;height:300px;-webkit-border-radius: 18px 20px 20px 20px;-moz-border-radius: 18px 20px 20px 20px;border-radius: 18px 20px 20px 20px;border:8px solid #000000;background-color:#E3E3E3;-webkit-box-shadow: #B3B3B3 21px 21px 21px;-moz-box-shadow: #B3B3B3 21px 21px 21px; box-shadow: #B3B3B3 21px 21px 21px;">Text here...</div>
(Edited)
Where did you end up putting the CSS? I'm trying to make it layed out as simply as possible. Putting style properties at the top of the HTML editor doesn't work as all of that HTML is outside of the iframe so it can't interact with the divs within the iframe.

I see that I can use theĀ sc0_pre0_ph0_0w class to style the iframe container which is working for border radius but now I need padding on the text within it. The div inside containing the text has the ID "page".

My only idea on how to do this in the HTML view is using javascript but that could get ugly once more placeholders are added to the presentation.

I can actually put CSS directly into the text editor and it will save, but will not show up on subsequent loads. I can edit it in the HTML view using the additionalParams field but I don't want to do CSS editing there because it's all one line.
(Edited)
Photo of Stephen Garrett

Stephen Garrett, Champion

  • 2,674 Points 2k badge 2x thumb
Ahh. I forgot that when we were doing that I was hosting a modified version of an existing widget. That may not help you much because I was making the changes from within the widget's css. Let me look at this a little bit, and see if there is an easier way to do this.
I just forked the text widget. I don't know node.js or Angular but I can see where the CSS for the widget should go. Maybe I can fumble around and add a form field to the settings to add the CSS and submit a pull request.
Photo of Stephen Garrett

Stephen Garrett, Champion

  • 2,674 Points 2k badge 2x thumb
If you have a place to host the widget, all you have to do is host the dist folder and create a new gadget in your dashboard by giving it the link for widget.html and settings.html file. I made some videos a while back about building widgets that goes into more detail.

https://youtu.be/ux5g1IUVg-E

I do things a little differently now, but this helps explain the parts that go into a widget.
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Thanks for your input Stephen :) Chris, let us know how the above works out for you!
Hannah