Checklist & Progress Tracker

[tesscodes]

MY FIRST CHECKLIST

  44% COMPLETED

INCOMPLETE ITEM
INCOMPLETE ITEM

This is an item with more information

INCOMPLETE ITEM W/SUB-ITEMS

COMPLETED ITEM
INCOMPLETE ITEM

COMPLETED ITEM
INCOMPLETE ITEM
COMPLETED ITEM
COMPLETED ITEM

MY SECOND CHECKLIST

  60% COMPLETED

INCOMPLETE ITEM
COMPLETED ITEM
INCOMPLETE ITEM
COMPLETED ITEM
COMPLETED ITEM

MY THIRD CHECKLIST

  100% COMPLETED

COMPLETED ITEM
COMPLETED ITEM
COMPLETED ITEM
COMPLETED ITEM
COMPLETED ITEM
COMPLETED ITEM

Information

Hey guys! I got a question about checklists today from one of my wonderful commenters, and it got me thinking... so today we have a checklist/progress bar combo code, along with codes for isolating single parts of the code if you don't need The Works.

The default version of this code utilizes the details tag so that you can hide and expand multiple checklists in the same entry, and I've also added coding for items with descriptions and sub-lists!

Use the coding in ITEM TYPES to fill in checklists! A good way to do this fast is to put a textarea in the comments of the entry your checklist is on with the contents of ITEM TYPES and screen it so you always have it handy without having to run back over here. Enjoy! ♥

Coding: Full Progress Checklist

<lj-raw><div style="width:400px;margin:0 auto;line-height:170%;font-family:helvetica,arial,sans-serif;font-size:11px;color:#222;letter-spacing:1px;text-align:justify;padding:25px;border:1px solid rgba(0,0,0,0.16);border-radius:4px;"> <div style="text-align:center;margin-bottom:10px;font-family:impact;font-size:20px;color:#8BADA2;"> MY CHECKLIST </div> <details open> <summary style="font-size:0;color:transparent;background:#eee;border-radius:7px;cursor:pointer;"><div style="background:#8BADA2;width:50%;color:#fff;font-size:10px;letter-spacing:3px;padding:3px 0;border-radius:7px;">&nbsp;&nbsp;50% COMPLETED</div></summary> CHECKLIST HERE </details> </div><center><a href="http://tessisamess.insanejournal.com/" style="font-family:helvetica,arial,sans-serif;color:#aaa;text-decoration:none;letter-spacing:3px;font-size:10px;">CODE BY TESSISAMESS</a></center></lj-raw>

Coding: Multiple Checklists

<lj-raw><div style="width:400px;margin:0 auto;line-height:170%;font-family:helvetica,arial,sans-serif;font-size:11px;color:#222;letter-spacing:1px;text-align:justify;padding:25px;border:1px solid rgba(0,0,0,0.16);border-radius:4px;"> <div style="text-align:center;margin-bottom:10px;font-family:impact;font-size:20px;color:#8BADA2;"> CHECKLIST TITLE </div> <details open> <summary style="font-size:0;color:transparent;background:#eee;border-radius:7px;cursor:pointer;"><div style="background:#8BADA2;width:50%;color:#fff;font-size:10px;letter-spacing:3px;padding:3px 0;border-radius:7px;">&nbsp;&nbsp;50% COMPLETED</div></summary> CHECKLIST HERE </details> <br><div style="text-align:center;margin-bottom:10px;font-family:impact;font-size:20px;color:#8BADA2;"> CHECKLIST TITLE </div> <details> <summary style="font-size:0;color:transparent;background:#eee;border-radius:7px;cursor:pointer;"><div style="background:#8BADA2;width:50%;color:#fff;font-size:10px;letter-spacing:3px;padding:3px 0;border-radius:7px;">&nbsp;&nbsp;50% COMPLETED</div></summary> CHECKLIST HERE </details> <br><div style="text-align:center;margin-bottom:10px;font-family:impact;font-size:20px;color:#8BADA2;"> CHECKLIST TITLE </div> <details> <summary style="font-size:0;color:transparent;background:#eee;border-radius:7px;cursor:pointer;"><div style="background:#8BADA2;width:50%;color:#fff;font-size:10px;letter-spacing:3px;padding:3px 0;border-radius:7px;">&nbsp;&nbsp;50% COMPLETED</div></summary> CHECKLIST HERE </details> </div><center><a href="http://tessisamess.insanejournal.com/" style="font-family:helvetica,arial,sans-serif;color:#aaa;text-decoration:none;letter-spacing:3px;font-size:10px;">CODE BY TESSISAMESS</a></center></lj-raw>

Coding: Item Types

<!---UNCHECKED ITEM---> <img src="https://i.imgur.com/sn6yyPX.png" style="padding-top:10px;margin-bottom:-6px;"> INCOMPLETE ITEM<br> <!---UNCHECKED WITH DESCRIPTION---> <img src="https://i.imgur.com/sn6yyPX.png" style="padding-top:10px;margin-bottom:-6px;"> INCOMPLETE ITEM <blockquote style="border-left:3px solid rgba(0,0,0,0.16);padding-left:8px;">This is an item with more information</blockquote> <!---UNCHECKED WITH SUB ITEMS---> <img src="https://i.imgur.com/sn6yyPX.png" style="padding-top:10px;margin-bottom:-6px;"> INCOMPLETE ITEM W/SUB-ITEMS <blockquote> SUB-CHECKBOXES HERE </blockquote> <!---CHECKED ITEM---> <img src="https://i.imgur.com/WFWpIV2.png" style="padding-top:10px;margin-bottom:-6px;"> <i style="opacity:0.5;"><s>COMPLETED ITEM</s></i><br>

Coding: Checklist Only

<lj-raw><div style="width:400px;margin:0 auto;line-height:170%;font-family:helvetica,arial,sans-serif;font-size:11px;color:#222;letter-spacing:1px;text-align:justify;padding:25px;border:1px solid rgba(0,0,0,0.16);border-radius:4px;"> <div style="text-align:center;margin-bottom:10px;font-family:impact;font-size:20px;color:#8BADA2;"> MY CHECKLIST </div> CHECKLIST HERE </div><center><a href="http://tessisamess.insanejournal.com/" style="font-family:helvetica,arial,sans-serif;color:#aaa;text-decoration:none;letter-spacing:3px;font-size:10px;">CODE BY TESSISAMESS</a></center></lj-raw>

Coding: Progress Bar Only

<lj-raw><div style="background:#eee;border-radius:7px;color:#fff;font-size:9px;letter-spacing:3px;width:350px;margin:0 auto;font-family:helvetica,arial,sans-serif;"><div style="background:#8BADA2;width:50%;padding:7px 0;border-radius:7px;">&nbsp;&nbsp;50% COMPLETED</div></div><center><a href="http://tessisamess.insanejournal.com/" style="font-family:helvetica,arial,sans-serif;color:#aaa;text-decoration:none;letter-spacing:3px;font-size:10px;">CODE BY TESSISAMESS</a></center></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

CHECKLIST TITLE - Your title
50% (x2) - Your amount of progress
CHECKLIST HERE - Start inputting checklist items here

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

FONTS

helvetica,arial,sans-serif - Overall font
impact - Headers

COLORS

#fff - Character names
#eee - Progress bar background/gutter
#8BADA2 - Accent color
#222 - Text color
0,0,0 - Container border; blockquote border (semi-transparent rgba value)

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!