Prettying Up a Macro (5E OGL Template)

Hello. I'm making random boss, combat music, travel music, etc calls to the API, and I'm wondering if I can make this: Look more like this: The difference between the two is that the music macro makes api calls, and the rules macro links to handouts. Here's an image of the two macros, since I think the forum might do something to the markdown: So, to sum up, is there a way to have macro buttons or api commands in nested macro outputs that appear as text to click, rather than purple buttons?

I'm pretty sure there's a way to format the buttons appearance via API. I don't have pro access right now, so I couldn't tell you for sure... But this thread may give you a clue?&nbsp;<a href="https://app.roll20.net/forum/post/4173588/api-command-buttons-w-slash-selected-and-target-macros" rel="nofollow">https://app.roll20.net/forum/post/4173588/api-command-buttons-w-slash-selected-and-target-macros</a>

With the API, when you output an anchor tag with an href that starts with !, you get an API button. The “purple” boxes are the default styling, but you can use inline CSS to make them look just about any way you like.&nbsp; Roll Templates have their own formatting. If this is purely for your own aesthetics, you could use Stylish to change the look locally in your own browser. If you want others to see the links that way, you’ll probably have to edit the css for the character sheet.&nbsp;

Those ugly pink buttons. I would like to change them as well but don't have the skills.

This is the style they currently have: .textchatcontainer a[href^="!"],&nbsp;.textchatcontainer a[href^="~"]&nbsp;{ background-color:&nbsp;#ce0f69; padding:&nbsp;5px; color:&nbsp;white; display:&nbsp;inline-block; border:&nbsp;1px solid&nbsp;white; } You can put that in Stylish for app.roll20.net and change them to whatever colors and styles you'd like.

For example, this will make them look like medium red text with an underline on hover: .textchatcontainer a[href^="!"], .textchatcontainer a[href^="~"] { &nbsp; &nbsp; background-color: transparent; &nbsp; &nbsp; padding: inherit; &nbsp; &nbsp; color: #990000; &nbsp; &nbsp; display: inline; &nbsp; &nbsp; border: 0; } .textchatcontainer a[href^="!"]:hover, .textchatcontainer a[href^="~"]:hover { &nbsp; &nbsp; text-decoration: underline !important; }

Would this only change for my computer? or my group as well?

Only your computer, and specifically, only the browser where you have Stylish installed.

Changing it for everyone isn't possible without everyone using an API script to create the buttons.

Thanks, that's pretty much what I figured, but the line in the wiki about /direct had me wondering. I tried doing stuff with it, but it kept telling me that /direct isn't a command, or something like that. I'll stick with default OGL sheet. It breaks enough without me mucking it up with my changes (also not sure what would happen to compendium stuff if I changed the sheet).

found this button online when you hover over the button it turns all blue. Would this work. I will add the code but it would likely get processed. This is stuff i pieced together out of a few different styles so there ma be things i don't need like background-color: #4CAF50; /* Green */ at the start? &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; .button { &nbsp;&nbsp;&nbsp; background-color: #4CAF50; /* Green */ &nbsp;&nbsp;&nbsp; border: none; &nbsp;&nbsp;&nbsp; color: white; &nbsp;&nbsp;&nbsp; padding: 16px 32px; &nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp; text-decoration: none; &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; font-size: 16px; &nbsp;&nbsp;&nbsp; margin: 4px 2px; &nbsp;&nbsp;&nbsp; -webkit-transition-duration: 0.4s; /* Safari */ &nbsp;&nbsp;&nbsp; transition-duration: 0.4s; &nbsp;&nbsp;&nbsp; cursor: pointer; } .button { &nbsp;&nbsp;&nbsp; background-color: white; &nbsp;&nbsp;&nbsp; color: black; &nbsp;&nbsp;&nbsp; border: 2px solid #008CBA; } .button:hover { &nbsp;&nbsp;&nbsp; background-color: #008CBA; &nbsp;&nbsp;&nbsp; color: white; } .button {border-radius: 8px;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;h2&gt;Hoverable Buttons&lt;/h2&gt; &lt;p&gt;Use the :hover selector to change the style of the button when you move the mouse over it.&lt;/p&gt; &lt;p&gt;&lt;strong&gt;Tip:&lt;/strong&gt; Use the transition-duration property to determine the speed of the "hover" effect:&lt;/p&gt; &lt;button class="button button"&gt;Blue&lt;/button&gt; &lt;/body&gt; &lt;/html&gt;

Bast L. said: I'll stick with default OGL sheet. The atk and npcatk Roll Templates style Ability Command Buttons (note: not API Command Buttons) to look regular text rather than pink buttons. ( Info courtesy of Scott C. )

This should do that for you: .textchatcontainer a[href^="!"], .textchatcontainer a[href^="~"] { &nbsp;&nbsp;&nbsp; padding: 16px 32px; &nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp; text-decoration: none; &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; font-size: 16px; &nbsp;&nbsp;&nbsp; margin: 4px 2px; &nbsp;&nbsp;&nbsp; -webkit-transition-duration: 0.4s; /* Safari */ &nbsp;&nbsp;&nbsp; transition-duration: 0.4s; &nbsp;&nbsp;&nbsp; cursor: pointer; &nbsp;&nbsp;&nbsp; background-color: white; &nbsp;&nbsp;&nbsp; color: black; &nbsp;&nbsp;&nbsp; border: 2px solid #008CBA; } .textchatcontainer a[href^="!"]:hover, .textchatcontainer a[href^="~"]:hover { &nbsp;&nbsp;&nbsp; background-color: #008CBA; &nbsp;&nbsp;&nbsp; color: white; }

The Aaron said: This should do that for you: .textchatcontainer a[href^="!"], .textchatcontainer a[href^="~"] { &nbsp;&nbsp;&nbsp; padding: 16px 32px; &nbsp;&nbsp;&nbsp; text-align: center; &nbsp;&nbsp;&nbsp; text-decoration: none; &nbsp;&nbsp;&nbsp; display: inline-block; &nbsp;&nbsp;&nbsp; font-size: 16px; &nbsp;&nbsp;&nbsp; margin: 4px 2px; &nbsp;&nbsp;&nbsp; -webkit-transition-duration: 0.4s; /* Safari */ &nbsp;&nbsp;&nbsp; transition-duration: 0.4s; &nbsp;&nbsp;&nbsp; cursor: pointer; &nbsp;&nbsp;&nbsp; background-color: white; &nbsp;&nbsp;&nbsp; color: black; &nbsp;&nbsp;&nbsp; border: 2px solid #008CBA; } .textchatcontainer a[href^="!"]:hover, .textchatcontainer a[href^="~"]:hover { &nbsp;&nbsp;&nbsp; background-color: #008CBA; &nbsp;&nbsp;&nbsp; color: white; } how do i enter that code or can you suggest a website that would help me.

You need the Stylish Plugin for&nbsp; Chrome or&nbsp; Firefox .

Very cool thank you now I just need to tweak it some

Awesome from this To this or from your other post to Bast L Thanks The Aaron this is very cool and fun. Plus I am learning a lot.

Cheers!

I find Talking to The Aaron has the affect... my games run so much smoother and more immersive now more than ever. Craven said: Thanks The Aaron this is very cool and fun. Plus I am learning a lot.&nbsp;

=D&nbsp; I try!