Hello all,
I have chosen to move from Display Large to a Custom HTML Prompt, as I want more control over how the display/message is shown, and I want to be able to dismiss the display by clicking on it.
I have the following figured out: basic display, live text taken from a variable, and I can dismiss the display by clicking on the text. Hooray! 
Here are the things that I am having trouble with:
- I want all of the text to show. Right now, longer lines of text are cut off.
Example text: - Test out Bike some more and give Jesse feedback @today
What is currently being displayed:
- Can I make the background (currently gold, as seen in the above screenshot) transparent?
Or, if not transparent, I want to minimize the width and height of the gold colored area.
Currently, the display appears like this when invoked:
Can I force it to be larger? (like in the first screenshot?)
I suspect that this is all related to my meager HMTL/CSS skills—I still haven't wrapped my head around layout using CSS code—your help is truly appreciated, as I am stuck on the above.
My current HTML/CSS code:
<html>
<style>
body {
background: gold; }
section {
background: black;
border-radius: 1em;
padding: 1em;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
input {
font-size: 2em;
background: black;
color: #fdf6e3;
width: 100%;}
</style>
<section>
<a href="#" onclick="window.KeyboardMaestro.Cancel('Cancel')"><input name="varToday" class="input" type="text" /></span></a>
</section>