Please help me adjust the HTML/CSS in my Custom HTML Prompt

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! :slight_smile:

Here are the things that I am having trouble with:

  1. 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:

  1. 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:

Screen Shot 2022-01-23 at 6.14.50 PM

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:

    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%;}
    <a href="#" onclick="window.KeyboardMaestro.Cancel('Cancel')"><input name="varToday" class="input" type="text" /></span></a>

Could you please post your macro as well, to aid our testing? Cheers

I honestly don't believe that the macro will help, unless you have TaskPaper to test with.

That said, here it is:
Ω—Reminder Display—TaskPaper @today.kmmacros (5.1 KB)


I have created a post on this. It might be what you looking for.

You can click on it to close it , or set a delay to auto-close. Default is no auto-close.

Hi @macdevign_mac — Thanks for the suggestion! I will check it out tomorrow night.

Hey Jim - On the off chance you don't find an answer here on the KM forum, if your question isn't specifically related to KM itself, you can always try Google. You know, for things like HTML, CSS, Javascript, whatever. Of course, the trick is always finding the right way to word the search... :rofl: