CSS Wizardry

Kryx, can you give a working example of the autoexpanding code with a textarea? I've tried copying the code form above and it wont work for me.

I actually don't use it on any textareas as I allow them to be resized which causes problems.

If content is big enough to allow a textarea then it should allow a resize imo.

I kept the post up to date so it should work. If you want it (I'd suggest against it) then perhaps invite me to a game.

Reopening this thread.

Thank you

I've created a wiki article for the tricks from this thread: https://wiki.roll20.net/CSS_Wizardry

I've also added a link to the article from the first post.

Thank you as well, Brian.

Major thanks Brian.  Most of the sheet's code on roll20 can be traced to that thread. (your posts in particular) Cheers

Here is a trick we implemented recently: 
Graph paper background. it looks great with Comic Sans for an old school, hand written look. (comic sans is also a good accessibility font)

Here is "graph paper" with each square 16 pts wide. sheet-pf-wrapper is just the outermost div:

.sheet-graph-paper:checked ~ .sheet-pf-wrapper {
    background:
        linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
        linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
        linear-gradient(-90deg, rgba(0, 0, 0, .03) 1px, transparent 1px),
        linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
        linear-gradient(transparent 3px, transparent 3px, transparent 78px, transparent 78px),
        linear-gradient(-90deg, transparent 1px, transparent 1px),
        linear-gradient(-90deg, transparent 3px, transparent 3px, transparent 78px, transparent 78px),
        linear-gradient(transparent 1px, transparent 1px), transparent;
    background-size:
        16px 16px,
        16px 16px,
        16px 16px,
        16px 16px,
        16px 16px,
        16px 16px,
        16px 16px,
        16px 16px;
}

and it looks like this:

chris b. said:

comic sans is also a good accessibility font

There is a claim on the web that Comic Sans was designed to be easier to read for people with dyslexia. That claim is false. The font was created to replace Times New Roman in the word balloons of Microsoft Bob, and was inspired by the lettering in The Dark Night and Watchmen comic books. The font failed to ship with Microsoft Bob, but eventually found its way into the default fonts list for Windows 95.

So far as I'm aware, there is no scientific study comparing the accessibility of Comic Sans to other fonts, simply anecdotes like "My brother has dyslexia and he says..." There was a study in 2013 that investigated the subject of fonts affecting dyslexic reading, but Comic Sans was not one of the fonts investigated. The conclusion of the study notes that Comic Sans shares some characteristics with the fonts that did well (Helvetica, Courier, Arial, Veranda, and Computer Modern Unicode), but again, Comic Sans wasn't actually investigated. You can't simply say that sharing some characteristics is enough, either; the OpenDyslexic font (a font that was specifically intended to be easier to read for people with dyslexia) was on the list, and shares many qualities with Comic Sans. OpenDyslexic ranked poorly on fixation (very bad for dyslexic readers!), and came dead last in participant preference.

Note: I'm not trying to say that Comic Sans is necessarily a poor choice for your character sheet. I'm simply saying that there is no hard evidence to support the claim that Comic Sans is a good accessibility font.

Yeah i guess i've mostly read anecdotes. But we included both Verdana and Comic Sans choices in a dropdown so people can choose (along with a few others Arial, Lucida Sans, Segoe UI) The hardest part was changing the entire sheet from px to em and rem so that changing fonts did not just break everything.

Can someone give a working example of tabs? The example code in the wiki and the first page of this thread doesn't work for me. Basically the tabs appear floating above the tabs at the top of the character sheet (Bio/Character Sheet/Attributes), and they aren't clickable.

I have created a blank campaign, and happy to give anyone access to the campaign to see what's going on. But the campaign includes ONLY the code from the wiki, which is this in the html section:

<input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span>

<div class="sheet-tab-content sheet-tab1">
    <h1>Tab 1</h1>
    Lorem ipsum dolor sit amet
</div>

<div class="sheet-tab-content sheet-tab2">
    <h1>Tab the Second</h1>
    consectetur adipisicing elit
</div>

<div class="sheet-tab-content sheet-tab3">
    <h1>3rd Tab</h1>
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</div>

<div class="sheet-tab-content sheet-tab4">
    <h1>Fourth Tab</h1>
    Ut enim ad minim veniam
</div>

And in the CSS section, it ONLY includes this:

div.sheet-tab-content { display: none; }

input.sheet-tab1:checked ~ div.sheet-tab1,
input.sheet-tab2:checked ~ div.sheet-tab2,
input.sheet-tab3:checked ~ div.sheet-tab3,
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }

input.sheet-tab {
    width: 150px;
    height: 20px;
    position: relative;
    top: 5px;
    left: 6px;
    margin: -1.5px;
    cursor: pointer;
    z-index: 1;
    opacity: 0;
}

input.sheet-tab + span::before {
    content: attr(title);
    border: solid 1px #a8a8a8;
    border-bottom-color: black;
    text-align: center;
    display: inline-block;
    background: #fff;
    background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
    width: 150px;
    height: 20px;
    font-size: 18px;
    position: absolute;
    top: 12px;
    left: 13px;
}

input.sheet-tab:checked + span::before {
    background: #dcdcdc;
    background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
    border-bottom-color: #fff;
}

input.sheet-tab:not(:first-child) + span::before { border-left: none; }

input.sheet-tab2 + span::before {
    background: #fee;
    background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);
    left: 163px;
}

input.sheet-tab2:checked + span::before {
    background: #dcdcdc;
    background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);
    border-bottom-color: #fcecec;
}

input.sheet-tab3 + span::before { left: 313px; }

input.sheet-tab4 + span::before { left: 463px; }

div.sheet-tab-content {
    border: 1px solid #a8a8a8;
    border-top-color: #000;
    margin: 2px 0 0 5px;
    padding: 5px;
}

div.sheet-tab2 { background-color: #fcecec; }

Try adjusting your top and left values for
input.sheet-tab + span::before
example;

input.sheet-tab + span::before {
    content: attr(title);
    border: solid 1px #a8a8a8;
    border-bottom-color: black;
    text-align: center;
    display: inline-block;
    background: #fff;
    background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
    width: 150px;
    height: 20px;
    font-size: 18px;
    position: absolute;
    top: 71px;
    left: 35px;
}

Thanks Vince, that worked.
I also had to tweak the top and left of input.sheet-tab, because the clickable area was offset from its tab. But your help showed me where to look.

It's a bit weird that the example provided doesn't work right. Could there be something at my end making these wrongly aligned specifically me? I dont want to make changes to get it working for me, and then find it is wrong for my players.

Or are there errors in the code on the wiki?

I'm not sure. Perhaps roll20 has made changes to the journal window since the original code was written.  The CSS Wizardry thread goes waaaay back on the forums, but only recently was added to the wiki.  It's just an example(template) to follow so perhaps it's expected that you would need to "fine-tune" things as needed.

Does the actual JSFiddle not work for you, or is it your implementation that's having problems?

If the JSFiddle isn't working, what browser are you using?

I didnt try the jsfiddle. I just copied the example into a blank custom character sheet, and nothing else was in the sheet.

My browser is chrome.

Scott S. said:

nobody wants to touch this I guess

Well, it's a large unreadable mess. If you distilled it down to the essentials, containing only the code parts with the stuff you want to display and the radio buttons that are supposed to change it, I'm sure someone could help.

@Scott S.
Try something like this to hide and reveal stuff based on a radio button value:
 https://jsfiddle.net/5LtkfhjL/

I wanted to share my version of Kryx' trick for forms that grow with their contents, specifically textareas that grow extra lines to accommodate their contents. It didn't work for me immediately, so I though I'd share what I came up with after getting it to work like I wanted it to. Once set up, this functions in a pretty foolproof manner, and I think it's often a good alternative to offering a resize handle (these two are mutually exclusive), depending on what kind of data you use it for.
HTML:

<div class="sheet-auto-expand">
	<span name="attr_name"></span>
	<textarea spellcheck="false" name="attr_name"></textarea>
</div>

CSS:

.sheet-auto-expand {
	position: relative;
	cursor: text;
	word-wrap: break-word;
}
.sheet-auto-expand span {
	visibility: hidden;
	white-space: pre-wrap;
	display: block;
}
.sheet-auto-expand textarea {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	margin: 0;
	overflow: hidden;
	resize: none;
	height: 100%;
	width: 100%;
	display: block;
	box-sizing: border-box;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	padding: inherit;
	text-align: inherit;
	text-transform: inherit;
}

You can set padding, border, and any kind of font properties you want on the .sheet-auto-expand container div as desired, and everything should be inherited by the actual textarea. It's important that you set this on the container div and not on the textarea, since the span also needs to inherit all these properties!

Important: In order for this to actually show up on the sheet, one specific CSS property is missing: you need to set a min-height for the .sheet-auto-expand element equal to the minimum height you want it to be (so at least 1 line-height + vertical padding, or more if you want to show more lines by default).

Hey!
I hope I can post a request for tips here. I don't have any useful code yet, and I'm kind of stumped. I want to create a table or set of divs that show a shape like this, but I don't know quite how to accomplish it. I've searched for some guides, but to no avail. Maybe I'm just too much of a novice for this, but I'd appreciate any suggestions or anything that points me in the right direction.

Check out the border-radius property. In particular, note that border-radius: 50% will create a circle.

Pardon if this has been asked and answered already or if this is somewhere here, I've tried to examine the forums but I have yet to find anything that solves my question.

I have some code that I want to collapse/expand.

<div class="sheet-table" style="width: 99%;border: 4px;border-style:double;">
	<div class="sheet-table-row">
		<span class="sheet-tdcs sheet-tinylabel" style="width: 5%;"> </span>
		<span class="sheet-tdcs sheet-tinylabel" style="width: 5%;">DC</span>
		<span class="sheet-tdcs sheet-tinylabel" style="width: 90%;">Action</span>
	</div> <!-- End of Description Header Row  -->
	<div class="sheet-table-row">
		<span class="sheet-tdcs sheet-tinylabel">1st:</span>
		<span class="sheet-tdcs"><input type="text" name="attr_skill_dc1" title="(@{repeating_ES_$X_skill_dc1})"></span>
		<span class="sheet-tdcs"><input type="text" name="attr_dc_action1" title="(@{repeating_ES_$X_dc_action1})"></span>
	</div>
	<div class="sheet-table-row">
		<span class="sheet-tdcs sheet-tinylabel">2nd:</span>
		<span class="sheet-tdcs"><input type="text" name="attr_skill_dc2" title="(@{repeating_ES_$X_skill_dc2})"></span>
		<span class="sheet-tdcs"><input type="text" name="attr_dc_action2" title="(@{repeating_ES_$X_dc_action2})"></span>
	</div>
	<div class="sheet-table-row">
		<span class="sheet-tdcs sheet-tinylabel">3rd:</span>
		<span class="sheet-tdcs"><input type="text" name="attr_skill_dc3" title="(@{repeating_ES_$X_skill_dc3})"></span>
		<span class="sheet-tdcs"><input type="text" name="attr_dc_action3" title="(@{repeating_ES_$X_dc_action3})"></span>
	</div>
	<div class="sheet-table-row">
		<span class="sheet-tdcs sheet-tinylabel">4th:</span>
		<span class="sheet-tdcs"><input type="text" name="attr_skill_dc4" title="(@{repeating_ES_$X_skill_dc4})"></span>
		<span class="sheet-tdcs"><input type="text" name="attr_dc_action4" title="(@{repeating_ES_$X_dc_action4})"></span>
	</div>
	<div class="sheet-table-row">
		<span class="sheet-tdcs sheet-tinylabel">5th:</span>
		<span class="sheet-tdcs"><input type="text" name="attr_skill_dc5" title="(@{repeating_ES_$X_skill_dc5})"></span>
		<span class="sheet-tdcs"><input type="text" name="attr_dc_action5" title="(@{repeating_ES_$X_dc_action5})"></span>
	</div>
	<div class="sheet-table-row">
		<span class="sheet-tdcs sheet-tinylabel">6th:</span>
		<span class="sheet-tdcs"><input type="text" name="attr_skill_dc6" title="(@{repeating_ES_$X_skill_dc6})"></span>
		<span class="sheet-tdcs"><input type="text" name="attr_dc_action6" title="(@{repeating_ES_$X_dc_action6})"></span>
	</div>
	<div class="sheet-table-row">
		<span class="sheet-tdcs sheet-tinylabel">7th:</span>
		<span class="sheet-tdcs"><input type="text" name="attr_skill_dc7" title="(@{repeating_ES_$X_skill_dc7})"></span>
		<span class="sheet-tdcs"><input type="text" name="attr_dc_action7" title="(@{repeating_ES_$X_dc_action7})"></span>
	</div>
	<div class="sheet-table-row">
		<span class="sheet-tdcs sheet-tinylabel">8th:</span>
		<span class="sheet-tdcs"><input type="text" name="attr_skill_dc8" title="(@{repeating_ES_$X_skill_dc8})"></span>
		<span class="sheet-tdcs"><input type="text" name="attr_dc_action8" title="(@{repeating_ES_$X_dc_action8})"></span>
	</div>
	<div class="sheet-table-row">
		<span class="sheet-tdcs sheet-tinylabel">9th:</span>
		<span class="sheet-tdcs"><input type="text" name="attr_skill_dc9" title="(@{repeating_ES_$X_skill_dc9})"></span>
		<span class="sheet-tdcs"><input type="text" name="attr_dc_action9" title="(@{repeating_ES_$X_dc_action9})"></span>
	</div>
	<div class="sheet-table-row">
		<span class="sheet-tdcs sheet-tinylabel">10th:</span>
		<span class="sheet-tdcs"><input type="text" name="attr_skill_dc10" title="(@{repeating_ES_$X_skill_dc10})"></span>
		<span class="sheet-tdcs"><input type="text" name="attr_dc_action10" title="(@{repeating_ES_$X_dc_action10})"></span>
	</div>
	<div class="sheet-table-row">
		<span class="sheet-tdcs sheet-tinylabel">11th:</span>
		<span class="sheet-tdcs"><input type="text" name="attr_skill_dc11" title="(@{repeating_ES_$X_skill_dc11})"></span>
		<span class="sheet-tdcs"><input type="text" name="attr_dc_action11" title="(@{repeating_ES_$X_dc_action11})"></span>
	</div>
	<div class="sheet-table-row">
		<span class="sheet-tdcs sheet-tinylabel">12th:</span>
		<span class="sheet-tdcs"><input type="text" name="attr_skill_dc12" title="(@{repeating_ES_$X_skill_dc12})"></span>
		<span class="sheet-tdcs"><input type="text" name="attr_dc_action12" title="(@{repeating_ES_$X_dc_action12})"></span>
	</div>
	<div class="sheet-table-row">
		<span class="sheet-tdcs sheet-tinylabel">13th:</span>
		<span class="sheet-tdcs"><input type="text" name="attr_skill_dc13" title="(@{repeating_ES_$X_skill_dc13})"></span>
		<span class="sheet-tdcs"><input type="text" name="attr_dc_action13" title="(@{repeating_ES_$X_dc_action13})"></span>
	</div>
	<div class="sheet-table-row">
		<span class="sheet-tdcs sheet-tinylabel">14th:</span>
		<span class="sheet-tdcs"><input type="text" name="attr_skill_dc14" title="(@{repeating_ES_$X_skill_dc14})"></span>
		<span class="sheet-tdcs"><input type="text" name="attr_dc_action14" title="(@{repeating_ES_$X_dc_action14})"></span>
	</div>
	<div class="sheet-table-row">
		<span class="sheet-tdcs sheet-tinylabel">15th:</span>
		<span class="sheet-tdcs"><input type="text" name="attr_skill_dc15" title="(@{repeating_ES_$X_skill_dc15})"></span>
		<span class="sheet-tdcs"><input type="text" name="attr_dc_action15" title="(@{repeating_ES_$X_dc_action15})"></span>
	</div>
	<div class="sheet-table-row">
		<span class="sheet-tdcs sheet-tinylabel">16th:</span>
		<span class="sheet-tdcs"><input type="text" name="attr_skill_dc16" title="(@{repeating_ES_$X_skill_dc16})"></span>
		<span class="sheet-tdcs"><input type="text" name="attr_dc_action16" title="(@{repeating_ES_$X_dc_action16})"></span>
	</div>
	<div class="sheet-table-row">
		<span class="sheet-tdcs sheet-tinylabel">17th:</span>
		<span class="sheet-tdcs"><input type="text" name="attr_skill_dc17" title="(@{repeating_ES_$X_skill_dc17})"></span>
		<span class="sheet-tdcs"><input type="text" name="attr_dc_action17" title="(@{repeating_ES_$X_dc_action17})"></span>
	</div>
	<div class="sheet-table-row">
		<span class="sheet-tdcs sheet-tinylabel">18th:</span>
		<span class="sheet-tdcs"><input type="text" name="attr_skill_dc18" title="(@{repeating_ES_$X_skill_dc18})"></span>
		<span class="sheet-tdcs"><input type="text" name="attr_dc_action18" title="(@{repeating_ES_$X_dc_action18})"></span>
	</div>
	<div class="sheet-table-row">
		<span class="sheet-tdcs sheet-tinylabel">19th:</span>
		<span class="sheet-tdcs"><input type="text" name="attr_skill_dc19" title="(@{repeating_ES_$X_skill_dc19})"></span>
		<span class="sheet-tdcs"><input type="text" name="attr_dc_action19" title="(@{repeating_ES_$X_dc_action19})"></span>
	</div>
	<div class="sheet-table-row">
		<span class="sheet-tdcs sheet-tinylabel">20th:</span>
		<span class="sheet-tdcs"><input type="text" name="attr_skill_dc20" title="(@{repeating_ES_$X_skill_dc20})"></span>
		<span class="sheet-tdcs"><input type="text" name="attr_dc_action20" title="(@{repeating_ES_$X_dc_action20})"></span>
	</div>
</div>

The character sheet/output will look something like this:


Now what I want to do is basically not have any of the unneeded modfier table rows displaying to unless they are required.  I have seen CSS trickery to hide elements using selection boxes to count the number of rows to display or or checkboxes to hide the next row (for the case of hideing the next "class" or "special ability"

But I am not sure how to do that. I am hoping someone would be able to give me some guidance.

I think the way I would do it would be to have a sheetworker set an attribute if the DC/Action field has a value, bind a checkbox to each of those attributes, and use those checkboxes to hide things. Something like this (untested):

// sheetworker

const skills = [];
for (let i = 1; i <= 20; i++) {
  skills.push(`skill_dc${i}`);
  skills.push(`dc_action${i}`);
}

on(`sheet:opened ${skills.map((s) => `change:${s}`).join(' ')}`, () => {
  getAttrs(skills, (values) => {
    const attrs = {};
    for (let i = 1; i <= 20; i++) {
      if (values[`skill_dc${i}`].length || values[`dc_action${i}`].length) {
        attrs[`skill${i}_has_value`] = 1;
      } else {
        attrs[`skill${i}_has_value`] = 0;
      }
    }
    setAttrs(attrs);
  });
});

<!-- html (partial) -->

  <div class="sheet-table-row">
    <span class="sheet-tdcs sheet-tinylabel">1st:</span>
    <span class="sheet-tdcs"><input type="text" name="attr_skill_dc1" title="(@{repeating_ES_$X_skill_dc1})"></span>
    <span class="sheet-tdcs"><input type="text" name="attr_dc_action1" title="(@{repeating_ES_$X_dc_action1})"></span>
  </div>
  <input type="checkbox" class="sheet-hidden sheet-skill-has-value" name="attr_skill1_has_value" value="1">
  <div class="sheet-table-row">
    <span class="sheet-tdcs sheet-tinylabel">2nd:</span>
    <span class="sheet-tdcs"><input type="text" name="attr_skill_dc2" title="(@{repeating_ES_$X_skill_dc2})"></span>
    <span class="sheet-tdcs"><input type="text" name="attr_dc_action2" title="(@{repeating_ES_$X_dc_action2})"></span>
  </div>
  <input type="checkbox" class="sheet-hidden sheet-skill-has-value" name="attr_skill2_has_value" value="1">
  <div class="sheet-table-row">
    <span class="sheet-tdcs sheet-tinylabel">3rd:</span>
    <span class="sheet-tdcs"><input type="text" name="attr_skill_dc3" title="(@{repeating_ES_$X_skill_dc3})"></span>
    <span class="sheet-tdcs"><input type="text" name="attr_dc_action3" title="(@{repeating_ES_$X_dc_action3})"></span>
  </div>
  <input type="checkbox" class="sheet-hidden sheet-skill-has-value" name="attr_skill3_has_value" value="1">
  <!-- etc... -->

/** css (partial) */

.sheet-hidden,
.sheet-table-row {
  display: none;
}

.sheet-table-row:first-child,
.sheet-table-row:nth-child(2),
.sheet-skill-has-value:checked + .sheet-table-row {
  display: table-row; /** or whatever display value you're intending to use */
}

Should hide all of the table-rows except the first two, and then show any table row with a value in the previous row.

Why is there sheet workers needed for this, can it be done without?

EDIT:
I only ask, because this is inside of a repeating section, and I haven't even begun to think about how I'm going to get this to function with SheetWorkers.  I imagine it will be quite complicated (just like the non-repeating /core/ skills).  And since I dont really know whats happening with the sheet workers I am hesitant to use them.

Given the table structure and the fact that the DC/Action fields could have just about any value, this isn't really possible without sheet workers.

If the entire set of 1-20 is a repitem, then it wouldn't change the sheet worker very much (again, untested code):

// create an array like ['skill_dc1', 'dc_action1', 'skill_dc2', 'dc_action2', etc...]
const skills = [];
for (let i = 1; i <= 20; i++) {
  skills.push(`skill_dc${i}`);
  skills.push(`dc_action${i}`);
}

// trigger when opening the sheet for the first time in a session, or when any of the dc/action fields change
on(`sheet:opened ${skills.map((s) => `change:repeating_skills:${s}`).join(' ')}`, () => {
  // get the row ids for all repitems
  getSectionIDs('repeating_skills', (ids) => {
    const repeatingSkills = [];
    ids.forEach((id) => {
      // get all the skill attribute names
      for (let i = 1; i <= 20; i++) {
        repeatingSkills.push([
          `repeating_skills_${id}_${skills[(i - 1) * 2]}`,
          `repeating_skills_${id}_${skills[i * 2 - 1]}`,
        ]);
      }
    });
    // get all skill attribute values
    getAttrs(repeatingSkills.reduce((a, b) => a.concat(b), []), (values) => {
      const attrs = {};
      // iterate over skills
      for (let i = 1; i <= 20; i++) {
        // if either skill_dcN or dc_actionN has a value, skillN_has_value = 1, otherwise skillN_has_value = 0
        if (values[repeatingSkills[i][0]].length || values[repeatingSkills[i][1]].length) {
          attrs[`repeating_skills_${id}_skill${i}_has_value`] = 1;
        } else {
          attrs[`repeating_skills_${id}_skill${i}_has_value`] = 0;
        }
      }
      // save skillN_has_value values
      setAttrs(attrs);
    });
  });
});

The image shown in the above post, is made of two outputs... one of them contains the check macro:
/w GM or !bw (blind whisper) MACRONAME
and then
!bw DC's and Modifiers.

This repeating section is designed to work with my rolltemplates and how I have dc's and modifier macros both for teaching new players/gms and for for a quick reference so I dont need to swap between books.  Most of the skills, I have this disabled for.  Such as performance, perception etc.. but, all of those core skills are BAKED into my character sheet as part of hidden fields.

The 1-20 you see easily on the image are for the DC / ACTION.  There is a second table for modifiers also 1-20.

I never realized it would be this complicated.  I thought it would be something like the code that is to show and hide tabbed sections  (Granted I don't understand how that works either, I can only copy and paste).  Only more complicated.  I thank you for the assistance and will play around with this for a while and see what I can come up with, if I have more questions, I'll ask.