Character Vault
Any Concept / Any System
Compendium
Your System Come To Life
Roll20 for Android
Streamlined for your Tablet
Roll20 for iPad
Streamlined for your Tablet

Personal tools

Difference between revisions of "Macros/Formatting"

From Roll20 Wiki

Jump to: navigation, search
(css styling guide)
m (Styling with CSS)
Line 24: Line 24:
  
  
1. ''Border'' Border can be used to create a border around your button. If you are turning the button transparent just leave it set to "none" (without quotes). If you do want a border this short explanation may help. [https://www.w3schools.com/css/css_border_shorthand.asp CSS border shorthand]
+
1. ''Border'' can be used to create a border around your button. If you are turning the button transparent just leave it set to "none" (without quotes). If you do want a border this short explanation may help: [https://www.w3schools.com/css/css_border_shorthand.asp CSS border shorthand]
  
2. ''background-color'' removes the pink box by turning it transparent. You can also turn the pink box into another color by substituting a color word such as "aqua" (without quotes). You can find color names here. https://htmlcolorcodes.com/color-names/
+
2. ''background-color'' removes the pink box by turning it transparent. You can also turn the pink box into another color by substituting a color word such as "aqua" (without quotes). You can find color names here: https://htmlcolorcodes.com/color-names/
  
3. ''padding'' controls how big the clickable space is around your button-name. A px of 0 is no extra clickable space. A px of 5 is a lot of extra clickable space.  
+
3. ''padding'' controls how big the clickable space is around your button-name. A px of 0 is no extra clickable space. A px of 5 is a lot of extra clickable space. You will want to play with this to get a space around your button-name that looks good.  
  
4. ''color'' sets the color of the name using a hex color code (such as #3452eb). Here is a source of hex color codes. https://htmlcolorcodes.com/
+
4. ''color'' sets the color of the name using a hex color code (such as #3452eb). Here is a source of hex color codes: https://htmlcolorcodes.com/
  
5. ''font-weight'' sets how thick the letters look (such as bold). You can use a word (such as bold) or a number (such as 700). Here is a short guide on font weights: https://www.w3schools.com/cssref/pr_font_weight.php  
+
5. ''font-weight'' sets how thick the letters look (such as bold). If you want something other than bold you can use a word (such as lighter) or a number (such as 300). Here is a short guide on font weights: https://www.w3schools.com/cssref/pr_font_weight.php
  
 +
In the end it will look something like this:
 +
/w gm &{template:npcaction} &{noerror} {{rname=@{selected|character_name}}} {{name=@{selected|npc_type}}} {{description=[Macro1](~Macro1" style="border:none;background-color:transparent;padding:0px;color:#3452eb;font-weight:bold;) }}
  
 +
A note regarding Light/Dark mode: the color(s) you set up here will not change depending on mode, so make sure you select colors that will display well in the mode of your choice.
  
 
===Other advanced===
 
===Other advanced===

Revision as of 21:40, 5 March 2023

Main Page: Macro Guide


This is Tips and tricks on formatting how messages in the q Text Chat appear.

Contents

Formatting

You can use common Markdown to format you text, and to even create hyperlinks in text shown in the chat.

If you hyperlink to to a i Compendium page, it will open up inside Roll20 when clicked.

Markdown

Markdown is available to let you bold, italic, bold-italic, create a hyperlinks, or include even an image in your macros and text as they appear in the q Text Chat. You can use basic Markdown syntax in your text chat messages. We don't support the entire breadth of everything Markdown can do (like headers), but rather just basic formatting. Here's a quick rundown:

Format Syntax
Italicize Text *text to italicize*
Bold Text **text to bold**
Bold & Italicize Text ***text to bold & italicize***
Code ``Code``
Link to URL [Google](https://www.google.com), [Dodge](https://roll20.net/compendium/dnd5e/Rules:Actions%20in%20Combat#h-Dodge)
Image [Roll20 Logo](https://app.roll20.net/v2/images/roll20-logo.png)

Alternative to adding the markdown into the macros, you can sometimes add the markdown to your Character Attributes, so you can have a universal macro, and make individual adjustment to to how you want each output to look like.


Example:

/em his **@{bob|height}** tall, and can be described as: @{bob|description}.

Note on Code: The extra backtick at the start of the code snippet is required due to the backtick character also being the character used to escape commands.

Note on Images: Including an image is just putting in a link to an image. If the link ends in .png, .jpg, .jpeg, or .gif, we will automatically insert an image tag in addition to linking to the source image.

You can use the Markdown formatting in general messages, whispers (/w), descriptions (/desc), and emotes (/em). You can also include Markdown formatting in the values you pass to Roll Templates and it should work fine. For example:
 {{attack= [[1d20]] vs **AC**}}


Styling with CSS

You can further style chat output and Chat Menus using CSS, which is a hack discovered by Oosh.

Here is how you can modify a basic chat menu with colors etc. Take [Macro1](~Macro1) and turn it into: [Macro1](~Macro1" style="border:none;background-color:transparent;padding:0px;color:#3452eb;font-weight:bold;)


1. Border can be used to create a border around your button. If you are turning the button transparent just leave it set to "none" (without quotes). If you do want a border this short explanation may help: CSS border shorthand

2. background-color removes the pink box by turning it transparent. You can also turn the pink box into another color by substituting a color word such as "aqua" (without quotes). You can find color names here: https://htmlcolorcodes.com/color-names/

3. padding controls how big the clickable space is around your button-name. A px of 0 is no extra clickable space. A px of 5 is a lot of extra clickable space. You will want to play with this to get a space around your button-name that looks good.

4. color sets the color of the name using a hex color code (such as #3452eb). Here is a source of hex color codes: https://htmlcolorcodes.com/

5. font-weight sets how thick the letters look (such as bold). If you want something other than bold you can use a word (such as lighter) or a number (such as 300). Here is a short guide on font weights: https://www.w3schools.com/cssref/pr_font_weight.php

In the end it will look something like this: /w gm &{template:npcaction} &{noerror} {{rname=@{selected|character_name}}} {{name=@{selected|npc_type}}} {{description=[Macro1](~Macro1" style="border:none;background-color:transparent;padding:0px;color:#3452eb;font-weight:bold;) }}

A note regarding Light/Dark mode: the color(s) you set up here will not change depending on mode, so make sure you select colors that will display well in the mode of your choice.

Other advanced

HTML replacement

Main Page: HTML Entities

When creating some complicated macros, usually involving nesting, you will need to use HTML entities in parts of the code to trick the Roll20 system to make it behave like you want, or some advanced tricks won't work.

Here are some HTML Entities/Escape Characters that are commonly useful to escape when creating advanced Roll20 macros. See HTML Entities or special character for more:

Character Replacement
| (pipe) |
, ,
{ {, ({)
} }, (})
& &, (&)
space  , ( )
= =
_ _
( (
) )
[ [, ([)
] ], (])
< &#60;, (&lt;)
> &#62;, (&gt;)
`(backtick, grave accent) &#96;
*(asterisk) &#42;
! &#33;
"(doublequote) &#34;
# &#35;
-(hyphen) &#45;
@ &#64;



Example:

Here is a macro that will not work, because the "Choose a Roll"-query thinks it stops at the first } it encounters, which is on the second row:

?{Choose a Roll|
  STR,/roll 1d20 + 3 + (?{Modifier})|
  DEX,/roll 1d20 + 2 + (?{Modifier})|
  CON,/roll 1d20 + 1 + (?{Modifier})}

Fixed version:

By using HTML entities to replace all } inside "Choose a Roll", it will now correctly process where the query ends.

?{Choose a Roll|
  STR,/roll 1d20 + 3 + (?{Modifier&#125;) |
  DEX,/roll 1d20 + 2 + (?{Modifier&#125;) |
  CON,/roll 1d20 + 1 + (?{Modifier&#125;) }

If you want to change the ?{Modifier}-query to have a default value like ?{Modifier|0}, you will need to replace the |, so the query won't mistakenly think it's the closing | for that option.

?{Choose a Roll|
  STR,/roll 1d20 + 3 + (?{Modifier&#124;0&#125;) |
  DEX,/roll 1d20 + 2 + (?{Modifier&#124;0&#125;) |
  CON,/roll 1d20 + 1 + (?{Modifier&#124;0&#125;) }

Advanced Nesting example:

Here you can make choices, where each choice might have suboptions to choose between, which in turn might have their own suboptions.

?{Name of Query|
   Option 1, ?{value1&#124;
      Option 1A&#44; ?{value1A&amp;#124;
         Option 1A1&amp;#44; value1A1 &amp;#124;
         Option 1A2&amp;#44; value1A2
      &amp;#125; &#124;
      
      Option 1B&#44; ?{value1B&amp;#124;
         Option 1B1&amp;#44; value1B1 &amp;#124;
         Option 1B2&amp;#44; value1B2 &amp;#124;
         Option 1B3&amp;#44; value1B3
      &amp;#125;
   &#125; |
   Option 2, ?{value2&#124;value2&#125; 
}

The descision tree goes:

Option1
Option1A
Option1A1
Option1A2
Option1B
Option1B1
Option1B2
Option1B3
Option2

See Advanced Usage for Roll Queries for more examples.

Tooltip

Images

Various ways to use or show images in macros or the chat.

Hyperlinks

You can have hyperlinks in chat messages, linking to character sheets, handouts, i Compendium, as well as pages outside Roll20.net

You can also create links to roll other macros, see Chat Menus for more examples

Multi-line

API

Stylus

You can use Stylus to change how things look for you, without affecting others. Here are some of the tricks: