inquarto | Lilypad Bingo Coding

LILYPAD OPENING BINGO

Unfilled Filled Unfilled Unfilled Unfilled Unfilled Unfilled Unfilled Unfilled Unfilled Unfilled Unfilled

Unfilled Unfilled Unfilled Unfilled Unfilled Unfilled Unfilled Unfilled Unfilled Unfilled Unfilled Unfilled

Information

While I spent many hours adapting a table based bingo code to div,

tessisamess built this code in a more streamlined elegant way. Many thanks to her for doing so. And thanks to

skeletone for also helping me learn what exactitudes DW needs in its coding. Lessons for the future. =)

The Coding

<center><div style="width:580px;color:#000;padding:20px 0px 0px 5px;font-family: georgia; font-size:35px;text-shadow: 1px 1px 1px #BDBDBD; text-align:left;">LILYPAD OPENING BINGO <img src="https://i.imgur.com/dGCxCzV.png"></div><br /><lj-raw><div style="margin:0 auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;width:calc((102px + 2px + 2px) * 5);text-align:center;font-family:calibri,sans-serif;font-size:12px;color:#111;font-weight:bold;">

<a href="" style="color:#111;background:#fff;text-decoration:none;width:102px;height:102px;border:1px dashed;margin:1px;display:flex;align-items:center;justify-content:center;">
		Unfilled
	</a>

<a href="" style="color:#fff;background:#313131;text-decoration:none;width:102px;height:102px;border:1px dashed;margin:1px;display:flex;align-items:center;justify-content:center;">
		Filled
	</a>

<a href="" style="color:#111;background:#fff;text-decoration:none;width:102px;height:102px;border:1px dashed;margin:1px;display:flex;align-items:center;justify-content:center;">
		Unfilled
	</a>

<a href="" style="color:#111;background:#fff;text-decoration:none;width:102px;height:102px;border:1px dashed;margin:1px;display:flex;align-items:center;justify-content:center;">
		Unfilled
	</a>

</div></lj-raw></center>
<br>
<center><div style="width:320px"><img src="https://v.dreamwidth.org/15408404/3764658" style="border:3px solid #000000;" title="character name" width="75px" height="75px">   <img src="https://v.dreamwidth.org/15408404/3764658" style="border:3px solid #000000;" title="character name" width="75px" height="75px">   <img src="https://v.dreamwidth.org/15408404/3764658" style="border:3px solid #000000;" title="character name" width="75px" height="75px">   <img src="https://v.dreamwidth.org/15408404/3764658" style="border:3px solid #000000;" title="character name" width="75px" height="75px">   <img src="https://v.dreamwidth.org/15408404/3764658" style="border:3px solid #000000;" title="character name" width="75px" height="75px">   <img src="https://v.dreamwidth.org/15408404/3764658" style="border:3px solid #000000;" title="character name" width="75px" height="75px">   <img src="https://v.dreamwidth.org/15408404/3764658" style="border:3px solid #000000;" title="character name" width="75px" height="75px">   <img src="https://v.dreamwidth.org/15408404/3764658" style="border:3px solid #000000;" title="character name" width="75px" height="75px"></div></center>

Editing Guide

✬ Paste it into a post.
✬ Update the prompts
✬ Set up characters. Choose a color (html) and an icon for each character. Fill in title="character name" and update the icon link.
✬ Complete a prompt by updating the color:#111 to #fff (if white is more readable) and background:#fff to the color chosen for the character, title="summary", and update the link to the filled prompt.
✬ Continue until you have completed what you wanted to do.

Terms of Use

✬ Use within Lilypad with wild abandon.
✬ Do not repost/redistribute claiming as your own.
✬ If you have a question or you break something, I am happy to help.