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

Styling Macro Output with CSS

Good morning all,


I've just recently started playing on Roll20 and I'm attempting to learn how to write macros.  As I'm currently playing a bard, I'm trying to write something inspiration related and have come up with the following:


/em inspires @{target|token_name} (1d[[6 + {{@{MYCHARNAME|base_level}, 0}>4}*2 + {{@{MYCHARNAME|base_level}, 0}>9}*2 + {{@{MYCHARNAME|base_level},0}>14}*2]])


Since I'm not a pro user I cannot use the API to tick down my Inspiration resource pool, but I can (using the if statement hack I read about on the wiki) look at my character's level, determine the level appropriate inspiration die, and pass that information along to the rest of my part.  This all works fine.


The issue I have stems with the appearance of the output:


As you can see, because the if statement math is treated like a roll, the output is formatted as such.  My reaction: "That's fine, I know there's a hack to get CSS to work in chat.  I'll just format it out."  It seems that I was naive however, as while I can get the actual text surrounding the "roll" to accept CSS:


/em [inspires @{target|token_name}](#" style="color:red;) (1d[[6 + {{@{MYCHARNAME|base_level}, 0}>4}*2 + {{@{MYCHARNAME|base_level}, 0}>9}*2 + {{@{MYCHARNAME|base_level},0}>14}*2]])




Attempting to format the "roll" itself leads to the following:


/em [inspires @{target|token_name} (1d[[6 + {{@{MYCHARNAME|base_level}, 0}>4}*2 + {{@{MYCHARNAME|base_level}, 0}>9}*2 + {{@{MYCHARNAME|base_level},0}>14}*2]])](#" style="color:red;)



Attempting to apply the CSS around the roll portion alone leads to similar results.  I suspect what I'm trying to do might be impossible on account of Roll20's order of operations, but I'm uncertain.  Am I missing something obvious formatting wise?  Am I better off just trying to get this into a roll template?


Thanks for any help you can provide.  My apologies if I'm missing something obvious staring me in the face.

March 11 (2 years ago)
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator

I'd recommend using the roll template included with the sheet. That will provide some default styling. You can find info on the by roll20 sheet's template fields in the wiki.

March 11 (2 years ago)
keithcurtis
Forum Champion
Marketplace Creator
API Scripter

Try this:

/em inspires @{target|token_name} (1d[[[6 + {{@{MYCHARNAME|base_level}, 0}>4}*2 + {{@{MYCHARNAME|base_level}, 0}>9}*2 + {{@{MYCHARNAME|base_level},0}>14}*2]]](# style = "background-color: transparent;padding: 0px;color:#653e10;display: inline-block;border: none;))

You were on the right track, you just hadn't opened the square bracket. All the styling info I put in was what was necessary to change it from the Roll20 big pink button into plain /em text.

Alrighty.  Will do.  Thanks for getting back to me.


Out of curiosity, do you know if what I was doing was impossible?  Or was it simply ill-advised?

@keithcurtis  Ah!  Excellent!  Thank you!  Pardon, my last response was to @Scott C. prior to seeing your answer.  I took the time to pick apart your answer to see where I went wrong.


I think the real issue here is me trying to smash together multiple things without actually understanding what they all do.

[[ ]] is for inline rolls.

The format for creating HTML links is [Link Text](href)

@Oosh closed the href property using # and tacked on HTML style information.

So I needed to put [[ ]] around my "if" statement to make sure it gets converted to text.

I needed to put the [ ] around the resultant text followed by the (# + style information) to create and style my faux link.


I've only been at this for a couple days now.  Learning to parse things when the code is all in one line is making my head hurt.  I've been too spoiled by IDEs in the past.


Thanks to @Scott C. and @keithcurtis for your responses.

March 11 (2 years ago)
keithcurtis
Forum Champion
Marketplace Creator
API Scripter

You're doing some pretty complex stuff for someone who's only been at it for a few days!